Link Search Menu Expand Document

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

(Optional) Step four: Set up a Zap that triggers when the event is emitted

You can hook this event up to anything! With our latest Zapier integration, you can set up a Zap to be triggered whenever a custom event is emitted. Many use-cases await – for example, you could feed all of the Viewed_product events into a chart that depicts the interest of all your products side-by-side.

All done!

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


Have any questions or comments about this post? Let us know! Your feedback is greatly appreciated.

Customer Fields is a Shopify app made by Helium.

Copyright © 2020 Helium Development, LLC