đĄ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.jsscript to all pages.[ ] Configured
window.TerrificAnalyticsConfigwith the correctstoreId.
Events
[ ]
trackPageViewedwired on every page or route change.[ ]
trackProductViewedon product detail pages.[ ]
trackProductAddedToCartwhen items are added to cart.[ ]
trackProductRemovedFromCartwhen items are removed.[ ]
trackCheckoutStartedat checkout entry.[ ]
trackCheckoutCompletedafter successful payment.
