Marfeel Experiences activation on Web

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.

If you have `compass`, then probably you already have `marfeel-sdk` snippet in your site and you can skip this step.
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="";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*/);

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 = '';

		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*/);

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
`marfeel-sdk` allows you to access experiences like `flowcards` and `compass` at the same time.

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
Bear in mind viewability when refreshing ads