How to Instrument Piano Content Clicks from a 3rd Party Analytics Systems

Just like Cxense, any company that collects analytics data do so by having the customer deploy an analytic script to their pages. With their script in place a large variety of data can be harvested, among them, the page url and all its parameters.

One way to pass on information to an analytic system is by attaching information to a page link by adding extra url parameters. For instance, the link http://server.domain/page.html?myExtraParameter=myMessage would cary the information myMessage to anyone checking for the parameter value of myExtraParameter.

We will now see how we can use this technique to provide 3rd party analytic systems with the information they need for instrumenting the Cxense Content Recommendation performance. Let use the default Content Recommendation widget template as the starting point.

<!-- Example template (change width and height to reasonable values) -->
<!--%
var items = data.response.items;
for (var i = 0; i < items.length; i++) {
  var item = items[i];
  %-->
  <div class="item">
    <a class="allclick" tmp:id="{{cX.clickTracker(item.click_url)}}" tmp:href="{{item.url}}" tmp:target="_top">
      <!--%
      cX.renderContainedImage({
        container: { width: 321, height: 160 },
        image: { src: item.dominantthumbnail, dimensions: item.dominantthumbnaildimensions }
      });
      %-->
      <h3>{{item.title}}</h3>
    </a>
  </div>
  <!--%
}
%-->

Each item that is processed in the for-loop is a content recommendation with a title (item.title), an url (item.url), etc. One such property will be the click_url (item.click_url) which is the link that will be used for going to the next page if anyone were to click on the content recommendation.

If we know what url parameter a particular third party analytic system is listening to, then we can add it to the click url that comes with the content recommendation item as shown in the javascript and html fragments below. Additional parameters can be added using the '&' character as a separator.

var item = items[i];
var has_query_string = (item.click_url.indexOf("?") != -1);
var modified_click_url = item.click_url + (has_query_string ? "&" : "?") + 'cx_campaign=spring_campaign' + '&cx_additional_param=42';

<a class="allclick" tmp:id="{{cX.clickTracker(modified_click_url)}}" tmp:href="{{item.url}}" tmp:target="_top">

Notice how we in this example are adding the parameter cx_campaign with value spring_campaign to the new variable modified_click_url which is then passed on to the Cxense library function cX.clickTracker(). We are also checking if the click_url already had a query string to add the correct initial separator character.

Last updated: June 23, 2026