Deviate Tracking: Multipixel Support

August 26, 2021 - by Cameron Tham

Configuring your multipixel setup

First, the four most common multipixel scenarios.

 

Pre-installed pixel

Scenario: You are using a native integration to install Alice’s pixel and handle your basic PageView events. You want to use Deviate Tracking to send a Donate event to Alice’s pixel when the user clicks a button.

This is a common scenario for people trying to migrate away from an inflexible native integration. The old Deviate Tracking required you to turn off the native integration entirely and migrate your entire website all at once. Now, you can migrate one event at a time — or use the native integration for basic events, and Deviate Tracking for more complex events.

 

  1. Click on Tags, then on New
  2. For the tag name, enter “Alice Donate”
  3. For Tag Configuration, choose Facebook Conversions API (CAPI) by Deviate Tracking
  4. Enter your Deviate Tracking Email and Deviate Tracking Key
  5. Enter the Facebook Token and Facebook Pixel ID for Alice’s pixel
  6. Change the Event Type to Donate
  7. In the Advanced section:
    1. Uncheck Inject Base Code
    2. Uncheck Initialize Pixel
  8. Select an appropriate trigger
  9. Save the tag

 

Pre-installed base code, new pixel

Scenario: You are using a native integration to install Alice’s pixel. You want to use Deviate Tracking to install Bob’s pixel and send a PageView event to it.

This scenario is common for agencies who manage client websites. Marketing agencies know that skimping on analytics is a recipe for disaster. At the same time, clients often want their oversimplified native integration left alone. With multipixel support, you can install Deviate Tracking alongside the existing solution. This allows you to collect as much data as you need, without interfering with your client’s old setup.

 

  1. Click on Tags, then on New
  2. For the tag name, enter “Bob PageView”
  3. For Tag Configuration, choose Facebook Conversions API (CAPI) by Deviate Tracking
  4. Enter your Deviate Tracking Email and Deviate Tracking Key
  5. Enter the Facebook Token and Facebook Pixel ID for Bob’s pixel
  6. In the Advanced section, uncheck Inject Base Code
  7. Select an appropriate trigger
  8. Save the tag

 

Two DT-installed pixels

Scenario: Alice the artist is selling music albums on your ecommerce store. The store is managed by Bob the marketer. Alice wants to receive Purchase events for her albums only, but Bob wants to receive Purchase events for all albums. You want to use Deviate Tracking to install and send these events.

Deviate Tracking supports this scenario with no extra work. Simply create two Deviate Tracking tags, one for each pixel, and set them up as normal.

 

  1. Click on Tags, then on New
  2. For the tag name, enter “Alice Purchase”
  3. For Tag Configuration, choose Facebook Conversions API (CAPI) by Deviate Tracking
  4. Enter your Deviate Tracking Email and Deviate Tracking Key
  5. Enter the Facebook Token and Facebook Pixel ID for Alice’s pixel
  6. For Event Type, choose Purchase
  7. In Object Properties, set the value and the currency (Facebook will throw an error if you don’t provide these fields)
  8. Select an appropriate trigger that only fires on Alice’s albums
  9. Save the tag
  10. Repeat steps 1-9, except:
    1. In step 2, enter “Bob Purchase”
    2. In step 5, enter the information for Bob’s pixel
    3. In step 8, choose a trigger that fires on all albums

 

Two pixels, same event

Scenario: You already have Alice’s and Bob’s pixels installed. You want Deviate Tracking to send the same PageView event to both.

Solving this scenario is as easy as creating two Deviate Tracking tags, one for each pixel you want to send data to.

 

  1. Click on Tags, then on New
  2. For the tag name, enter “Alice PageView”
  3. For Tag Configuration, choose Facebook Conversions API (CAPI) by Deviate Tracking
  4. Enter your Deviate Tracking Email and Deviate Tracking Key
  5. Enter the Facebook Token and Facebook Pixel ID for Alice’s pixel
  6. In the Advanced section, uncheck Initialize Pixel and Inject Base Code. Only do this if you are installing the pixel for this tag through a third-party solution.
  7. For Triggering, choose All Pages
  8. Save the tag
  9. Repeat steps 1-8, except:
    1. In step 2, enter “Bob PageView”
    2. In step 5, enter the information for Bob’s pixel

