Implementing and Verifying the True Anthem JavaScript Analytics Tag

Updated March 03, 2025 23:26

The True Anthem JavaScript tag is a lightweight, asynchronous snippet designed to track website activity and social referrers without impacting page load performance. The tag retrieves metadata from your content and sends a page view beacon request to True Anthem’s servers.

Placement

The True Anthem JavaScript tag should be placed at the bottom of the page, before the </body> tag, whenever possible. It can also be placed in the <head> or <body> section of your website.

Tag For Implementation

<script src="//static.trueanthem.com/scripts/ta.js"></script>

Tag Management System Support

The tag can be implemented using popular tag management solutions such as:

Google Tag Manager
Tealium
Adobe Dynamic Tag Manager (DTM)

Single Page Applications (SPA)

For SPAs, ensure the page metadata updates properly during navigation and that the script interacts with the History API (e.g., window.history.pushState).

Data Collection

The True Anthem tag collects:

Traffic source/referrer information
Public metadata from pages (e.g., og:description, og:url)
Non-PII (Personally Identifiable Information) data

Tag Loading Process

Loading ta.js Script:
- The script is loaded asynchronously from the True Anthem CDN.
- Cached by browsers for faster subsequent loading.
Sending a Page View Beacon:
- The browser calls TRUE_ANTHEM.configure() asynchronously to send a request to b.trueanthem.com/beacon.
- Successful page view tracking returns an HTTP 200 response.
- HTTP 403 responses indicate the site host was not registered with True Anthem.

Integration with jQuery

If your website uses jQuery, you can load and initialize the script as follows:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
  jQuery(document).ready(function ($) {
    $.ajaxSetup({cache: true});
    $.getScript('//static.trueanthem.com/scripts/ta.js', function () {
      $.ajaxSetup({cache: false});
      window.TRUE_ANTHEM.configure('CAMPAIGN_ID_CODE');
    });
  });
</script>

Replace CAMPAIGN_ID_CODE with the appropriate implementation ID code.

Implementation in Adobe DTM

Option 1: Sequential HTML

<script src="//static.trueanthem.com/scripts/ta.js"></script>

Option 2: Non-Sequential JavaScript

(function(d) {
  var e = d.createElement('script');
  e.src = '//static.trueanthem.com/scripts/ta.js';
  e.async = true;
  window.top.document.head.appendChild(e);
}(document));

Verifying Tag Implementation

Checking Tag Load in Browser Developer Tools

Open Developer Tools (Inspect Element > Network Tab).
Filter by trueanthem.com.
Reload the page and verify:
- ta.js is loaded (if implemented directly).
- beacon request is sent.
- Beacon status is 200 (success) or 204 for AMP pages.

Checking Tag Load in Google AMP Pages

Load the test page in your browser and open Developer Tools.
Navigate to the Network tab.
In the Filter caption box, type trueanthem.com to filter all page elements from the True Anthem domain.
Reload the page and verify that the following element is loading:
- beacon request is sent and returning Status Code 204 (successful load).
Click the pageview?clientID=... element and locate the Query String Parameters panel.
Verify that the parameters are loading the correct data for the test page.

Diagnosing Issues

If beacon is missing or not working:

Open Developer Tools > Console.
Run the command:
```
TRUE_ANTHEM.diagnostics()
```
Common issues:
- Undefined Post Type: Ensure og:type metadata tag is correctly set.
- Missing Canonical or og:url: Verify these metadata tags are present.

Whitelisting User Agent for QA

To ensure proper tag functionality in a QA environment, whitelist the following user agent:

Mozilla/5.0 (compatible; trueAnthem/1.0; +http://www.trueanthem.com)

Additional Resources

Adobe DTM Load Order Documentation