Tracking Widgets

🚧

See our documentation of full integration with A/B testing

For a big-picture overview of the entire integration, see our documentation on full integration with A/B testing. The A/B testing instructions contain full code with tracking, rendering, A/B test slicing, and overwriting callbacks. After going through that code you can return to this section to better understand how tracking works.

🚧

Importance of Tracking

The tracking functionality is useful for two reasons:

• It allows us to report analytics for our widgets, such as click-through rate. It also allows you to use third-party analytics services such as Google Analytics to understand our recommendations.
• It is essential for training our algorithms and improving our recommendation quality.

**It is essential that you activate the tracking functionality when you push the widgets into production**, if you want to make full and proper use of LiftIgniter.

For technical specifications of the underlying function, see our $p("track") documentation.

1. Tracking Widgets

Widgets can be tracked with track function of our SDK. Because the elements need to be ready before you can call track, the track function should be called inside the callback of a register command, as shown in the code snippet.

📘

Notes on function arguments

• elements: An array of DOM elements that you want tracked. Each tracked element should be the entire DOM element corresponding to a particular recommendation. E.g. in the mustache template in the previous section, the elements would match the selector ‘#li-recommendation-unit > div.recommended_item’.
• name: Name of the page area being tracked
• source: Name of algorithm active during this impression. Please use ‘LI’ for LiftIgniter.
• _debug: Optional, for help with testing. When true, alerts will appear for visible and click events on elements being tracked. **Please turn this off before pushing your code to production**.

JavaScript

$p('track', {
  	// track LI recommendations
		elements: document.querySelectorAll('#li-recommendation-unit > div.recommended_item'), // Change to the selector you are using in the rendered content
    name: 'your widget name',
    source: 'LI', // or base if you are tracking the base slice
    _debug : true  // Optional: show alerts on click or visible events. REMOVE this before pushing to production
});

JavaScript

// Example including $p('register')

// Register calls for different widgets.
$p('register', {
	max: 6, // Number of items you want to show
	widget: 'bottom-widget',
	opts : {},
	callback: function(resp) {
		var el = document.querySelector('#li-bottom-recommendation-unit');
		var template = document.querySelector('#li-bottom-recommendation-template').innerHTML;
		el.innerHTML = $p('render', template, resp);
    console.log("Debug was set to true; disable it in production!");
		$p('track', {
			elements: document.querySelectorAll('#li-bottom-recommendation-unit > div.recommended_item'), 
      name: 'bottom-widget',
			source: 'LI',
			opts: {},
			_debug : true
		});
  }
});

Note that elements field is the list of elements that contains the recommendation. Our tracking function identifies all the anchors within specified DOM and attaches listeners that will tell us what kind of recommendations the user have viewed, and take feedback from every click they make on them.

Source is the name of the algorithm that was used to create recommendation. For A/B testing, we use default name 'LI' for LiftIgniter and 'base' for your own algorithm. Any other name will be logged to our system. But won't be rendered instantly on the board until it is registered.

2. Testing that the right events are triggering

• When the items being rendered first enter the viewport, you should see an alert pop up saying something like "visible for default-widget:LI". This means that an event was triggered telling the LiftIgniter system that the items entered the viewport.
• If you click on any of the recommended items, you should see an alert pop up saying something like "click for default-widget:LI". This means that an event was triggered telling LiftIgniter that the user clicked on the recommendation. To make debugging easier, we recommend right-clicking so that you do not accidentally navigate away from the page.
• You can see the exact events that are being sent to LiftIgniter by going to your Network Panel in Chrome Developer Tools and filtering to petametrics.com. This will include both the widget-specific events and pageview and heartbeat events. For more background, see the Widget Events page, which builds on some other pages in the web debugging section.

❗️

Troubleshooting

• If you see the alert for click but not for visible, it could be that the alert for visible is being suppressed due to other console messages. For console testing, put the tracking logic outside the callback after registering and fetching the results.
• If you got the alerts for click and visible but did not see our tags in the URL after you clicked to it, this may be because your site automatically rewrites or strips off tags. This is not a problem for our tracking and training our algorithms, but it will make third-party verification of the numbers harder and means that some of the analytics we compute won’t be available.
• Please call the track function on a particular element at most once! Otherwise we might record multiple counts for every actual click and other events.

🚧

Turn off _debug before pushing to production!

Remember to turn off the _debug: true and any other console.log statements before pushing your code to production.