Google Tag Manager

If you use Google Tag Manager (GTM) to manage ad tags on your site, you can add the universal pixel tag code into your Google Tag Manager container to implement the pixel. You can also configure dynamic parameters to capture additional information at the point that the pixel is triggered.

Note: Google Tag Manager is an independent platform. The information relating to Google Tag Manager was correct at the time this content was written, but is not guaranteed to be up to date because Google Tag Manager might change.

This page assumes you have a Google Tag Manager account, container, and workspace already set up.

Create the Tag in Google Tag Manager

This example illustrates adding a universal pixel in Google Tag Manager. In this scenario, the pixel code fires on all pages and dynamic parameters are not used.

In Google Tag Manager, create a tag for the universal pixel.

Steps:

1. Sign in to your Google Tag Manager workspace.
2. Define the tag that includes the pixel code:

1. On the left, click Tags, and then click New. Provide a name for the tag. This example uses Universal Pixel Tag.
2. In the Tag Configuration section, click anywhere to begin setup. For the tag type, in the Custom section, choose Custom HTML.
3. In the code box, paste the pixel code, which you copied from Admatx.

3. Define the trigger that makes the pixel fire:

1. In the Triggering section, click anywhere to begin setup. Choose All Pages.
   Triggering the universal pixel on all page loads across a site is the most common configuration.
2. Save the tag.

4. (Optional) Preview the settings before publishing:

1. Click Preview.
2. Review, and make changes if needed.

5. To publish the settings, click Submit.

Test Your Implementation

The Google Tag Manager code must be on all pages of your site. When you've submitted your changes, you can turn on the browser developer tools and view any page on your site to see the universal pixel fire, as shown in the following example

See "UP Fires" attachment

Implementing a Pixel on a Single Page, With Dynamic Parameters

You might want to define dynamic parameters that send specific pieces of information back with the universal pixel on certain pages. Dynamic parameters are a way to collect additional data, such as revenue information, order ID, currency information, or product information. When the universal pixel is triggered, the additional information is sent with the pixel. For example, you might want the pixel on the order confirmation page to send dynamic information such as order total, currency, and order ID.

This example illustrates how to set up dynamic parameters in Google Tag Manager for an order confirmation page, thank-you.html, to collect and return information about a purchase.

This section includes an end-to-end example of creating the dynamic parameter variables in Google Tag Manager and setting up the pixel code. It assumes that the conversion page already has a Google Tag Manager dataLayer object. This procedure uses the dataLayer object to pass the dynamic parameter variables into Google Tag Manager. The following is an example of the script:

<script>
 dataLayer = [{
   "OrderTotal": "9.99",
   "OrderId": "ABC123456",
   "Currency": "USD",
   "CustomerType": "NEW"
 }];
</script>

In this example, the dataLayer object is populated with static values. In a production scenario, if this is implemented on your site, the dataLayer object is populated with the appropriate values dynamically, each time the page loads. You'll need to complete an extra step, creating the user-defined variables in Google Tag Manager, so that the values are passed from the dataLayer object into the tracking tag.

Create User-Defined Variables for the dataLayer Object

Here are the steps to create user-defined variables, which are JavaScript variables, for the dataLayer object.

A template object contains a full set of the dynamic parameters that are available.

Example:

<script src="https://js.adsrvr.org/up_loader.1.1.0.js" type="text/javascript"></script>
<script type="text/javascript">
   ttd_dom_ready( function() {
       if (typeof TTDUniversalPixelApi === 'function') {
           var universalPixelApi = new TTDUniversalPixelApi();
           universalPixelApi.init("{ADVERTISER_ID}", ["{UPIXEL_ID}"], "https://insight.adsrvr.org/track/up",
           {
               "orderid": "{ORDER_ID}",
               "v": {REVENUE_AMOUNT},
               "vf": "{CURRENCY_CODE}",
                        "td1": "{TD_1_VALUE}",
                        "td2": "{TD_2_VALUE}",
                        "td3": "{TD_3_VALUE}",
                        "td4": "{TD_4_VALUE}",
                        "td5": "{TD_5_VALUE}",
                        "td6": "{TD_6_VALUE}",
                        "td7": "{TD_7_VALUE}",
                        "td8": "{TD_8_VALUE}",
                        "td9": "{TD_9_VALUE}",
                        "td10": "{TD_10_VALUE}"
           });
       }
   });
