This is a guide to validating client-side tags implemented in Tealium iQ. It will cover several methods to ensure that tags are loading and that data is being sent.

Validation of data received by the vendor should be coordinated with your vendor representative.

In this article:

Getting Started

The validation methods covered here use both the developer tools and browser extensions (or plugins) available through the Chrome browser. 

Validating Tags with the Tealium Web Companion

The first step to validating your tag installation is to ensure all tags are loading and being sent to the tag vendor. To assist with validation, the Tealium Web Companion is a useful tool that can be used to show the status of the tags for each page.

  1. Follow the steps here to set up the Tealium Web Companion.
  2. Navigate to your website and launch the Web Companion from the Tealium Tools Extension.

    tealiumtools-webcompanion.jpg

  3. Ensure the Overview tab is active (it's the default tab). There will be a list of the tags in the Tags tab for all tags that SHOULD have loaded to the page based on each tag's load rules. If your tags have loaded and sent, you will see a green OK next to the name of each tag.

    222.png

  4. If the tags have simply loaded (not triggered or sent) a yellow Loading next to one or more tags will be displayed. If you see this, there could be an error or missing data causing the tags not to send. Please see this section for more details.

    333.png

Validating Tags with Chrome Developer Tools

Chrome Developer Tools can be used to verify that the tag's vendor request is being sent in the network activity of the browser.

This method of validation is not specific to Google Chrome and can also be used in other web browsers where developer tools are available to view the network traffic.

We recommend reviewing a tutorial on Chrome Developer Tools prior to validation in order to familiarize yourself with the interface:

Steps to Test

  1. Find Identifiable Information
    When a page loads, the network request panel will be populated with a large number of requests. In order to find the correct request for the tag being verified, the requests will need to be filtered down to a smaller, more specific group of requests.
    1. Navigate to your tag in TealiumIQ.
    2. Find an ID or configuration parameter that is UNIQUE to that tag. Make a note of this parameter's value (it will be used later in this process).

      TiQ - services-christina 2017-12-28 13-13-14.png

  2. Prepare Chrome Developer Tools
    The Chrome Developer Tools Network panel needs to be open when navigating to the website for the network requests to populate within the panel.
    1. Navigate to the website.
    2. Right-click anywhere on the page and select Inspect from the menu. This will open the Developer Tools.

      chrome-inspect.png

    3. Alternatively, the Developer Tools can be accessed from the menu bar by clicking View > Developer > Developer Tools. Keyboard shortcuts are present next to the "Developer Tools" menu option for both Mac and PC.
    4. In the top bar of the Developer Tools, click the Network tab to switch into the Network panel.
      chromedevtools-networktab.jpg
    5. Click the Preserve Log checkbox to ensure all network requests are captured in the event of a page redirect or refresh.
      chromedevtools-preservelog.jpg
  3. Check for UTAG Requests to Validate Tags Have Loaded
    Each tag added to Tealium has its own external JavaScript file that can be loaded by the browser using the utag.x.js naming convention. These files will show in the network requests panel when the page loads. However, if the tag is bundled into the utag.js file, the tag's individual network request will not be present. By filtering the network requests for "utag", we can get a quick and fairly accurate idea of which tags LOADED on the page.
    1. Type "utag" into the Filter box to see all network requests that include "utag" in the request URL.
      chromedevtools-filter.jpg
    2. Refresh the page or complete the required action to load tags and trigger events. The network panel will populate with all of the network requests sent out from the page based on the filtered value (all "utag" files should show in the panel).
    3. The tag UID number is present in the request URL (ex: utag.12.js), so it can be determined which unbundled tags have loaded to the page.
  4. Check for Vendor Requests
    To check for vendor tag requests, a filter will need to be applied using the values that were gathered in "Step 1" of this section.
    1. Type the ID or value gathered into the Filter box to see all network requests that include that value in the request URL.
      Section Page 2017-12-28 13-13-56.png
    2. If the tag has successfully triggered, network requests should appear in the panel. If the tag was not triggered, the panel will not contain any network requests.

      Section Page 2017-12-28 13-15-15.png

  5. Validate Vendor Request Data
    Click a request row in the panel to view the details of the request.
    1. Status
      Generally, a 200 Status means the request was successfully received by the tag vendor. The request type will vary by vendor (script, gif, xhr, etc.).
      chromedevtools-status.jpg
    2. Request URL
      This displays the entire URL that was sent as a POST or GET to the vendor's server. This URL includes the server URL and the query string parameters (depending on the vendor) that the vendor will receive.

      Section Page 2017-12-28 13-18-25.png

    3. Query String Parameters
      This section displays a list of the parameters received by the vendor. This is a potential way to validate the data being sent to the vendor from particular mappings or configuration parameters applied from the tag.

      Section Page 2017-12-28 13-20-01.png

Validating Tags With Vendor Plugins

Some vendors offer and maintain their own extensions for Google Chrome (or other browsers) that allow for pixel validation in a more user-friendly interface. More information and usage instructions for these extensions can be found as follows:

Validating Tag Data

There may be an instance where you find a parameter or value missing in the query parameters or a network request.

To ensure that all desired parameters are being passed in the network request, verify the data layer variables used in your page and event tracking calls are present and populated. This can be done using Web Companion or the Universal Tag Debugger. Read more about validating your web installation.

If your data layer is incomplete, additional development work might be necessary to include the variables required by the tags.

If your data layer looks good and your tracking calls are working as expected, but the vendor tags do not contain the data you expect, the next step is to review the data mappings for your tag to ensure they are mapped to the proper parameters. Read more about setting up data mappings.

Version history
Revision #:
4 of 4
Last update:
‎10-29-2020 03:00 PM
Updated by: