Adding Marfeel Javascript SDK to your site

To begin using Marfeel, install Marfeel’s SDK, a JavaScript tool enabling seamless integration of Marfeel products on your site and interaction with them.

To install it, 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’s 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 can navigate 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 dynamically loaded, 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'});
}]);

Further reading

  1. How to add the SDK via Google Tag Manager
  2. Scroll tracking
  3. How to accurately track Advertising data
  4. Accessing users’ RFV
  5. Tracking page vars, session vars, user vars and user segments
  6. Use of cookies
  7. Marfeel Javascript SDK performance considerations