Click Tracking

Tracking what products from Clerk.io consumers actually click on is the cornerstone of our AIs feedback loop and analytics dashboard.

Any template rendered via Clerk.js has click tracking on all products by default.

If you have rendered HTML via server-side API calls you can still use Clerk.js to add click tracking by doing the following:

1. For each root element of a product add the attribute data-clerk-product-id containing the products ID.
2. After the page has loaded make the following JavaScript call Clerk("click", "*[data-clerk-product-id]");.

This will add click tracking to any clickable element in the rendered products.

<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>
<script>
  Clerk("click", "*[data-clerk-product-id]");
</script>