</script>

In these parameters, v is a currency amount (numeric-only value, with decimal place but no currency symbol or other characters such as the comma for thousands) and vf is a currency code—for example, USD for US dollars.

For each dynamic parameter, the value on the left, enclosed in double quotation marks (for example, "v"), is the parameter name, and the value on the right, enclosed in double curly brackets (for example, {{SaleAmount}}), is the Google Tag Manager macro that passes the dynamic value.

Steps:

1. Sign in to your Google Tag Manager workspace.
2. Create a user-defined variable for the value of Currency in the dataLayer object:

1. On the left, click Variables, and then, in the User-Defined Variables section, click New.
2. Name the user-defined variable. In this example: CurrencyCode.
   The name is used for the macro/variable in the universal pixel code.
3. Click Variable Configuration. For variable type, in the Page Variables section, choose Data Layer Variable.
4. Enter the name of the data layer variable. In this example: Currency. The name must exactly match the value in the dataLayer object. The user-defined variable includes the data layer variable, so it's a good idea to have slightly different names, for clarity.
   See "Variable Configuration" attachment for an example of how the variable configuration looks
5. Save the variable.

3. Create a user-defined variable for the value of OrderId in the dataLayer object, following the same steps as for Currency and using the following names:

1. User-defined variable name: OrderRef
2. Data layer variable name: OrderId

4. Create a user-defined variable for the value of OrderTotal in the dataLayer object, following the same steps as for Currency and using the following names:

1. User-defined variable name: SaleAmount
2. Data layer variable name: OrderTotal

Important
The values assigned to the Currency parameter must be numeric (no currency signs such as $ or other characters such as the comma—for example, 1000 not 1,000).

5. Create a user-defined variable for the value of CustomerType in the dataLayer object, following the same steps as for Currency and using the following names:

1. User-defined variable name: Param1
2. Data layer variable name: CustomerType

See "Variables" attachment for an example of how the user-defined variables list will look when all variables are set up 

6. Preview the settings, and then publish them.

Create the Tag in Google Tag Manager

Creating the tag in Google Tag Manager is similar to the steps above, but you must assign the variables that you created in Create User-Defined Variables for the dataLayer Object, to make sure that the dynamic parameters work.

This example uses a standard universal pixel tag, but with additional code for the user-defined variables to be tracked, which you added in Create User-Defined Variables for the dataLayer Object. This allows Google Tag Manager to pull the corresponding values from the dataLayer object and insert them into the tag. The variable names must match exactly. This example sets the pixel to fire on the post-purchase order confirmation.

Steps:

1. Sign in to your Google Tag Manager workspace.
2. Define the tag that includes the pixel code:

1. On the left, click Tags and then click New. Provide a name for the tag. This example uses UPixel-Thankyou-Page.
2. In the Tag Configuration section, click anywhere to begin setup. For the tag type, in the Custom section, choose Custom HTML.
3. In the code box, paste the pixel code, which you copied from Admatx

3. Define the trigger that makes the pixel fire:

1. In the Triggering section, click anywhere to begin setup. Choose All Pages.
2. On the Choose a Trigger page, click the New Trigger icon to add a trigger.
3. Provide a name for the trigger. This example uses Thank you confirmation page.
4. To define the trigger properties, click anywhere to begin setup. For the trigger type, in the Page View section, choose Window Loaded. This type of trigger waits for the page and all elements to fully load before triggering the pixel.
5. In the section for when the trigger fires, click Some Window Loaded Events.
6. Define the page that makes the pixel fire: Choose Page URL in the first box and contains in the second box, and type the file name, in this case thank-you.html, in the third box, as shown in the attachment "thank you"

4. Click Save to save the trigger, and again to save the tag.