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();
}]);
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'});
}]);