Link

Tracking product views

Estimated time to implement: 15 minutes, difficulty: 2/10

In this example, we’ll demonstrate how to use customer events to track product views form the storefront.

Step one: render the snippet

Navigate to layout/theme.liquid in your theme editor, then add the following code inside the <head> tag:

{% render 'customer-fields', customer_api: true, version: '<Version number>' %}

Step two: add code to the product template

When customers view products on your store, they will visit the product template. For most storefronts this will be located at templates/product.liquid. Find your product template, then add this code to the top of it:

<script>
  // When the JavaScript API is ready for use,
  CF.customerReady(function() {
    // Emit our custom event with the product information.
    CF.customer.emit('Viewed product', {
      handle: "{{ product.handle }}",
      title: "{{ product.title }}"
    });

    // Feel free to add more key/value pairs to fit your use case better!
  });
</script>

Step three: verify the solution works

Login as a customer on your storefront, then view a product. Then, navigate to Customer Fields and view your customer in the directory. Under the “Events” card on the right-hand side, you should see an event titled “Viewed product”, along with the handle and title of the product viewed when you click the event. It should look something like this:

product track event example

All done!

You’re good to go! Now you can track the products that your customers view, all with 9 lines of code.