Pixel Tracking

Entry: lib/utils/pixelTracking.js (barrel re-export)

Event map

Pixel functions

Function	Trigger	Delay
`fireCategoryPageLoadPixel`	Category page mount	3 seconds
`fireCategoryPageViewPixel`	Theme closes, loader hidden	Immediate
`fireButtonClickConversion`	CTA click (`guideNoAd=1` flow)	1 second
`fireConversionPixel`	Rewarded ad completed	On reward
`fireAdClosedPixel`	Ad dismissed	On close
`fireArticlePageLoadPixel`	Article page mount	Immediate

Meta CAPI events

Event	Value	When
`category_view`	0.1	Theme closes
`article_view`	0.1	Article load
`reward_start`	0.1	Rewarded ad starts
`reward_view`	KV/1000 USD	Rewarded ad completed
`reward_closed`	0.1	Ad dismissed

Config per tenant

pixelConfig: {
  googlePixelId: "AW-XXXXX",
  googleConversionIds: {
    buttonClick: "label",
    rewardedAd: "label",
    categoryPageLoad: "label",
    categoryPageView: "label",
    articlePageLoad: "label"
  },
  metaPixelId: "123456789",
  gaTagId: "G-XXXXXXX"
}

Hooks

Hook	File	Purpose
`useCategoryPixels`	`components/hooks/useCategoryPixels.js`	Category page pixel effects
`useConversionPixels`	`components/hooks/useConversionPixels.js`	Rewarded ad pixel state

TikTok Server-Side Integration (CAPI)

If TikTok server-side tracking is required, use Google Tag Manager (GTM) to process custom datalayer pushes.

Initialization & Inject Code

Include the GTM initializer on target interactions:

function gtm_tag(gid) {
  (function (w, d, s, l, i) {
    w[l] = w[l] || []; w[l].push({
      'gtm.start': new Date().getTime(), 
      event: 'gtm.js'
    }); 
    var f = d.getElementsByTagName(s)[0],
        j = d.createElement(s), 
        dl = l != 'dataLayer' ? '&l=' + l : ''; 
    j.async = true; 
    j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; 
    f.parentNode.insertBefore(j, f);
  })(window, document, 'script', 'dataLayer', gid);

  let noscript1 = document.createElement('script');
  let iframe1 = document.createElement('iframe');
  iframe1.src = `https://www.googletagmanager.com/ns.html?id=${gid}`;
  iframe1.height = "0";
  iframe1.width = "0";
  iframe1.style = "display:none;visibility:hidden";
  noscript1.appendChild(iframe1);
  document.querySelector('body').appendChild(noscript1);
}

Triggering TikTok Event

Push to dataLayer with dynamic cookie parsing:

gtm_tag('GTM-TZKZLDW7');

let tt_event_id = `${Date.now()}${Math.floor(Math.random() * 1000000)}`;
let tt_event_time = Date.now();
let tt_clid = getCookie('ttclid'); // TikTok Click ID

window.dataLayer.push({
  'event': 'saurabh_tiktok',
  'prev_url': prevurl,
  'tt_click_id': tt_clid,
  'value': 0.1,
  'currency': 'USD',
  'event_id': tt_event_id,
  'event_time': tt_event_time
});

function getCookie(name) {
  let cookie = {};
  document.cookie.split(';').forEach(function (el) {
    let [k, v] = el.split('=');
    cookie[k.trim()] = v;
  });
  return cookie[name];
}

Share the GTM/TikTok pixel ID, event names, and access token with the data team for server container setup.

Verification

Use browser DevTools Network tab to verify requests to:

google-analytics.com / googletagmanager.com
facebook.com / Meta CAPI endpoints
TikTok tracking endpoints

Or use browser extensions like Google Tag Assistant or TikTok Pixel Helper.

Pixel Tracking

On this page