HUD and recirculation modules tracking

Recirculation modules may be worth tracking, because it’s possible to track modules of your site (like rendering, focus, and more), its links, and its related navigation.

Track impressions, viewability, and clicks - not only in recirculation, but it can also be used to track internal recirculation sources across the Marfeel platform.

In order to track the recirculation modules, there are two options:

  1. Add the data-mrf-recirculation attribute to a module containing a link. It can be applied on any kind of HTML tag (<div> , <section> , <aside> , <ol> …) and even on the link <a> itself
	<div data-mrf-recirculation="module-name">
		<!-- ... -->
		<a href="link">...</a>
		<!-- ... -->
	</div>
  1. Use the SDK without modifying the page templating
	window.marfeel.cmd.push(['compass', function(compass) {
		compass.setRecirculationModules([
			{ selector: '.module1', name: 'module1' },
			{ selector: '.module2', name: 'module2' },
		]);
	}]);
  1. Using utm_cmp_rs param in the destination URL.
    This method allows tracking recirculation sources in cross-domain traffic and in amp-next-page.
    It will be applied only as a recirculation source, but not tracked in the recirculation panel.
    For example https://destinationdomain.com/destination_url?utm_cmp_rs=amp-next-page

For Hubspot in order to track the redirection URL, it must be configured via API:

	window.marfeel.cmd.push(['compass', function(compass) {
		compass.setRecirculationModules([
			{
				selector: '.module1',
				name: 'module1',
				urlAttribute: 'cta_dest_link'
			}
		]);
	}]);

Subscribe to recirculation events

Recirculation offers event listeners in order to send its data to third party data warehouses. It can be implemented using the following method:

window.marfeel.cmd.push(['events', (events) => {
  events.on('recirculation', (data) => 
    // send data
  );
}])

Events can be filtered by specifying the module name to be subscribed to:

window.marfeel.cmd.push(['events', function(events) {
  events.on('recirculation:module_name', function(data) { 
    // send data
  });
}])
Module name must be the same as the one specified in data-mrf-recirculation attribute. For Marfeel experiences, this needs to be its ID, such as IL_XiZaB9H8TvyqINhX95lmOK.
Experience ID can be obtained from the browser's url while an experience is open in edit mode, like `https://hub.marfeel.com/experiences/IL_XiZaB9H8TvyqINhX95lmOK/edit/format`.

It is also possible to subscribe to all of Marfeel’s Inline or Flowcard experiences:

window.marfeel.cmd.push(['events', function(events) {
  events.on('recirculation:inline', function(data) { 
    // send data
  });
  events.on('recirculation:flowcards', function(data) {
    // send data
  });
}])

The data object includes the module name, url and position inside the module. Events that happen at the same time are grouped together:

{
  "t":"impression", // Can be either "eligible", "impression", or "click"
  "m":[
    {
      "n":"module_name_1",
      "e":[
        {
          "url":"https://www.domain.com/example-url-1",
          "p":"0"
        },
        {
          "url":"https://www.domain.com/example-url-2",
          "p":"1"
        },
        {
          "url":"https://www.domain.com/example-url-3",
          "p":"2"
        }
      ]
    },
    {
      "n":"module_name_2",
      "e":[
        {
          "url":"https://www.domain.com/example-url-4",
          "p":"0"
        },
        {
          "url":"https://www.domain.com/example-url-5",
          "p":"1"
        }
      ]
    }
  ]
}

Example

If you want to track impressions from the my_module_name module and track them somewhere else:

window.marfeel.cmd.push(['events', function(events) {
    events.on('recirculation:my_module_name', function(data) {
        if (data.t === 'impression') {
            data.m.forEach(function(module) {
                var moduleName = module.n;
                module.e.forEach(function(event) {
                    ga.trackEvent(moduleName, event.url, event.p);
                });
            });
        }
    });
}]);