Marfeel Experiences are integrated with your site through marfeel-sdk, a Javascript that allows you to integrate several Marfeel products in your site and to interact with them. flowcards API is used to dynamically build experiences and flows based on key details (such as siteIdand dynamic cards). It builds and displays the most appropriate experience for each URI, loading the flowcards-experience library only when it’s needed.
Flowcards activation
flowcards activation is done through marfeel-sdk. To install it, we provide a small Javascript snippet that can be placed anywhere on a page.
Make sure that you don't add `marfeel-sdk` snippet twice in your page!
Copy this HTML snippet and replace 0 /*accountId*/ with your account ID:
<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*/,{} /*config*/);
</script>
You can open the following block to read the non-minified version of this snippet:
Click to open
<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, 0 /*accountId*/, {} /*config*/);
</script>
Navigation change instrumentation
Marfeel Flowcards upgrades any site into a Single Page Application (SPA) where the browser doesn’t need to fully refresh the whole UI when the user navigates between pages.
When a user pulls up a card and starts reading it, the Flowcards SDK updates the browser bar URL accordingly with the canonical URL of the newly loaded content, leaving the original article in the background.
When the user closes a Flowcard, the original host article in the background gets the focus and the browser bar is updated again.
At this point, it’s highly probable you want to track the user interaction as a new page view, the same way it’d work if the user was clicking on a URL and going back to the originating page.
To do so add this script to your page:
window.marfeel = window.marfeel || {};
window.marfeel.cmd = window.marfeel.cmd || [];
window.marfeel.cmd.push(['experiences', 'compass', function(experiences, compass) {
experiences.addEventListener('flowcards', 'navigationfromcard', function(event) {
//IMPORTANT: this implementation is just an example
compass.trackNewPage(); // Compass
ga('send', 'pageview', document.location.pathname); //Google Analytics
COMSCORE.beacon({ c1: '2', c2: XXXX }); // Comscore
googletag.pubads().refresh(); // Additionaly you could refresh the ads with DFP library for instance
});
}]);
This code uses the navigationfromcard event to refresh the ads and trigger a page view in Google Analytics and Comscore once a Flowcard is closed.
Following the same principle, you could use the navigationtocard event to run any code required as soon as the user opens a Flowcard:
window.marfeel.cmd.push(['experiences', function(experiences) {
experiences.addEventListener('flowcards', 'navigationtocard', function(event) {
//the code defined here will be executed
//as soon as the user opens the card
});
}]);