Pixel Installation Guide

Manual Installation (Insert Code)

Add the TrueTracked tracking script directly to your website's HTML. This method works with any website or CMS - you just need access to edit the page template that renders the <head> tag.

Prerequisites: You need a TrueTracked account with a workspace ID. Find it in your Settings > Pixel Installation page.

Step 1: Add the base loader script

Paste the following code before the closing </head> tag on every page of your site:

<link rel="preconnect" href="https://t.ttrkd.com">
<link rel="preconnect" href="https://t.ttrkd.com" crossorigin>
<script>
(function(w, d, id) {
  var t = w.truetracked = w.truetracked || function() {
    (t.q = t.q || []).push(arguments);
  };
  t._w = id;
  var s = d.createElement('script');
  s.async = true;
  s.src = 'https://t.ttrkd.com/tt.js?w=' + id;
  d.head.appendChild(s);
})(window, document, 'YOUR_WORKSPACE_ID');
</script>

Replace YOUR_WORKSPACE_ID with your actual workspace ID from Settings.

Step 2: Track ecommerce events

Call page_viewed on every page load, then fire ecommerce events where they happen:

// Page view — call on every page load
window.truetracked('track', 'page_viewed', {});

// Product viewed
window.truetracked('track', 'product_viewed', {
  items: [{ item_id: 'SKU-123', item_name: 'Product Name', price: 29.99 }]
});

// Add to cart
window.truetracked('track', 'product_added_to_cart', {
  items: [{ item_id: 'SKU-123', item_name: 'Product Name', price: 29.99, quantity: 1 }]
});

// Purchase (custom websites without server webhook)
window.truetracked('track', 'purchase', {
  transaction_id: 'ORDER-456',
  value: 59.98,
  currency: 'USD',
  email: 'customer@example.com',
  items: [{ item_id: 'SKU-123', item_name: 'Product Name', price: 29.99, quantity: 2 }]
});

For full purchase-event coverage on custom checkouts, see Custom Website.

Using a custom tracking domain

If you've set up a custom tracking domain, the script URL changes. Instead of t.ttrkd.com, use your subdomain:

<link rel="preconnect" href="https://YOUR-CUSTOM-DOMAIN">
<link rel="preconnect" href="https://YOUR-CUSTOM-DOMAIN" crossorigin>
<script>
(function(w, d, id) {
  var t = w.truetracked = w.truetracked || function() {
    (t.q = t.q || []).push(arguments);
  };
  t._w = id;
  var s = d.createElement('script');
  s.async = true;
  s.src = 'https://YOUR-CUSTOM-DOMAIN/tt.js';
  d.head.appendChild(s);
})(window, document, 'YOUR_WORKSPACE_ID');
</script>

Single-Page Application considerations

For React, Next.js, Vue, or other SPA frameworks, the SDK automatically detects route changes and tracks page views. No additional configuration is needed for client-side navigation.

If you use a custom router that the SDK can't detect, manually track page views after each route change:

window.truetracked('track', 'page_viewed');

Debug mode

Enable debug mode to see tracking events logged in your browser console:

window.truetracked('debug', true);

Troubleshooting

Script not loading: Check that it's placed before </head> and the workspace ID is correct.
Events not appearing: Enable debug mode and check the browser console for errors. Confirm your ad blocker isn't blocking t.ttrkd.com.
Ad blockers blocking the script: Set up a custom tracking domain to bypass ad blockers.
Duplicate page views in SPAs: The SDK auto-tracks on route change. If you see duplicates, you're likely also calling page_viewed manually.

SDK methods reference

Method	Description
`window.truetracked('track', name, data)`	Track a named event with optional payload
`window.truetracked('debug', true/false)`	Enable or disable debug console logging
`window.truetracked.getDecoratedUrl(url)`	Get a URL with cross-domain identifiers appended - see Cross-Domain Tracking
`window.truetracked.getUserId()`	Returns the current visitor's `tt_user_id`