You should now be able to publish your container and receive a PageView event to both pixels.​Each pixel will receive an event with a different ID. You will also have to manually duplicate all of the work that went into setting up Alice’s pixel. We are aware of these limitations, and single-tag multitrack support is on our roadmap.​

 

Advanced multipixel setup

Was your scenario not listed above? We’ve got you covered — the remainder of this guide will teach you how to create your own setup for any situation. Read on

 

Base code

It all starts with base code. Base code usually looks like this:

 

<script>
  !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(t,s)}(window, document,'script',
  'https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', '{your-pixel-id-goes-here}');
  fbq('track', 'PageView');
</script>

Depending on your setup, it might be missing those last two lines (fbq init and fbq track).

The base code should only ever be injected once per page. Injecting it multiple times degrades performance and can cause your events to not go through properly. Typically, the base code is injected one of three ways:

 

  • Manually, in the <head> of your website
  • Automatically, by a native integration
  • Automatically, by Deviate Tracking tag

The old Deviate Tracking would check to see if the base code was injected before injecting it again. This meant that you could have multiple Deviate Tracking tags on a page. However, it didn’t allow for coexistence with native integrations. For example, consider the following scenario, where a user visits your webpage:

 

  1. Deviate Tracking:
    1. Checks if there’s a base code
    2. Sees that there isn’t
    3. Injects the base code
  2. Native integration injects the base code
  3. Uh oh! Now there’s two base codes on the page

To solve this, we added an Inject Base Code checkbox. It’s default (checked) behavior is what was described above. When it’s unchecked, the tag will wait until base code is injected. The new sequence of events would be:

 

  1. Deviate Tracking:
    1. Checks to see if there’s a base code
    2. Sees that there isn’t
    3. Asynchronously waits
  2. Native integration injects the base code
  3. Deviate Tracking detects the change and proceeds

 

Pixel init

Each pixel on a webpage needs to be initialized once per page view. The code to initialize a pixel is the fbq init line in the previous base code example. Once again, there are multiple ways to initialize a pixel:

 

  • Manually, as a Javascript function call
  • Automatically, by a native integration
  • Automatically, by a Deviate Tracking tag

In most scenarios, initializing a pixel is done at the same time as the base code is injected. It’s only for multipixel setups that matters become more complicated.

The old Deviate Tracking tag would check to see if its pixel was initialized. If it wasn’t, it would initialize it before sending any events. This prevented Deviate Tracking from re-initializing, but a third party solution could still mess things up.

We solved this in the same manner, by adding an Initialize Pixel checkbox. Unchecking it will force Deviate Tracking to wait for the pixel to be initialized by a third party.

 

Limitations

Unfortunately, there’s one major issue inherent in the approach detailed above: performance. While Deviate Tracking waits for base code or pixel initialization, it’s still consuming CPU. If you’re using WordPress, Shopify, or some other low-performance, script-heavy platform, this can slow things down by quite a bit.

The good news is that the performance impact will only be felt until setup finishes. After the base code gets injected and the pixel initialized, none of the other events will wait.

Nonetheless, we recommend only using the Inject Base Code and Initialize Pixel checkboxes if necessary. It’s much better to migrate your events to Deviate Tracking — not only is it faster, but it’s also more maintainable.

 

Putting it all together

The most important thing to know is that if you’re using Deviate Tracking to handle all your pixels, you don’t need to worry about any of this.

These checkboxes are only for people who have Deviate Tracking plus a third-party integration. If that describes you, here’s some guidelines to help you figure it out:

Inject Base Code should be:

 

  • checked if either:
    • Deviate Tracking handles all your pixel-related matters
    • Nothing else injects your base code
  • unchecked if:
    • You have a pixel installed on your website that isn’t 100% managed by Deviate Tracking

Initialize Pixel should be:

 

  • checked if either:
    • Deviate Tracking is the only integration using this pixel
    • Deviate Tracking will fire before any other integrations’ events on this page
  • unchecked if either:
    • Deviate Tracking will fire after another integration’s event
    • Deviate Tracking will fire at the same time (approximately) as another integration’s event