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_IDwith 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.jsscript to all pages.[ ] Configured
window.TerrificAnalyticsConfigwith the correctstoreIdandeventsUrl.
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.
