Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
How to track content statistics for Facebook Instant Articles with Google Analytics

Track Facebook Instant Articles with Google Analytics

The *.html example assumes you have integrated the tracking code as an iframe in the instant articles feed.

<figure class="op-tracker">
    <iframe src="https://www.example.com/fia-google-analytics-tracking.html"></iframe>
</figure>

The inline example would look similar to

<html lang="de-ch" prefix="op: http://media.facebook.com/op#">
   <head>
      <meta charset="utf-8">
      <title>Hello World</title>
      <link rel="canonical" href="http://example.com">
      <meta property="op:markup_version" content="v1.0">
      <meta property="fb:use_automatic_ad_placement" content="true">
   </head>
   <body>
      <article itemscope itemtype="http://schema.org/Article">
         <header>
            <h1>Hello World</h1>
            <time class="op-published" datetime="2019-01-08T15:38:14+01:00">8.1.2019 um 15:38 Uhr</time><time class="op-modified" datetime="2019-01-09T14:08:03+01:00">9.1.2019 um 14:08 Uhr</time>
         </header>
         <div class="article-body">
            <div class="copy">
               <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            </div>
         </div>
         <footer>
            <small>© Copyright 2010 – 2019, Example.com</small>
         </footer>
         <figure class="og-tracker">
            <iframe>
               <!-- see inline-fia-google-analytics-tracking.html -->
            </iframe>
         </figure>
      </article>
   </body>
</html>

Result

It categories the traffic coming from FIA in the Social category and also attributes it to the correct network.

image

image

<!-- Global site tag (gtag.js) - Google Analytics -->
<!--
Docs Facebook
- feature overview: https://developers.facebook.com/docs/instant-articles/analytics
- implementation details: https://developers.facebook.com/docs/instant-articles/reference/analytics
- ia_document reference: https://developers.facebook.com/docs/instant-articles/analytics/#analytics-services
Attention: For URL trackers, the data (ia_document) is available as query parameters.
Docs Google
- https://developers.google.com/analytics/devguides/collection/gtagjs/pages
Examples and inspiration for this solution:
- https://www.en.advertisercommunity.com/t5/Google-Analytics-Code/How-to-properly-integrate-Google-Analytics-in-FB-Instant/td-p/1230802
- https://stackoverflow.com/q/52412414/1238150
- https://stackoverflow.com/a/50232563/1238150
-->
<script async src="https://www.googletagmanager.com/gtag/js?id={{googleAnalytics}}"></script>
<script type='text/javascript'>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '{{googleAnalytics}}', {
'page_title': '{{articleTitle}}', // or: ia_document.title
'page_path': '/{{articlePath}}', // The path portion of location. This value must start with a slash (/) character. (optional, but recommended)
'page_location': '{{articleUrl}}', // page's URL (optional, but recommended), or: ia_document.shareURL
'campaign': {
'source': 'ia.facebook.com', // utm_source, or: ia_document.referrer
'medium': 'referral', // utm_medium
'name': 'Facebook Instant Articles' // utm_campaign
},
});
</script>
<figure class="og-tracker">
<iframe>
<script async src="https://www.googletagmanager.com/gtag/js?id={{googleAnalytics}}"></script>
<script type='text/javascript'>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '{{googleAnalytics}}', {
'page_title': window.ia_document.title,
'page_location': window.ia_document.shareURL, // page's URL (optional, but recommended)
'campaign': {
'source': window.ia_document.referrer, // utm_source
'medium': 'referral', // utm_medium
'name': 'Facebook Instant Articles' // utm_campaign
},
});
</script>
</iframe>
</figure>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment