Handling Click-Tracking in API Setups with Clerk.js

Check the steps you need to follow to use Clerk.js to easily add click-tracking on API setups

Clerk.io uses click-tracking both to personalise results for visitors and to show the performance in my.clerk.io.

Follow these steps to set up click-tracking.

1. Assign Visitor ID’s

The first step is to give each visitor a unique ID. The simplest way to do this is by saving a unique, random, 8 letter string in a cookie. Only alpha-numeric strings up to 32 characters are allowed.

A visitor ID should only be unique to the device. Cross-device association is handled automatically by Clerk.io if we detect that a customer ID / email address is used with multiple visitor IDs.

Every time you make an API request you must send the visitor ID from the cookie as the visitor parameter.

When you have saved the visitor ID, configure Clerk.js to include it:

  <!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
  <script type="text/javascript">
    (function(w,d){
      var e=d.createElement('script');e.type='text/javascript';e.async=true;
      e.src=(d.location.protocol=='https:'?'https':'http')+'://cdn.clerk.io/clerk.js';
      var s=d.getElementsByTagName('script')[0];s.parentNode.insertBefore(e,s);
      w.__clerk_q=w.__clerk_q||[];w.Clerk=w.Clerk||function(){w.__clerk_q.push(arguments)};
    })(window,document);

    Clerk('config', {
      key: 'STyoUzAmh3JeZvw2LTOyo6CsUOPBtri5',
      visitor: '7t2i2H8l'
    });
  </script>
  <!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

2. Include Labels in API Calls

Since the Clerk.io dashboard allows you see the performance of each individual part of Search and Recommendations, you should always include the labels parameter in each call where you show results.

labels is a list containing at least 1 string, which is the name that will be shown when checking performance in my.clerk.io.

Full example call with visitor ID and labels:

curl -X POST \
     -H 'Content-Type: application/json' \
     -d '{"key": "STyoUzAmh3JeZvw2LTOyo6CsUOPBtri5",
          "visitor": "7t2i2H8l",
          "limit": 30,
          "labels": ["VisitorRecommendations"]}' \
     http://api.clerk.io/v2/recommendations/visitor/complementary

3. Add Click-Tracking

The click-tracking should be added to all products returned from Clerk.io.

Add data-clerk-product-id=“PRODUCT_ID” to the root element of all products returned from Clerk.io, where PRODUCT_ID is replaced by the actual ID of each product:

<ul class="product-list from-clerk">
  <li class="product" data-clerk-product-id="123">
    <a href="/green-lightsaber">
      <img src="/images/green-lightsaber.jpg" />
      Green Lightsaber
      <button>Add To Basket</button>
  </li>
  <li class="product" data-clerk-product-id="456">
    <a href="/super-death-star">
      <img src="/images/super-death-star.jpg" />
      Super Death Star
      <button>Add To Basket</button>
  </li>
</ul>

Clerk.js will automatically add click-tracking to those elements.

4. Add Sales-Tracking

Finally, if you have not already set it up, you need to track the sales coming from the webshop.

Simply add the following snippet to your Order Success page, and make sure Clerk.js is available on the page:

<script type="text/javascript">
   Clerk("call",
	 "log/sale",
	 {
	   key: "0bi730epQAlK3Md0nAzzM78zNoEcq5KT",
	   sale: "123456",
	   email: "luke@skywalker.com",
	   customer: "5555",
	   products: [
               {
                  "id": 5528,
	          "quantity": 1,
	  	  "price": 99.95
               },
	       {
	          "id": 2952,
	          "quantity": 2,
	    	  "price": 9.50
               }
	    ]
	 }
   );
  </script>

There! Now you have click-tracking running in your API setup.