Facebook Instant Articles instrumentation

Implementation Guides Platform
1

Compass can track visits and behaviors on Facebook Instant Articles (FBIA).

Embed iframe implementation

Enable Compass on Facebook Instant Articles by inserting this Javascript snippet anywhere in your page’s body ensuring your unique account ID is correctly added before /* AccountId */:

<figure class="op-tracker">
  <iframe>
    <script type="text/javascript">
    function e(e){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],c=document.createElement("script");c.src=e,t?c.type="module":(c.async=!0,c.type="text/javascript",c.setAttribute("nomodule",""));var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(c,n)}function t(t,c,n){var a,o,r;null!==(a=t.marfeel)&&void 0!==a||(t.marfeel={}),null!==(o=(r=t.marfeel).cmd)&&void 0!==o||(r.cmd=[]),t.marfeel.config=n,t.marfeel.config.accountId=c;var i="https://sdk.mrf.io/statics";e("".concat(i,"/marfeel-sdk.js?id=").concat(c),!0),e("".concat(i,"/marfeel-sdk.es5.js?id=").concat(c),!1)}!function(e,c){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};t(e,c,n)}(window,0 /* AccountId */,{pageType:"fbia"} /* Config */);
    </script>
  </iframe>
</figure>
Click to view the unminified version of this snippet: 
<figure class="op-tracker">
  <iframe>
    <script type="text/javascript">
      function injectScript(src) {
        var isModule = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
        var script = document.createElement('script');

        script.src = src;

        if (isModule) {
          script.type = 'module';
        } else {
          script.async = true;
          script.type = 'text/javascript';
          script.setAttribute('nomodule', '');
        }

        var firstScript = document.getElementsByTagName('script')[0];

        firstScript.parentNode.insertBefore(script, firstScript);
      }

      function load(window, id, userConfig) {
        var _a, _b;
        var _c;

        (_a = window.marfeel) !== null && _a !== void 0 ? _a : window.marfeel = {};
        (_b = (_c = window.marfeel).cmd) !== null && _b !== void 0 ? _b : _c.cmd = [];
        window.marfeel.config = userConfig;
        window.marfeel.config.accountId = id;

        var resourcesPath = 'https://sdk.mrf.io/statics';

        injectScript("".concat(resourcesPath, "/marfeel-sdk.js?id=").concat(id), true);
        injectScript("".concat(resourcesPath, "/marfeel-sdk.es5.js?id=").concat(id), false);
      }

      (function (window, accountId) {
        var clientConfig = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};

        load(window, accountId, clientConfig);
      })(window, /* AccountId */, {pageType: 'fbia'} /* Config */);
    </script>
  </iframe>
</figure>

URL tracker iframe implementation

If you are doing your own custom implementation for your fbia tracker like:

<figure class="op-tracker">
      <iframe src="http://my-url-tracker.com/">
</figure>

You will need to add the javascript snippet previously mentioned and also this snippet to put in context vars that the compass runtime will need:

<script type="text/javascript">
window.ia_document = {
   shareURL: URL,
   referrer: REFERRER_URL
}
</script>
<script type="text/javascript">
    function e(e){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],c=document.createElement("script");c.src=e,t?c.type="module":(c.async=!0,c.type="text/javascript",c.setAttribute("nomodule",""));var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(c,n)}function t(t,c,n){var a,o,r;null!==(a=t.marfeel)&&void 0!==a||(t.marfeel={}),null!==(o=(r=t.marfeel).cmd)&&void 0!==o||(r.cmd=[]),t.marfeel.config=n,t.marfeel.config.accountId=c;var i="https://sdk.mrf.io/statics";e("".concat(i,"/marfeel-sdk.js?id=").concat(c),!0),e("".concat(i,"/marfeel-sdk.es5.js?id=").concat(c),!1)}!function(e,c){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};t(e,c,n)}(window, /* AccountId */,{pageType:"fbia"} /* Config */);
    </script>
  • URL: url of the article we are viewing. You will recieve it as a query param of the iframe (infered for you by fbia) as ia_share_url .
  • REFFERER: referrer url of the article.