Skip to main content

Terrific Pixel - General

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

Updated this week

General

Overview

This document explains how to integrate the Terrific Analytics “pixel” on any non‑Shopify website (custom stack, WooCommerce, Magento, etc.).


The integration uses a lightweight JavaScript SDK that sends key commerce events (page views, product views, add/remove to cart, checkout started/completed) into Terrific, so your pixel in the Terrific admin shows as Connected and your dashboards stay accurate.

Prerequisites

  • Terrific Store ID

    • You can find this in the Terrific back‑office (Terrific admin).

  • Environment

    • Production events URL: <https://terrific.live/api/customer-shop-event>

    • Staging / test events URL: <https://staging.terrific.live/api/customer-shop-event>

  • Where to add scripts

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

  • 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).

Basic Installation (Pixel Script)

Add the following snippet to every page, preferably in the <head> section:

<script async src="https://live-sdk.terrific.live/analytics-sdk.min.js"></script> <script>   
window.TerrificAnalyticsConfig = {
storeId: 'YOUR_TERRIFIC_STORE_ID',
eventsUrl: 'https://terrific.live/api/customer-shop-event' // or staging URL };
</script>
  • Replace YOUR_TERRIFIC_STORE_ID with the store ID we provide.

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

Identity

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.

Implementation Checklist (for your developers)

  • Scripts

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

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

  • 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?