Install or Embed AdRoll Tag

Step-by-step pixel deployment for AdRoll across direct HTML, Google Tag Manager, e-commerce platforms, and tag management systems.

Installation Overview

The AdRoll pixel is a JavaScript tracking tag that must be deployed on every page where you want to track visitors and build retargeting audiences. The pixel consists of two parts: base configuration (your advertiser and pixel IDs) and the loader script (fetches tracking library from AdRoll CDN). Installation takes 5-30 minutes depending on your platform and technical setup.

Installation Methods

Direct HTML: Copy-paste into site templates (custom sites, static sites)
Google Tag Manager: Deploy via GTM container (most flexible)
E-commerce platforms: One-click app installation (Shopify, WooCommerce, BigCommerce)
Tag management systems: Segment, Tealium, mParticle integrations
Content management systems: WordPress, Drupal, Joomla plugins
Single-page applications: React, Vue, Angular implementations

Prerequisites

Before installing:

AdRoll account created and email verified
Domain ownership verified (see Setup Overview)
Advertiser ID and Pixel ID from AdRoll dashboard
Access to edit website code or tag manager
(Optional) Developer access for custom implementations

Get Your Pixel Code

Locate Pixel IDs

AdRoll Dashboard:

Log in to https://app.adroll.com
Click Settings (gear icon) → Pixels
Under Installation Code, find:
- Advertiser ID: Format ABC123XYZ (9-12 characters)
- Pixel ID: Format DEF456GHI (9-12 characters)

Copy installation code:

adroll_adv_id = "YOUR_ADVERTISER_ID";
adroll_pix_id = "YOUR_PIXEL_ID";

Complete Pixel Snippet

<script type="text/javascript">
  adroll_adv_id = "YOUR_ADVERTISER_ID";
  adroll_pix_id = "YOUR_PIXEL_ID";
  adroll_version = "2.0";

  (function(w, d, e, o, a) {
    w.__adroll_loaded = true;
    w.adroll = w.adroll || [];
    w.adroll.f = [ 'setProperties', 'identify', 'track' ];
    var roundtripUrl = "https://s.adroll.com/j/" + adroll_adv_id + "/roundtrip.js";
    for (a = 0; a < w.adroll.f.length; a++) {
      w.adroll[w.adroll.f[a]] = w.adroll[w.adroll.f[a]] || (function(n) {
        return function() {
          w.adroll.push([ n, arguments ])
        }
      })(w.adroll.f[a])
    }
    e = d.createElement('script');
    o = d.getElementsByTagName('script')[0];
    e.async = 1;
    e.src = roundtripUrl;
    o.parentNode.insertBefore(e, o);
  })(window, document);
</script>

Replace placeholders:

YOUR_ADVERTISER_ID → Your actual advertiser ID (e.g., ABC123XYZ)
YOUR_PIXEL_ID → Your actual pixel ID (e.g., DEF456GHI)

Direct HTML Installation

Standard Website Template

Best for: Custom websites, static sites, platforms with template access

Installation steps:

1. Locate your site's header template:

WordPress: wp-content/themes/your-theme/header.php
Static site: index.html, template.html, or base layout file
Custom CMS: Main layout/template file

2. Find the <head> section:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Site</title>

  <!-- INSERT ADROLL PIXEL HERE -->

  <!-- Other head content -->
</head>

3. Paste pixel code:

<head>
  <meta charset="UTF-8">
  <title>Your Site</title>

  <!-- AdRoll Pixel -->
  <script type="text/javascript">
    adroll_adv_id = "ABC123XYZ";
    adroll_pix_id = "DEF456GHI";
    adroll_version = "2.0";

    (function(w, d, e, o, a) {
      w.__adroll_loaded = true;
      w.adroll = w.adroll || [];
      w.adroll.f = [ 'setProperties', 'identify', 'track' ];
      var roundtripUrl = "https://s.adroll.com/j/" + adroll_adv_id + "/roundtrip.js";
      for (a = 0; a < w.adroll.f.length; a++) {
        w.adroll[w.adroll.f[a]] = w.adroll[w.adroll.f[a]] || (function(n) {
          return function() {
            w.adroll.push([ n, arguments ])
          }
        })(w.adroll.f[a])
      }
      e = d.createElement('script');
      o = d.getElementsByTagName('script')[0];
      e.async = 1;
      e.src = roundtripUrl;
      o.parentNode.insertBefore(e, o);
    })(window, document);
  </script>

  <!-- Rest of head content -->
