Install Criteo OneTag | Blue Frog Docs

Install Criteo OneTag

Step-by-step guide to deploying the Criteo OneTag across your website using direct implementation, Google Tag Manager, or e-commerce platform integrations.

The Criteo OneTag is the foundation of your Criteo implementation. This guide covers multiple deployment methods to suit your technical setup and requirements.

OneTag Overview

The Criteo OneTag is a JavaScript tag that:

  • Tracks user interactions across your website
  • Builds retargeting audiences
  • Captures product views and purchase events
  • Enables cross-device tracking
  • Powers dynamic product recommendations

OneTag Components

// 1. Load the Criteo library
<script type="text/javascript" src="//dynamic.criteo.com/js/ld/ld.js" async="true"></script>

// 2. Initialize the event queue
<script type="text/javascript">
window.criteo_q = window.criteo_q || [];

// 3. Device type detection
var deviceType = /iPad/.test(navigator.userAgent) ? "t" :
                 /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";

// 4. Push events to the queue
window.criteo_q.push(
  { event: "setAccount", account: YOUR_ACCOUNT_ID },
  { event: "setSiteType", type: deviceType },
  { event: "viewHome" }
);
</script>

Prerequisites

Before installing the OneTag:

  1. Obtain Your Account ID

    • Log in to Criteo Management Center
    • Navigate to Settings > Account Information
    • Copy your Account ID (numeric value)

  2. Plan Your Implementation

    • Determine deployment method (direct, GTM, or platform plugin)
    • Identify pages requiring OneTag
    • Map website events to Criteo events

  3. Prepare Testing Environment

    • Set up staging/development environment
    • Install browser developer tools
    • Configure analytics for comparison

Implementation Method 1: Direct HTML Implementation

Best for websites with direct HTML/template access and developer resources.

Step 1: Create Base OneTag Template

Create a reusable template for the OneTag:

<!-- Criteo OneTag - Place before closing </body> tag -->
<script type="text/javascript" src="//dynamic.criteo.com/js/ld/ld.js" async="true"></script>
<script type="text/javascript">
  window.criteo_q = window.criteo_q || [];

  // Device type detection
  var deviceType = /iPad/.test(navigator.userAgent) ? "t" :
                   /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";

  // Required: Account configuration
  window.criteo_q.push(
    { event: "setAccount", account: 12345 }, // Replace with your account ID
    { event: "setSiteType", type: deviceType }
  );

  // Page-specific event will be added here
</script>

Step 2: Implement on Homepage

<!DOCTYPE html>
<html>
<head>
  <title>Your Website</title>
</head>
<body>
  <!-- Your page content -->

  <!-- Criteo OneTag -->
  <script type="text/javascript" src="//dynamic.criteo.com/js/ld/ld.js" async="true"></script>
  <script type="text/javascript">
    window.criteo_q = window.criteo_q || [];
    var deviceType = /iPad/.test(navigator.userAgent) ? "t" :
                     /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";

    window.criteo_q.push(
      { event: "setAccount", account: 12345 },
      { event: "setSiteType", type: deviceType },
      { event: "viewHome" }
    );
  </script>
</body>
</html>

Step 3: Implement on Product Pages

<!DOCTYPE html>
<html>
<head>
  <title>Product Name - Your Website</title>
</head>
<body>
  <!-- Product content -->
  <div class="product" data-product-id="PROD123">
    <!-- Product details -->
  </div>

  <!-- Criteo OneTag -->
  <script type="text/javascript" src="//dynamic.criteo.com/js/ld/ld.js" async="true"></script>
  <script type="text/javascript">
    window.criteo_q = window.criteo_q || [];
    var deviceType = /iPad/.test(navigator.userAgent) ? "t" :
                     /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";

    // Get product ID from page
    var productId = document.querySelector('.product').getAttribute('data-product-id');

    window.criteo_q.push(
      { event: "setAccount", account: 12345 },
      { event: "setSiteType", type: deviceType },
      { event: "viewItem", item: productId }
    );
  </script>
</body>
</html>

Step 4: Implement on Category Pages

