Skip to content

Instantly share code, notes, and snippets.

@natterstefan

natterstefan/README.md

Last active September 17, 2021 12:44
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save natterstefan/7e00e1dff512c703e6275a609a4b896c to your computer and use it in GitHub Desktop.
Save natterstefan/7e00e1dff512c703e6275a609a4b896c to your computer and use it in GitHub Desktop.
Download ZIP
How to track content statistics for Facebook Instant Articles with Google Analytics
Raw
README.md

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

Raw
fia-google-analytics-tracking.html
<!-- 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>
Raw
inline-fia-google-analytics-tracking.html
<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