</head>

4. Save and deploy:

Save template file
Clear site cache (if applicable)
Deploy changes to production
Test pixel firing (see Verification section below)

Placement Best Practices

Optimal placement:

<head>
  <!-- 1. Critical meta tags (charset, viewport) -->
  <meta charset="UTF-8">

  <!-- 2. AdRoll pixel (early in head for audience capture) -->
  <script>/* AdRoll pixel */</script>

  <!-- 3. Other marketing pixels (Facebook, Google Ads) -->
  <!-- 4. Site CSS and JavaScript -->
</head>

Why place in <head>:

Fires before user navigates away (captures bounce traffic)
Loads asynchronously (won't block page rendering)
Available for other scripts that may call adroll.track()

Avoid placing:

After </html> closing tag (invalid HTML, may not execute)
Inside conditional blocks that don't always run
In external JavaScript files (harder to debug)

Multi-Page Sites

For sites with multiple templates:

Option 1: Include in master header

<!-- header.php or header.html -->
<head>
  <script>/* AdRoll pixel - loads on all pages */</script>
</head>

<!-- All pages include header -->
<?php include 'header.php'; ?>

Option 2: Server-side includes (SSI)

<!-- index.html -->
<head>
  <!--#include virtual="/includes/adroll-pixel.html" -->
</head>

<!-- adroll-pixel.html -->
<script type="text/javascript">
  adroll_adv_id = "ABC123XYZ";
  /* ... */
</script>

Option 3: Template inheritance

<!-- Django base template -->
{% block head %}
  <script>/* AdRoll pixel */</script>
{% endblock %}

<!-- Child templates inherit pixel automatically -->
{% extends "base.html" %}

Google Tag Manager (GTM)

Standard GTM Installation

Best for: Sites already using GTM, teams without direct code access

Setup steps:

1. Create custom HTML tag:

Log in to Google Tag Manager
Workspace → Tags → New
Click Tag Configuration
Select Custom HTML

2. Paste pixel code:

<script type="text/javascript">
  adroll_adv_id = "ABC123XYZ";
  adroll_pix_id = "DEF456GHI";
  adroll_version = "2.0";

  (function(w, d, e, o, a) {
    w.__adroll_loaded = true;
    w.adroll = w.adroll || [];
    w.adroll.f = [ 'setProperties', 'identify', 'track' ];
    var roundtripUrl = "https://s.adroll.com/j/" + adroll_adv_id + "/roundtrip.js";
    for (a = 0; a < w.adroll.f.length; a++) {
      w.adroll[w.adroll.f[a]] = w.adroll[w.adroll.f[a]] || (function(n) {
        return function() {
          w.adroll.push([ n, arguments ])
        }
      })(w.adroll.f[a])
    }
    e = d.createElement('script');
    o = d.getElementsByTagName('script')[0];
    e.async = 1;
    e.src = roundtripUrl;
    o.parentNode.insertBefore(e, o);
  })(window, document);
</script>

3. Configure trigger:

Click Triggering
Select All Pages - Page View
Or create custom trigger for specific pages

4. Name and save:

Tag name: AdRoll - Base Pixel
Click Save

5. Test with Preview Mode:

Click Preview (top right)
Enter your website URL
Verify "AdRoll - Base Pixel" appears in Tags Fired
Check browser console for errors

6. Publish:

Click Submit (top right)
Add version description: "Add AdRoll pixel"
Click Publish

Advanced GTM Setup with Variables

For easier management across multiple pixels:

Step 1: Create GTM variables

Variable 1: AdRoll Advertiser ID

Variables → New → Variable Configuration
Type: Constant
Name: AdRoll - Advertiser ID
Value: ABC123XYZ
Save

Variable 2: AdRoll Pixel ID

Type: Constant
Name: AdRoll - Pixel ID
Value: DEF456GHI
Save

Step 2: Use variables in tag

<script type="text/javascript">
  adroll_adv_id = "{{AdRoll - Advertiser ID}}";
  adroll_pix_id = "{{AdRoll - Pixel ID}}";
  adroll_version = "2.0";

  /* ... rest of pixel code ... */
</script>

Benefits:

Change IDs in one place (variables) instead of editing tag code
Reuse variables across multiple tags (base pixel, conversion events)
Environment-specific IDs (dev vs. production) via variable tables

GTM Tag Sequencing

Load AdRoll before other marketing tags that depend on it:

Tag Configuration → Advanced Settings → Tag Sequencing:

Setup Tag: (None)
Cleanup Tag: (None)
Firing Priority: 100 (higher = fires earlier; default is 0)

Or use tag sequencing:

Create tag: AdRoll - Base Pixel (priority 100)
Create tag: AdRoll - Conversion Event (priority 50)
Set conversion tag to fire after base pixel completes

E-Commerce Platform Installations

Shopify

Automatic installation via Shopify App:

1. Install AdRoll app:

Visit https://apps.shopify.com/adroll
Or from AdRoll dashboard: Integrations → Shopify → Connect
Click Add app
Authorize AdRoll to access store data

2. Configure app:

Log in to AdRoll (if not already logged in)
Select Shopify store to connect
App automatically installs pixel across all pages
Product catalog syncs within 6 hours

3. Verify installation:

Visit your Shopify storefront
Open browser DevTools → Network → Filter "adroll"
Refresh page → Should see AdRoll requests

Manual Shopify installation (if app fails):

1. Edit theme code:

Shopify Admin → Online Store → Themes
Click Actions → Edit code
Open theme.liquid

2. Add pixel to <head>:

<!-- Find <head> section in theme.liquid -->
<head>
  {{ content_for_header }}

  <!-- AdRoll Pixel -->
  <script type="text/javascript">
    adroll_adv_id = "ABC123XYZ";
    adroll_pix_id = "DEF456GHI";
    adroll_version = "2.0";
    /* ... rest of pixel code ... */
  </script>

  <!-- Rest of head content -->
</head>

3. Save theme:

Click Save
Test on storefront

WooCommerce (WordPress)

Plugin installation:

1. Install plugin:

WordPress Admin → Plugins → Add New
Search: "AdRoll for WooCommerce"
Click Install Now → Activate

2. Configure plugin:

WooCommerce → Settings → Integration → AdRoll
Enter Advertiser ID: ABC123XYZ
Enter Pixel ID: DEF456GHI
Enable Product Catalog Sync
Enable Purchase Tracking
Click Save changes

3. Verify:

Visit WooCommerce site
Check browser console for AdRoll pixel
Verify product catalog syncs: AdRoll → Products → Catalog

Manual WordPress installation (without plugin):

1. Edit theme functions.php:

// functions.php
function add_adroll_pixel() {
  ?>
  <script type="text/javascript">
    adroll_adv_id = "<?php echo esc_js('ABC123XYZ'); ?>";
    adroll_pix_id = "<?php echo esc_js('DEF456GHI'); ?>";
    adroll_version = "2.0";
    /* ... rest of pixel code ... */
  </script>
  <?php
}
add_action('wp_head', 'add_adroll_pixel');

2. Verify:

Visit any WordPress page
Check browser console and Network tab for AdRoll

BigCommerce

1. Connect BigCommerce store:

AdRoll dashboard: Integrations → BigCommerce → Connect Store
Enter BigCommerce store URL: yourstore.mybigcommerce.com
Click Authorize and log in to BigCommerce
Grant AdRoll API access

2. Automatic installation:

AdRoll installs pixel via BigCommerce Script Manager
Product catalog syncs automatically
Purchase tracking auto-configured

3. Verify:

Visit BigCommerce storefront
Check BigCommerce Admin → Storefront → Script Manager
Should see "AdRoll Pixel" script (auto-added)

Magento

1. Install via Composer:

composer require adroll/magento2-extension
php bin/magento module:enable AdRoll_Pixel
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento cache:flush

2. Configure in Magento Admin:

Stores → Configuration → AdRoll → Pixel Settings
Enter Advertiser ID: ABC123XYZ
Enter Pixel ID: DEF456GHI
Enable Pixel Tracking
Save configuration

3. Verify:

Clear Magento cache: php bin/magento cache:flush
Visit storefront and check for pixel in Network tab

Tag Management Systems

Segment

Setup:

1. Add AdRoll destination:

Segment workspace → Destinations → Add Destination
Search: "AdRoll"
Click Configure AdRoll

2. Enter credentials:

Advertiser ID: ABC123XYZ
Pixel ID: DEF456GHI
Enable destination
Save

3. Map events: Segment automatically maps:

Page → AdRoll pageview
Product Viewed → AdRoll product pageview
Order Completed → AdRoll purchase conversion

4. Test:

// In your app
analytics.page("Home");
// → Fires AdRoll pageview

analytics.track("Order Completed", {
  order_id: "ORD-123",
  revenue: 99.99
});
// → Fires AdRoll purchase event

Tealium

1. Add AdRoll tag:

Tealium iQ Tag Management → Tags → Add Tag
Search: "AdRoll" or use Custom HTML Tag
Configure with pixel code

2. Set load rules:

Load Rules: All Pages
Or create custom load rule for specific pages

3. Map data layer:

// Tealium data layer
utag.view({
  page_name: "Product Detail",
  product_id: "SKU-001",
  product_price: 49.99
});
// Maps to AdRoll pageview with product data

mParticle

1. Add AdRoll integration:

mParticle → Connections → Connect → AdRoll
Enter Advertiser ID and Pixel ID

2. Configure event forwarding:

Map mParticle events to AdRoll:
- screen_view → pageview
- purchase → conversion
- add_to_cart → cart event

3. Enable connection:

Save and enable integration
Events automatically forwarded to AdRoll

Single-Page Applications (SPA)

React

Installation:

1. Create AdRoll component:

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

const AdRollPixel = () => {
  useEffect(() => {
    // Initialize AdRoll
    window.adroll_adv_id = "ABC123XYZ";
    window.adroll_pix_id = "DEF456GHI";
    window.adroll_version = "2.0";

    (function(w, d, e, o, a) {
      w.__adroll_loaded = true;
      w.adroll = w.adroll || [];
      w.adroll.f = [ 'setProperties', 'identify', 'track' ];
      var roundtripUrl = "https://s.adroll.com/j/" + window.adroll_adv_id + "/roundtrip.js";
      for (a = 0; a < w.adroll.f.length; a++) {
        w.adroll[w.adroll.f[a]] = w.adroll[w.adroll.f[a]] || (function(n) {
          return function() {
            w.adroll.push([ n, arguments ])
          }
        })(w.adroll.f[a])
      }
      e = d.createElement('script');
      o = d.getElementsByTagName('script')[0];
      e.async = 1;
      e.src = roundtripUrl;
      o.parentNode.insertBefore(e, o);
    })(window, document);
  }, []);

  return null; // No UI, just script loading
};

export default AdRollPixel;

2. Add to App.js:

// App.js
import AdRollPixel from './components/AdRollPixel';

function App() {
  return (
    <>
      <AdRollPixel />
      <Router>
        {/* Your app routes */}
      </Router>
    </>
  );
}

3. Track page views on route changes:

// usePageViews.js
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

export const usePageViews = () => {
  const location = useLocation();

  useEffect(() => {
    if (window.adroll && window.adroll.track) {
      window.adroll.track("pageView");
    }
  }, [location]);
};

// App.js
function App() {
  usePageViews(); // Track route changes

  return <Router>{/* routes */}</Router>;
}

Vue.js

Installation:

1. Add to index.html:

<!-- public/index.html -->
<head>
  <script>
    window.adroll_adv_id = "ABC123XYZ";
    window.adroll_pix_id = "DEF456GHI";
    window.adroll_version = "2.0";
    /* ... rest of pixel code ... */
  </script>
</head>

2. Track route changes:

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [/* routes */]
});

router.afterEach((to, from) => {
  if (window.adroll && window.adroll.track) {
    window.adroll.track("pageView");
  }
});

export default router;

Angular

Installation:

1. Add to index.html:

<!-- src/index.html -->
<head>
  <script>
    window.adroll_adv_id = "ABC123XYZ";
    window.adroll_pix_id = "DEF456GHI";
    /* ... pixel code ... */
  </script>
</head>

2. Track navigation:

// app.component.ts
import { Component } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

declare global {
  interface Window {
    adroll: any;
  }
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  constructor(private router: Router) {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      if (window.adroll && window.adroll.track) {
        window.adroll.track("pageView");
      }
    });
  }
}

Verification & Testing

Browser DevTools Verification

1. Check pixel loaded:

// Open browser console (F12)
// Type:
console.log(window.adroll);

// Should output:
// {f: Array(3), setProperties: ƒ, identify: ƒ, track: ƒ, ...}

// If undefined, pixel didn't load

2. Check network requests:

DevTools → Network tab
Filter: adroll
Refresh page
Should see requests to:
- s.adroll.com/j/ADVID/roundtrip.js (pixel loader)
- d.adroll.com/pixel/... (tracking beacon)

3. Verify IDs:

// Console
console.log(window.adroll_adv_id); // "ABC123XYZ"
console.log(window.adroll_pix_id); // "DEF456GHI"