<script type="text/javascript" src="//dynamic.criteo.com/js/ld/ld.js" async="true"></script>
<script type="text/javascript">
  window.criteo_q = window.criteo_q || [];
  var deviceType = /iPad/.test(navigator.userAgent) ? "t" :
                   /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";

  // Get product IDs from category page
  var productIds = Array.from(document.querySelectorAll('.product-item'))
    .map(el => el.getAttribute('data-product-id'))
    .slice(0, 3); // Send up to 3 products

  window.criteo_q.push(
    { event: "setAccount", account: 12345 },
    { event: "setSiteType", type: deviceType },
    { event: "viewList", item: productIds }
  );
</script>

Step 5: Template-Based Implementation

For sites using template systems (PHP, Ruby, Python, etc.):

PHP Example:

<!-- footer.php -->
<script type="text/javascript" src="//dynamic.criteo.com/js/ld/ld.js" async="true"></script>
<script type="text/javascript">
  window.criteo_q = window.criteo_q || [];
  var deviceType = /iPad/.test(navigator.userAgent) ? "t" :
                   /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";

  window.criteo_q.push(
    { event: "setAccount", account: <?php echo CRITEO_ACCOUNT_ID; ?> },
    { event: "setSiteType", type: deviceType }
  );

  <?php
  // Add page-specific events
  if (is_front_page()) {
    echo '{ event: "viewHome" }';
  } elseif (is_product()) {
    echo '{ event: "viewItem", item: "' . get_product_id() . '" }';
  } elseif (is_cart()) {
    $cart_items = get_cart_items();
    echo '{ event: "viewBasket", item: ' . json_encode($cart_items) . ' }';
  }
  ?>
  );
</script>

React/Next.js Example:

// components/CriteoTag.js
import { useEffect } from 'react';

export default function CriteoTag({ event, data }) {
  useEffect(() => {
    // Load Criteo script
    const script = document.createElement('script');
    script.src = '//dynamic.criteo.com/js/ld/ld.js';
    script.async = true;
    document.head.appendChild(script);

    // Initialize OneTag
    window.criteo_q = window.criteo_q || [];

    const deviceType = /iPad/.test(navigator.userAgent) ? "t" :
                       /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";

    window.criteo_q.push(
      { event: "setAccount", account: process.env.NEXT_PUBLIC_CRITEO_ACCOUNT_ID },
      { event: "setSiteType", type: deviceType },
      { event, ...data }
    );

    return () => {
      // Cleanup if needed
    };
  }, [event, data]);

  return null;
}

// Usage in pages
import CriteoTag from '../components/CriteoTag';

export default function ProductPage({ product }) {
  return (
    <>
      <CriteoTag event="viewItem" data={{ item: product.id }} />
      {/* Page content */}
    </>
  );
}

Implementation Method 2: Google Tag Manager

Recommended for marketing teams and sites already using GTM.

Step 1: Create Criteo Account ID Variable

  1. In GTM, go to Variables > New
  2. Name: "Criteo Account ID"
  3. Type: Constant
  4. Value: Your Criteo account ID (e.g., 12345)

Step 2: Create Device Type Variable

  1. Variables > New
  2. Name: "Criteo Device Type"
  3. Type: Custom JavaScript
  4. Code:
function() {
  var ua = navigator.userAgent;
  if (/iPad/.test(ua)) return 't';
  if (/Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(ua)) return 'm';
  return 'd';
}

Step 3: Create OneTag Base Template

  1. Tags > New
  2. Name: "Criteo OneTag - Base"
  3. Tag Type: Custom HTML
  4. HTML:
<script type="text/javascript" src="//dynamic.criteo.com/js/ld/ld.js" async="true"></script>
<script type="text/javascript">
  window.criteo_q = window.criteo_q || [];
  window.criteo_q.push(
    { event: "setAccount", account: {{Criteo Account ID}} },
    { event: "setSiteType", type: "{{Criteo Device Type}}" }
  );
</script>
  1. Trigger: All Pages
  2. Advanced Settings > Tag Sequencing: Check "Fire a tag before..." for other Criteo tags

Step 4: Create Homepage Event Tag

  1. Tags > New
  2. Name: "Criteo - Homepage"
  3. Tag Type: Custom HTML
  4. HTML:
<script>
  window.criteo_q = window.criteo_q || [];
  window.criteo_q.push({ event: "viewHome" });
