True Anthem JavaScript Analytics Tag Implementation Guide

JavaScript Analytics Tag

The True Anthem tag is a JavaScript snippet that you place at the bottom of the page before the </body> tag, when possible. The tag loads asynchronously and never prevents your pages from loading. Even if the connection to True Anthem’s CDN and our servers were interrupted, your page load would not be blocked in any way.

Our code makes an analytics call to pull in metadata about your content, measure your website activity and track social referrers. It does this by adding an image request to the <head> element of your page.  No other page elements are updated or manipulated.

Other important details:

  • The True Anthem tag dynamically handles both http and https connections.
  • The tag has been tested by both our engineers and the developers from some of the world’s largest media sites.
  • The True Anthem tag can be implemented with tag management solutions such as Google Tag Manager, Tealium and others. 
  • True Anthem captures traffic source/referrer information and public metadata from your pages (og:description, etc.). All data is non-PII.

The True Anthem tag loading involves two phases:

  1. Our main script, ta.js, is loaded asynchronously by the web browser from our CDN provider. The main script is cached by a visiting browser for even faster loading during subsequent site visits.
  2. After the main script is loaded, the browser calls TRUE_ANTHEM.configure() in an asynchronous callback handler to send a page view beacon request to b.trueanthem.com/beacon using JSONP.
    • The page view beacon responds with an HTTP 200 code if the page view was recorded. 
    • If the response is HTTP 403 code, the page view is not recorded. 
    • HTTP 403 code status case occurs when a site host (e.g, foo.site.com) was not provided to True Anthem during set-up.

Configure the True Anthem JavaScript In Your QA Environment

Your True Anthem JavaScript tag will look like this: 

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

This script will be placed into your tag manager (Google Tag Manager, Tealium, etc.) or in the body on your site/article pages. 

If you implement this tag directly in the source code of your page, it may be located in the <HEAD> or <BODY> section:

<head> 
  …
  … 
  <script src="//static.trueanthem.com/scripts/ta.js"></script>
</head>
Or it can be also implemented at the bottom of <BODY> section:
<body>
  …
  …
  <script src="//static.trueanthem.com/scripts/ta.js"></script>
</body>

Our tag has been certified from a performance and security standpoint by many media companies including Associated Press, Reuters, ABC, NBC, CBS, FOX, and McClatchy Newspapers among others.

In order for us to ensure tag is firing properly and we’re able to access proper metadata, please whitelist our user agent string for your QA environment, which you’ll find below:

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

Single Page Applications

Our script will work well with your application, as long as the page is updated with appropriate metadata and the javascript is using the history API (i.e.  window.history.pushState) directly or indirectly. The current page's og:type, canonical and og:url must be available and the DOM must be updated after a transition.

Load and initialize the True Anthem script using jQuery

If your page uses the jQuery library, we recommend you use the jQuery getScript() function to load and initialize the True Anthem script. This approach both loads and initializes the True Anthem script after your page has loaded. You may place the below script in either the <head> or <body> sections.

Example:

<body> 

<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> 

</body>

You will need to replace CAMPAIGN_ID_CODE with the value of your implementation ID Code (contact your Customer Success Manager if you do not have this ID Code). This value is commonly a number such as 1234 (this value is just an example, do not use in the configuration of the script)

Loading the tag using Adobe DTM (Dynamic Tag Manager)

Your True Anthem JavaScript tag will look like this: 

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

You can use a Page Load Rule to load the True Anthem JavaScript tag as a Third Party tag. The rule can trigger On Load or DOM Ready. The True Anthem JavaScript tag just needs to be executed in the page and can be executed as the final script in the page load.

Scenario 1: Load it as Sequential HTML

Here, simply use <script src="//static.trueanthem.com/scripts/ta.js"></script> as the HTML code to add to the page. 

Scenario 2: Load it as Non-Sequential JavaScript

In this scenario, you can use the following code as the non-sequential JavaScript code to execute. This code loads the True Anthem JavaScript into the <head> section of the page:

(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));
Other Resources

How to check if the tag is loading correctly?

The first step is to verify if the tag is loading and triggering the beacon that reports the data of the page in the browser to True Anthem. You can find instructions on how to verify that all the required components are loading correctly. 

Check the tag load in regular web pages (not Google AMP)

You can add the tag in different ways:

  1. Add the tag directly into the template of your pages
  2. You can use a tag manager such as Tealium, Adobe DTM, Google Tags, etc.

Please load the test page in your browser and open the browser’s Development Tools (right click on the page and select Inspect): 

  1. Go to the Network tab 
  2. Go to the Filter caption box and type “trueanthem.com” (to filter all the page elements coming from the trueanthem.com domain)

Screenshot_2023-02-17_at_3.50.25_PM.png

to

Screenshot_2023-02-17_at_3.51.03_PM.png

  1. Reload the page and check if the following elements are loading:
    • The True Anthem JavaScript tag (ta.js in the image below)
      • IMPORTANT: if the True Anthem JavaScript tag is loaded using a Tag Manager or added in other script that is not located from https://static.trueanthem.com, then it will not visible here using the ”trueanthem.com” filter. 
    • beacon
      Screenshot_2023-02-17_at_3.51.33_PM.png
    • IMPORTANT: If you do not see the True Anthem JavaScript tag file in this list, but see beacon, then check that beacon is returning a Status 200: that means everything is working correctly.

     4. Check that beacon is loading and the status is 200 (successful load)

  • If this step is successful, if the beacon loads, then the configuration of the True Anthem JavaScript tag is correct.
  • If you do not see beacon loading, please check the Troubleshooting section  

Check the tag load in Google AMP pages

Please load the test page in your browser and open the browser’s Development Tools: 

  1. Go to the Network tab 
  2. Go to the Filter caption box and type “trueanthem.com” (to filter all the page elements coming from the trueanthem.com domain)

      Screenshot_2023-02-17_at_3.50.25_PM.png

       to

      Screenshot_2023-03-31_at_11.26.13_AM.png

  1. Reload the page and check that the following element is loading: beacon, and that it is reporting a Status Code 204 (successful load):

    Screenshot_2023-03-31_at_11.13.56_AM.png

  2. Please click the pageview?clientID=... element and locate the Query String Parameters panel. Verify that the parameters are loading the right data for the page you are testing

        Screenshot_2023-02-17_at_3.54.22_PM.png

Troubleshooting the load of the beacon

If you do not see the beacon loading successfully, the first recommendation is to verify the load of the beacon on FireFox browser. If the beacon load is not working, then please follow these steps to troubleshoot:

  1. Please load the test page in your browser and open the browser’s Development Tools
  2. Go to the Console tab
  3. In the Console section, bottom line, execute the diagnostics for the True Anthem tag: TRUE_ANTHEM.diagnostics()
    1. This command will let you know if there is a problem r missing data to successfully load the beacon  
  4. Some of the issues you may encounter:
    • Undefined Post Type:
      Screenshot_2023-02-17_at_3.43.32_PM.png
  •  
Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.

Articles in this section