// If wrong IDs, pixel code has typo or wrong values

AdRoll Dashboard Verification

1. Pixel health check:

AdRoll → Settings → Pixels
Status should show: Active (green checkmark)
Last activity: Within last 24 hours

2. Recent events:

Click View Recent Events
Should see pageviews from your site visits
May take 24-48 hours for first events

3. Audience building:

AdRoll → Audiences → All Visitors
Audience size should grow as pixel fires
Allow 24-48 hours for initial population

Testing Checklist

Test pixel on these pages:

Homepage
Product/service pages
Category/collection pages
Cart/checkout (if applicable)
Thank-you/confirmation pages
Blog/content pages

For each page:

Pixel loads (check console for window.adroll)
Network request fires (check Network tab)
No JavaScript errors (check Console for red errors)
Correct IDs (verify adroll_adv_id and adroll_pix_id)

Common Installation Issues

Pixel Not Loading

Symptoms: console.log(window.adroll) returns undefined

Causes & fixes:

Wrong placement: Moved pixel from <head> to <body> or after </html>
- Fix: Place in <head> before other scripts
JavaScript error: Syntax error in pixel code
- Fix: Re-copy pixel code from AdRoll dashboard (don't manually type)
Ad blocker: Browser extension blocks AdRoll
- Fix: Test in incognito mode or disable ad blockers
Content Security Policy (CSP): Site blocks third-party scripts
- Fix: Add script-src https://s.adroll.com https://d.adroll.com to CSP header

Duplicate Pixels

Symptoms: Multiple AdRoll requests on single page load

Causes:

Pixel in both theme template AND GTM
Pixel in multiple template files
Plugin + manual installation

Fix:

// Search page source for duplicate pixels
// Browser console:
document.querySelectorAll('script').forEach((script, index) => {
  if (script.innerHTML.includes('adroll_adv_id')) {
    console.log(`Pixel #${index}:`, script.outerHTML.substring(0, 100));
  }
});

// Should only log once
// If multiple, remove duplicates from templates/GTM

Wrong Advertiser/Pixel ID

Symptoms: Pixel fires but no data in dashboard

Fix:

// Verify IDs match dashboard
// Console:
console.log('Current IDs:', window.adroll_adv_id, window.adroll_pix_id);

// Compare to:
// AdRoll → Settings → Pixels → Installation Code
// If different, update pixel code with correct IDs

Next Steps

Event Tracking - Add conversion and custom events
Data Layer Setup - Configure product catalog
Troubleshooting & Debugging - Fix pixel issues
Cross-Domain Tracking - Multi-site implementation