Skip to main content

Terrific Pixel - General

Track live session effectiveness with reliable attribution between Terrific checkouts and the shop's website.

💡A quick tip before you start: We recommend implementing the Terrific pixel through Google Tag Manager (GTM) whenever possible. It makes installation easier to manage, update, and troubleshoot; no need to touch your site's code directly every time something changes.

What is this guide for?

This guide will walk you through connecting the Terrific pixel to your website if you're not using Shopify (for example, if your store runs on a custom platform, WooCommerce, Magento, or something similar).


Think of the pixel as a little helper that quietly keeps track of important moments in your customers' shopping journey: like when someone views a page, checks out a product, adds something to their cart, or completes a purchase. This information flows into Terrific so your dashboard stays accurate and your pixel shows up as "Connected" in your account.

Before You Begin

Here's what you (or your developer) will need on hand:

1. Terrific Store ID. Your Terrific Store ID, which you can find in your Terrific account.

2. Where to add scripts

  • Add a script tag to your site’s HTML template (typically in <head> or just before </body>).

3. Optional: User IDs / Session IDs

  • If you want full attribution, you should be able to provide:

    • Your internal user ID

    • The Terrific session ID you receive from us (for traffic coming from Terrific).

Getting the Pixel Installed

Add the following snippet to every page, preferably in the <head> section, replacing the YOUR_TERRIFIC_STORE_ID with the store ID we provide:

<script async src="https://live-sdk.terrific.live/analytics-sdk.min.js"></script> <script>   
window.TerrificAnalyticsConfig = {
storeId: 'YOUR_TERRIFIC_STORE_ID'
};
</script>

Once this is in place, the SDK initializes automatically and starts sending events when you call the tracking methods described below.

What the Pixel Keeps Track Of

Automatic anonymous ID

  • The SDK automatically creates a hashed anonymous ID per browser and keeps it in localStorage.

  • This works out‑of‑the‑box, so you get anonymous funnel data even if you don’t identify users.

Events You Need to Implement

All events share these common concepts:

  • platformType: a string describing your platform (e.g. "custom", "magento", "woocommerce"). Choose a stable value.

  • metadata (optional): any extra properties you want to attach (e.g. coupon codes, campaign IDs).

  • Product object shape (used in several events):

{   
id: 'PRODUCT_ID',
variantId: 'VARIANT_ID_OPTIONAL',
title: 'Product name',
price: 99.99,
sku: 'SKU-123',
quantity: 1
}

1. Page Viewed

Call whenever a page is viewed (e.g. on every page load or route change).

TerrificAnalytics.trackPageViewed({
platformType: 'custom', // or 'magento', 'woocommerce', etc.
url: window.location.href, // optional, will default to location.href if omitted
metadata: { pageType: 'product', // example: 'home', 'category', 'product', etc.
campaign: 'spring_sale' // any additional useful context
}
});

2. Product Viewed

Call on the product detail page view.

TerrificAnalytics.trackProductViewed({  
platformType: 'custom',
product: {
id: '123',
variantId: '123-XL',
title: 'T‑Shirt XL',
price: 49.99,
sku: 'TSHIRT-XL',
quantity: 1
},
metadata: {
category: 'T-Shirts'
}
});

3. Product Added to Cart

Call when a product is successfully added to the cart.

TerrificAnalytics.trackProductAddedToCart({
platformType: 'custom',
cartId: 'CART_ABC_123', // your cart identifier
totalPrice: 149.97, // cart total AFTER adding this item (optional but recommended)
product: {
id: '123',
variantId: '123-XL',
title: 'T‑Shirt XL',
price: 49.99,
sku: 'TSHIRT-XL',
quantity: 3
},
metadata: {
source: 'product_page' // e.g. widget source, upsell, etc.
}
});

4. Product Removed from Cart

Call when a product is removed from the cart.

TerrificAnalytics.trackProductRemovedFromCart({   
platformType: 'custom',
cartId: 'CART_ABC_123',
totalPrice: 99.98, // cart total AFTER removal (optional but recommended)
product: {
id: '123',
variantId: '123-XL',
title: 'T‑Shirt XL',
price: 49.99,
sku: 'TSHIRT-XL',
quantity: 1
},
metadata: {
reason: 'user_removed' // if you track reasons, optional
}
});

5. Checkout Started

Call when the customer enters the checkout flow (e.g. clicks “Checkout” from the cart).

TerrificAnalytics.trackCheckoutStarted({   
platformType: 'custom',
cartId: 'CART_ABC_123',
totalPrice: 149.97,
subTotalPrice: 139.97, // before discounts/taxes if available
products: [
{
id: '123',
variantId: '123-XL',
title: 'T‑Shirt XL',
price: 49.99,
sku: 'TSHIRT-XL',
quantity: 3
}
],
metadata: {
currency: 'USD',
couponCode: 'SPRING10'
}
});

6. Checkout Completed

Call when the order is successfully completed / paid.

TerrificAnalytics.trackCheckoutCompleted({   
platformType: 'custom',
cartId: 'CART_ABC_123',
totalPrice: 129.97, // final total actually charged
subTotalPrice: 139.97, // before discounts/taxes if available
products: [
{
id: '123',
variantId: '123-XL',
title: 'T‑Shirt XL',
price: 49.99,
sku: 'TSHIRT-XL',
quantity: 3
}
],
metadata: {
currency: 'USD',
orderId: 'ORDER_999',
couponCode: 'SPRING10'
}
});

These events power the Terrific pixel status and your analytics reports.

A Note for Your Developer

  • Scripts

    • [ ] Added analytics-sdk.min.js script to all pages.

    • [ ] Configured window.TerrificAnalyticsConfig with the correct storeId.

  • Events

    • [ ] trackPageViewed wired on every page or route change.

    • [ ] trackProductViewed on product detail pages.

    • [ ] trackProductAddedToCart when items are added to cart.

    • [ ] trackProductRemovedFromCart when items are removed.

    • [ ] trackCheckoutStarted at checkout entry.

    • [ ] trackCheckoutCompleted after successful payment.

Did this answer your question?