TrackOG Web SDK Integration Guide

The TrackOG Web SDK is a client-side JavaScript attribution library engineered to provide accurate, privacy-compliant, cookieless conversion tracking in modern browser environments.

With major web browsers (Safari ITP, Firefox ETP, Google Chrome Privacy Sandbox) restricting third-party cookies and script lifespans, legacy image and iFrame pixels often fail to attribute sales reliably. The TrackOG Web SDK solves this by running as a first-party script that automatically captures inbound click identifiers, persists them in client storage, and triggers encrypted conversion callbacks.

How TrackOG Web SDK Works

The integration operates across two stages: Click Capture on landing pages, and Conversion Attribution on order confirmation / lead completion pages.

Where to Get Your Web SDK Code in TrackOG

To obtain your unique tracking domain, advertiser token, and pre-configured snippet from the TrackOG dashboard:

TrackOG Admin
  └── Offers
        └── Select Your Offer
              └── Tracking & Status Settings
                    └──  Conversion Tracking Tab

1. Navigate to Offers > All Offers and select your offer.
2. In the offer edit page, open the Tracking & Status Settings accordion and select Conversion Tracking.
3. Under Conversion Tracking Method, select Web SDK & JS Pixel.
4. Configure optional parameters:
   • Change Domain: Select your custom white-labeled tracking domain (e.g. track.yourbrand.com).
   • Change Currency: Set your preferred checkout currency (e.g. USD, EUR, GBP).
   • Add Goal ID: Select a secondary funnel event (e.g., lead, deposit, kyc) if tracking multi-event conversions.
   • Retargeting Tag: Toggle on to include your offer-level or global audience retargeting script automatically.
5. Click Copy Code to copy your tailored snippet.

[!TIP] Dashboard Screenshot Recommendation: Place a screenshot here highlighting the Conversion Tracking section in TrackOG with the Web SDK pill selected, the Generated Postback / SDK code area, and the Copy to Clipboard button.

Step-by-Step Implementation

Integrating the TrackOG Web SDK requires adding two lightweight code snippets to your website.

Step 1: Global Header Script (All Pages)

Place the following snippet inside the <head> tag of every page on your website (including landing pages, catalog pages, and checkout flows).

This initializes the SDK, loads audience retargeting (if enabled), captures the inbound click_id or UTM parameters from the URL query string, and stores them in first-party storage.

<!-- TrackOG Web SDK: Global Header Tag -->
<!-- (Optional: Retargeting Audience Script if enabled) -->
<script src="https://cdn-edge.trackog.net/rtt/{RETARGETING_ID}.js?v=38"></script>

<script>
(function(w, d, u) {
  function run() { w.OGWebSDK.load(); }
  if (w.OGWebSDK) { run(); return; }
  var f = d.getElementsByTagName('script')[0];
  var j = d.createElement('script'); j.async = true;
  j.onload = run;
  j.src = u; f.parentNode.insertBefore(j, f);
})(window, document, 'https://cdn.trackog.io/sdk/ogweb.js');
</script>

What this snippet does:

1. Asynchronously loads https://cdn.trackog.io/sdk/ogweb.js without delaying page rendering.
2. Inspects the incoming URL for click_id, utm_source, utm_medium, utm_campaign, utm_term, gclid, and fbclid.
3. Stores the click session in localStorage and a first-party cookie on your root domain with a 365-day persistence window.

Step 2: Conversion Script (Order Confirmation / Action Page)

Place this snippet on your Thank You / Order Confirmation Page, or trigger it directly within your payment success callback:

<!-- TrackOG Web SDK: Conversion Event Tag -->
<script>
(function(w, d, u) {
  function run() { 
    w.OGWebSDK.conversion('{TRACKING_DOMAIN}', '{TRACKING_TOKEN}', {
      txn_id: 'ORDER_12345',         // Replace with dynamic Order ID
      sale_amount: 89.99,            // Replace with dynamic Cart Value (float)
      currency: 'USD',               // 3-letter ISO Currency Code
      coupon_code: 'SPRING20',       // Promo or voucher code (optional)
      user_id: 'USER_8821',          // Unique customer identifier (optional)
      is_new_user: true              // Boolean: new vs returning buyer (optional)
    }); 
  }
  if (w.OGWebSDK) { run(); return; }
  var f = d.getElementsByTagName('script')[0];
  var j = d.createElement('script'); j.async = true;
  j.onload = run;
  j.src = u; f.parentNode.insertBefore(j, f);
})(window, document, 'https://cdn.trackog.io/sdk/ogweb.js');
</script>

Replace:

• {TRACKING_DOMAIN} with your TrackOG tracking domain (e.g. track.yournetwork.com or toraaprime.trackog.net).
• {TRACKING_TOKEN} with the 32-character authentication token assigned to your offer/advertiser.
• txn_id with your backend order reference or booking ID.
• sale_amount with the decimal total price paid.

Complete Conversion Parameters Reference

When calling w.OGWebSDK.conversion(domain, token, options), the options object supports the following attributes:

Direct JavaScript API Methods

If your site is built using React, Next.js, Vue, Angular, or Shopify Web Pixels, you can interact directly with the globally instantiated window.OGWebSDK instance:

1. w.OGWebSDK.load()

Re-evaluates the current page URL for tracking parameters and refreshes session timestamps. Call this inside single-page application (SPA) client-side route change hooks.