</script>
  1. Trigger: Create trigger for homepage
    • Trigger Type: Page View
    • Condition: Page Path equals / or Page URL matches homepage pattern

Step 5: Create Product View Tag

  1. First, create Data Layer variables:

    • Variable Name: "DL - Product ID"
    • Variable Type: Data Layer Variable
    • Data Layer Variable Name: productId

  2. Tags > New

  3. Name: "Criteo - Product View"

  4. Tag Type: Custom HTML

  5. HTML:

<script>
  window.criteo_q = window.criteo_q || [];
  window.criteo_q.push({
    event: "viewItem",
    item: "{{DL - Product ID}}"
  });
</script>
  1. Trigger: Product Page View
    • Trigger Type: Page View
    • Condition: Page Path contains /product/ OR Data Layer variable pageType equals product

Step 6: Use Community Template (Alternative)

GTM Community Template Gallery offers pre-built Criteo templates:

  1. Tags > New > Discover more tag types in the Community Template Gallery
  2. Search for "Criteo"
  3. Select official Criteo OneTag template
  4. Add to workspace
  5. Configure:
    • Account ID: {{Criteo Account ID}}
    • Event Type: Select from dropdown
    • Product ID: {{DL - Product ID}} (for product events)

Step 7: Set Up Data Layer

Ensure your pages push data to GTM's data layer:

<script>
  dataLayer = dataLayer || [];
  dataLayer.push({
    'pageType': 'product',
    'productId': 'PROD123',
    'productPrice': 99.99,
    'productAvailability': 'in stock'
  });
</script>

Implementation Method 3: E-commerce Platform Plugins

Shopify Integration

  1. Install Criteo App:

    • Go to Shopify App Store
    • Search for "Criteo"
    • Click "Add app"
    • Authorize Criteo app

  2. Connect Criteo Account:

    • Enter Criteo account credentials
    • Link your advertiser account
    • Configure settings

  3. Automatic Configuration:

    • OneTag automatically deployed
    • Product feed auto-generated
    • Events auto-tracked

  4. Customization (Optional):

    • Edit theme files to customize implementation
    • Add to theme.liquid:
{% if template == 'product' %}
  <script>
    window.criteo_q = window.criteo_q || [];
    window.criteo_q.push({
      event: "viewItem",
      item: "{{ product.id }}"
    });
  </script>
{% endif %}

WooCommerce Integration

  1. Install Plugin:

    • Go to WordPress Admin > Plugins > Add New
    • Search "Criteo"
    • Install and activate

  2. Configure Settings:

  3. Verify Installation:

    • Visit product page
    • Check browser console for Criteo events

Magento Integration

  1. Install Extension:
composer require criteo/magento-extension
php bin/magento module:enable Criteo_OneTag
php bin/magento setup:upgrade
php bin/magento cache:flush

  1. Configure:

    • Stores > Configuration > Criteo > OneTag
    • Enter Account ID
    • Enable tracking

  2. Template Customization:

<!-- app/design/frontend/[theme]/Magento_Theme/templates/footer.phtml -->
<?php echo $this->getChildHtml('criteo.onetag'); ?>

BigCommerce Integration

  1. Add Criteo Script:

    • Storefront > Script Manager
    • Create Script: "Criteo OneTag"
    • Location: Footer
    • Script Type: Script

  2. Add OneTag Code:

