Setup the True Anthem JavaScript Analytics Tag in an IFRAME Element

Integrating your website with True Anthem's data-driven posting capabilities depends on the accurate and consistent provision of three fundamental values. These values empower our system to understand your content, optimize its distribution, and provide valuable insights into its performance.

Page Identity: Canonical and og:url Metadata

A stable and unambiguous page identity is paramount. Our system relies on the canonical and/or og:url metadata values to uniquely identify each web page. These values serve as the authoritative reference for a page's content, preventing duplication issues and ensuring that all data collected and associated with that page is correctly attributed.

• Canonical URL: The canonical tag specifies the preferred version of a web page, particularly when multiple URLs might point to the same content (e.g., due to tracking parameters, differing case, or print versions). It helps search engines and our system understand the primary source of the content, consolidating signals and preventing split authority.
• og:url (OpenGraph URL): The og:url property is a crucial part of the OpenGraph protocol, designed to define how your web page appears when shared on social media platforms. It explicitly states the URL that social media platforms should use when linking back to your content.

Content Classification: OpenGraph article:type

The OpenGraph article:type for your web page allows for granular classification of your content. This classification is not merely descriptive; it's a powerful tool for our customers to precisely control which web pages are posted to social media and how they are presented.

• Filtering and Control: Our customers frequently leverage the article:type value to implement sophisticated filtering rules. For example, a common use case involves excluding certain types of pages, such as "website" (often used for home or index pages), from automated social media posting. This prevents the system from cluttering social feeds with non-article content and allows for a more focused distribution strategy.

Origin Tracking: HTTP Request Referrer

The HTTP request's referrer value plays a vital role in allowing True Anthem to classify the origin of a page view. This information is a key component in our automated algorithms and provides valuable context for understanding user behavior and content performance.

• Understanding Traffic Sources: The referrer value indicates the URL of the page that is linked to the current page. This allows us to determine if a user arrived from a search engine, another website, a social media platform, or an internal link. This data is crucial for analyzing the effectiveness of different traffic acquisition channels.
• Optimizing Social Media Posting: While the referrer value is optional for direct requests (where the referrer value is empty), it is highly beneficial for our system. Our algorithms combine the referrer value with other contextual components (such as page identity and content type) to accurately and intelligently choose the most optimal link for posting to social media. For example, if a significant number of views for a particular article originate from a specific social platform, our system might prioritize re-sharing that article on the same platform to maximize its reach and engagement.
• Direct Requests: An empty referrer value typically signifies a direct request, meaning the user typed the URL directly into their browser, accessed it from a bookmark, or initiated a request without a preceding web page. While this doesn't provide an explicit origin, our algorithms are designed to account for this scenario and still make informed decisions.

By providing these three values accurately and consistently, you empower True Anthem to deliver a robust, data-driven social media posting solution that maximizes the reach and impact of your website's content.

Load JavaScript Using an IFRAME Element

The following example loads True Anthem's JavaScript in an IFRAME but sources the top document's metadata to accurately reflect the viewed web page. This example depends upon the IFRAME being able to read the parent document's metadata and referrer:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html" lang="en">
<head>
  <title>Frame Example</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noarchive">
  <link rel="canonical" href="http://example.com/an_exciting_example.html">
  <meta property="og:url" content="http://example.com/an_exciting_example.html">
  <meta property="og:type" content="article">
  <meta property="og:title" content="Hoe harder het wait, hoe sneller we fiesten.">
  <meta property="og:description" content="A fantastic article description goes here.">
  <meta property="article:published_time" content="2017-11-14T13:36:02-05:00">
  <meta property="article:modified_time" content="2017-11-15T05:22:28-05:00">
  <meta property="article:section" content="U.S.">
  <meta property="article:section-taxonomy-id" content="23FD6C8B-62D5-4CEA-A331-6C2A9A1223BE">
  <meta property="article:top-level-section" content="us">
</head>
<body>
  <ol>
    <li>Create an IFRAME element.</li>
    <li>Load True Anthem's JavaScript.</li>
    <li>Configure True Anthem's JavaScript using the parent document's metadata.</li>
  </ol>
  <script type="text/javascript">
    (function (w, d) {
      'use strict';
      let pfn = function () {
        let d = window.top.document;
        var u;
        let cEl = d.querySelector('link[rel="canonical"]');
        if (cEl) {
          u = cEl.href;
        } else {
          let oEl = d.querySelector('meta[property="og:url"]');
          if (oEl) {
            u = oEl.content;
          }
        }
        let typ = d.querySelector('meta[property="og:type"]');
        return {
          canonical: u,
          'og:url': u,
          'og:type': typ ? typ.content : null,
        };
      },
      opts = {
        page: pfn,
        referrer: window.top.document.referrer,
      };
      let f = d.createElement('iframe');
      f.src = 'about:blank';
      f.style = 'display:none;';
      document.body.appendChild(f);
      let fd = f.contentDocument;
      let s = fd.createElement('script');
      s.src = '//static.trueanthem.com/scripts/ta.js';
      if (s.addEventListener) {
        s.addEventListener('load', function () {
          f.contentWindow.TRUE_ANTHEM.configure(c, opts);
        }, false);
      } else {
        s.onreadystatechange = function () {
          if (s.readyState in { loaded: 1, complete: 1 }) {
            s.onreadystatechange = null;
            f.contentWindow.TRUE_ANTHEM.configure(c, opts);
          }
        };
      }
      fd.body.appendChild(s);
    }(window, document));
  </script>
</body>
</html>
    

Optional Configuration with TRUE_ANTHEM.configure()

The TRUE_ANTHEM.configure() method provides a powerful way to tailor how the True Anthem SDK behaves in your environment. You can customize how page identity, referrer data, and other contextual information are reported to our analytics system.

Below is a breakdown of the supported configuration options and usage examples.

• canFire – A function to customize whether a beacon request should be sent. If the function returns true, a request is sent; otherwise, the default logic runs.

function canFireFn(canonical, ogURL, referrer, pageType, meta) {
  return canonical === 'http://i.am/cool';
}

window.TRUE_ANTHEM.configure({ canFire: canFireFn });
    

• page – A required function that returns an object with canonical, og:url, and og:type.

function page() {
  var l = document.location,
      u = l.protocol + '//' + l.host + l.pathname;
  return {
    canonical: u,
    'og:url': u,
    'og:type': 'article'
  };
}

window.TRUE_ANTHEM.configure({ page: page });
    

• referrer – Override the default document.referrer value.

window.TRUE_ANTHEM.configure({ referrer: 'http://example.com/mypage' });
    

• search – Provide a custom query string instead of relying on window.location.search.

window.TRUE_ANTHEM.configure({ search: window.location.search });
    

• disableHistoryChangeTrigger – A boolean flag to disable tracking on SPA history changes. Default is false.

window.TRUE_ANTHEM.configure({ disableHistoryChangeTrigger: true });
    

Alternatives

Alternatives to this technique exist in the following document(s):

• Implementing and Verifying the True Anthem JavaScript Analytics Tag + Site Change Syndication for Optimized Web Page Scraping