// Example in Next.js Router or React useEffect:
useEffect(() => {
  if (window.OGWebSDK) {
    window.OGWebSDK.load();
  }
}, [router.asPath]);

2. w.OGWebSDK.conversion(domain, token, data)

Dispatches an attribution callback request for a verified event:

window.OGWebSDK.conversion('trk.brand.com', 'TOKEN_ABC123', {
  txn_id: order.id,
  sale_amount: order.totalPrice,
  currency: 'USD'
});

3. w.OGWebSDK.getClickId()

Returns the active TrackOG click_id stored in the visitor's session (e.g. og_clk_948274921). Useful if you also want to save the Click ID in your database or pass it via hidden lead form inputs.

const activeClickId = window.OGWebSDK.getClickId();
console.log('Current TrackOG Click ID:', activeClickId);

4. w.OGWebSDK.hasSessionId()

Returns true if a valid 20-character TrackOG session identifier is currently present in storage.

if (window.OGWebSDK.hasSessionId()) {
  // Visitor arrived via an active TrackOG affiliate link
}

Google Tag Manager (GTM) Setup

If you manage tags via Google Tag Manager, implement the Web SDK using two Custom HTML tags:

Tag 1: Header Tag

• Tag Type: Custom HTML
• HTML Content: Paste the Step 1 Global Header Script.
• Triggering: All Pages (Page View)

Tag 2: Conversion Tag

• Tag Type: Custom HTML
• HTML Content:

  <script>
  if (window.OGWebSDK) {
    window.OGWebSDK.conversion('{{TrackOG Domain}}', '{{TrackOG Token}}', {
      txn_id: '{{Order ID}}',
      sale_amount: {{Transaction Total}},
      currency: '{{Currency Code}}'
    });
  }
  </script>
  

• Triggering: Custom Event (purchase, order_completed) or Page View on /thank-you / /order-confirmation.

Shopify Customer Events Integration

For Shopify stores using checkout extensibility and Customer Events (Web Pixels API):

1. In Shopify Admin, navigate to Settings > Customer Events > Add Custom Pixel.
2. Name the pixel TrackOG Web SDK.
3. Set Permissions to Not Required and Data Sale to Data Collected Does Not Qualify as Data Sale.
4. Paste the Shopify wrapper script generated from TrackOG > Integrations > Ecommerce > Shopify:

!function(o, analytics, e, i) {
  var p = e.createElement("script");
  p.onload = function() {
    o.TOgShopifyWrapper.setShopifyApiRef(i);
    o.TOgShopifyWrapper.load(analytics, "{YOUR_DOMAIN}", "{YOUR_TOKEN}");
    o.TOgShopifyWrapper.setOrderDataHook(function(o, r) {
      return r;
    });
    analytics.subscribe("page_viewed", function(r) {
      o.TOgShopifyWrapper.loadSdk(function() {
        o.OGWebSDK.load();
      });
    });
  };
  p.src = "https://cdn.trackog.io/sdk/shopify.js";
  e.body.appendChild(p);
}(window, analytics, window.document, api);

🔍 How to Test & Verify Web SDK

Follow these steps to confirm conversions track with 100% precision:

1. Test Inbound Click Capture

1. Generate an affiliate tracking link for your offer in TrackOG:

   https://track.yournetwork.com/click?offer_id=105&aff_id=1001
   

2. Open a fresh browser session (or Incognito window) and click the link.
3. Verify that your landing page loads with the appended click identifier (e.g. ?click_id=og_...).
4. Open Chrome Developer Tools (F12 or Cmd+Option+I):
   • In Application > Local Storage, verify the key _og_clk or click token exists.
   • In Network, filter by ogweb.js and verify status 200 OK.

2. Test Conversion Callback

1. Proceed through the checkout or lead funnel to the confirmation page.
2. In the DevTools Network tab, filter by pxl:
   • Inspect the request URL:

     https://track.yournetwork.com/pxl?token=...&click_id=og_...&sale_amount=89.99&txn_id=ORDER-12345
     

   • Verify that the HTTP response code is 200 OK.
3. In TrackOG Admin, navigate to Reports > Conversions Logs or Real-Time Clicks to verify the conversion appears with the matching txn_id and payout attribution.

❓ Frequently Asked Questions (FAQ)

Q: Why use the Web SDK instead of an Image or iFrame pixel?

Modern browsers enforce strict restrictions on third-party cookies (Apple ITP, Firefox Total Cookie Protection, Chrome third-party cookie phase-out). Image and iFrame pixels rely on third-party cookies which are frequently blocked, leading to lost conversions. The Web SDK operates in a first-party context using localStorage and root domain cookies, delivering 100% attribution reliability.

Q: Does the Web SDK slow down page loading?

No. The SDK loader snippet uses j.async = true and dynamically injects the script tag. It runs non-blockingly and weighs under 4KB gzipped.

Q: What happens if an ad blocker blocks <iframe> creation?

The TrackOG Web SDK includes an automatic Content Security Policy (CSP) and ad-blocker fallback listener. If the browser blocks iframe element insertion, the SDK automatically re-routes the conversion via a fallback Image request, ensuring zero missed sales.

Q: Can I use both S2S Postbacks and the Web SDK?

Yes. For hybrid setups, advertisers can capture the Click ID using window.OGWebSDK.getClickId() and store it in their CRM or database, using S2S postbacks for backend events (like recurring rebills or offline cancellations) while using the Web SDK for upfront checkout attribution.