<script src="//dynamic.criteo.com/js/ld/ld.js" async="true"></script>
<script>
  window.criteo_q = window.criteo_q || [];
  var deviceType = /iPad/.test(navigator.userAgent) ? "t" :
                   /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";

  window.criteo_q.push(
    { event: "setAccount", account: 12345 },
    { event: "setSiteType", type: deviceType }
  );

  // Add page-specific events using BigCommerce context
  {{#if page_type '===' 'product'}}
    window.criteo_q.push({ event: "viewItem", item: "{{product.id}}" });
  {{/if}}
</script>

Advanced Deployment Options

Implement with cookie consent platforms:

OneTrust Example:

// Wait for consent before loading
function OptanonWrapper() {
  if (window.OnetrustActiveGroups.includes('C0004')) { // Marketing cookies
    loadCriteoTag();
  }
}

function loadCriteoTag() {
  const script = document.createElement('script');
  script.src = '//dynamic.criteo.com/js/ld/ld.js';
  script.async = true;
  document.head.appendChild(script);

  window.criteo_q = window.criteo_q || [];
  window.criteo_q.push({
    event: "setAccount",
    account: 12345
  });
}

Cookiebot Example:

<script data-cookieconsent="marketing" type="text/plain" src="//dynamic.criteo.com/js/ld/ld.js" async="true"></script>
<script data-cookieconsent="marketing" type="text/plain">
  window.criteo_q = window.criteo_q || [];
  // OneTag initialization
</script>

Single Page Application (SPA) Implementation

For React, Vue, Angular applications:

// Router-based implementation
router.afterEach((to, from) => {
  window.criteo_q = window.criteo_q || [];

  if (to.name === 'Home') {
    window.criteo_q.push({ event: "viewHome" });
  } else if (to.name === 'Product') {
    window.criteo_q.push({
      event: "viewItem",
      item: to.params.productId
    });
  }
});

Progressive Web App (PWA) Implementation

// service-worker.js
// Allow Criteo domains
const CRITEO_DOMAINS = [
  'dynamic.criteo.com',
  'gum.criteo.com',
  'sslwidget.criteo.com'
];

self.addEventListener('fetch', event => {
  const url = new URL(event.request.url);

  // Don't cache Criteo requests
  if (CRITEO_DOMAINS.some(domain => url.hostname.includes(domain))) {
    event.respondWith(fetch(event.request));
    return;
  }
});

Verification and Testing

Browser Console Verification

// Check if OneTag loaded
console.log('Criteo Queue:', window.criteo_q);

// Monitor events
window.criteo_q.push = new Proxy(Array.prototype.push, {
  apply(target, thisArg, args) {
    console.log('Criteo Event:', args);
    return target.apply(thisArg, args);
  }
});

Network Tab Verification

Look for these requests:

  1. https://dynamic.criteo.com/js/ld/ld.js - OneTag script
  2. https://gum.criteo.com/syncframe - User sync
  3. https://sslwidget.criteo.com/* - Event beacons

Browser Extension

Use Criteo OneTag Checker extension:

  • Install from Chrome Web Store
  • Navigate through your site
  • Verify events fire correctly

GTM Preview Mode

For GTM implementations:

  1. Click Preview in GTM
  2. Navigate to your website
  3. Check Criteo tags fire in correct sequence
  4. Verify variables populate correctly

Common Issues and Solutions

Issue: OneTag Not Loading

Check:

// Verify script tag exists
const criteoScript = document.querySelector('script[src*="criteo.com"]');
console.log('Script found:', !!criteoScript);

// Check for blocking
if (!window.criteo_q) {
  console.error('OneTag blocked or not loaded');
}

Solutions:

  • Verify script URL is correct
  • Check Content Security Policy
  • Disable ad blockers for testing
  • Ensure async attribute doesn't conflict with other scripts

Issue: Account ID Not Set

Verify:

const accountEvent = window.criteo_q.find(e => e.event === 'setAccount');
console.log('Account ID:', accountEvent?.account);

Fix:

  • Ensure account ID is a number, not string
  • Verify it's the first event in the queue

Issue: Events Not Firing

Debug:

// Log all events
window.criteo_q.forEach((event, index) => {
  console.log(`Event ${index}:`, event);
});

Solutions:

  • Check event syntax matches documentation
  • Verify data layer variables populate
  • Ensure events fire on correct pages

Performance Optimization

Lazy Loading

// Load OneTag after page is interactive
if ('requestIdleCallback' in window) {
  requestIdleCallback(loadCriteoTag, { timeout: 2000 });
} else {
  setTimeout(loadCriteoTag, 1);
}

function loadCriteoTag() {
  const script = document.createElement('script');
  script.src = '//dynamic.criteo.com/js/ld/ld.js';
  script.async = true;
  document.head.appendChild(script);
}

Resource Hints

<!-- Preconnect to Criteo domains -->
<link rel="preconnect" href="https://dynamic.criteo.com">
<link rel="preconnect" href="https://gum.criteo.com">
<link rel="dns-prefetch" href="https://sslwidget.criteo.com">

Next Steps

↑ Back to top
// SYS.FOOTER