Adding the Marfeel Javascript SDK to your site

Q: How do I track pageviews in a Single Page Application with the Marfeel SDK?

Use the trackNewPage() method from the compass module. Call window.marfeel.cmd.push(['compass', function(compass) { compass.trackNewPage(); }]) each time the user navigates to a new view. The first page view is tracked automatically when the SDK loads, so only call trackNewPage for subsequent navigations.

Q: Can I specify a custom URL or recirculation source when tracking a new page?

Yes. Pass an options object to trackNewPage with url for a custom URL and rs for a custom internal recirculation source. For example, compass.trackNewPage({ url: CUSTOM_URL, rs: 'infinite scroll' }) attributes the page to Traffic Medium Internal with source Infinite scroll.

Q: What happens automatically when the Marfeel SDK loads?

The SDK automatically tracks an initial PageView to the window.location URL. The Marfeel Editorial crawler then crawls the page content and selects its canonical URL to extract metadata.

The Marfeel Javascript SDK is a JavaScript tool that enables seamless integration of Marfeel products on your site. Installing it is the first step to begin using Marfeel, as part of the broader SDK integration ecosystem.

To install the SDK, copy and paste the following Javascript snippet in the <head> of your webpage , ensuring your unique account ID is correctly added before /* AccountId */:

<script type="text/javascript">
!function(){"use strict";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,c){!function(t,c,n){var a,o,r;n.accountId=c,null!==(a=t.marfeel)&&void 0!==a||(t.marfeel={}),null!==(o=(r=t.marfeel).cmd)&&void 0!==o||(r.cmd=[]),t.marfeel.config=n;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)}(t,c,arguments.length>2&&void 0!==arguments[2]?arguments[2]:{})}(window,/* AccountId */,{} /* Config */)}();
</script>

Click to view the unminified version of this snippet:

<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 */, {} /* Config */);
</script>

When the Marfeel SDK executes, it automatically tracks an initial PageView to the window.location URL. The Marfeel Editorial crawler then crawls its content and chooses its canonical to extract its metadata.

Single Page Application support

In Single Page Applications (SPAs) or Progressive Web Apps (PWAs), where the user navigates without refreshing the entire page, you can track new pageviews manually using the trackNewPage() method.

window.marfeel = window.marfeel || { cmd: [] };
window.marfeel.cmd.push(['compass', function(compass) {
  compass.trackNewPage();
}]);

Use this method only when a page is loaded dynamically. The first page view is automatically tracked when the Marfeel SDK loads..

When no url is passed to the trackNewPage() method, the system automatically gets the pageview URL from window.location. You can specify a different URL or recirculation source like:

window.marfeel = window.marfeel || { cmd: [] };
window.marfeel.cmd.push(['compass', function(compass) {
  compass.trackNewPage({ url: CUSTOM_URL, rs: CUSTOM_INTERNAL_RECIRCULATION_SOURCE});
}]);

In the example below, articles loaded dynamically would be attributed to Traffic Medium Internal, and traffic Source Infinite scroll:

window.marfeel = window.marfeel || { cmd: [] };
window.marfeel.cmd.push(['compass', function(compass) {
  compass.trackNewPage({rs: 'infinite scroll'});
}]);

You can also include page-specific variables of the new page using the initialPageVars parameter. These variables will be included in the tracking context and can be used for segmentation. For example, to mark paywalled content:

window.marfeel = window.marfeel || { cmd: [] };
window.marfeel.cmd.push(['compass', function(compass) {
  compass.trackNewPage({
    rs: 'infinite scroll',
    initialPageVars: {
      'closed': 'hard-paywall'
    }
  });
}]);

Adding the Marfeel Javascript SDK to your site

Single Page Application support

Further reading