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

Like Piano, any company that collects analytics gathers data by having customers deploy an analytics script on their pages. With the script in place, it can collect a wide range of data, including the page URL and its parameters.

One way to send information to an analytics system is to add extra URL parameters to a page link. For example, the link http://server.domain/page.html?myExtraParameter=myMessage carries the value myMessage for the parameter myExtraParameter.

Below we show how to use this technique to provide third-party analytics with the data they need to instrument Piano Content Recommendation performance. 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 processed in the for-loop is a content recommendation with a title (item.title), a URL (item.url), and other properties. One property is click_url (item.click_url), the link used to navigate to the next page when a user clicks the recommendation.

If we know which URL parameter a third-party analytics system expects, we can append it to the recommendation's click_url as shown in the JavaScript and HTML examples below. Add additional parameters using '&' 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 that in this example we add the parameter cx_campaign with value spring_campaign to the variable modified_click_url, which we then pass to the Piano Content library function cX.clickTracker(). We also check whether the click_url already contains a query string so we use the correct separator.

Last updated: September 10, 2026