Track custom events from your Shopify Store with People

You can track end user activities on your Shopify Store by using People events. While some events, such as Track cart or Page view events, are tracked by default, tracking of custom events require manual set up.

This tutorial explains how to set up tracking of custom events from your Shopify Store. The tutorial uses the People Web SDK to integrate your Shopify Store with People. You can then track visitor behavior, manage attributes, and update end users' profiles.

Products and channels

• People

Prerequisites

• Infobip account

  People is enabled by default with your Infobip account.

  If you do not have an account, create a free trial account.

• A Shopify website for which you want to track events.

Process overview

To add the People Web SDK to your Shopify website, do the following:

1. Copy the People Web SDK code from People.

2. Add the code to each page of your Shopify website by using one of the following ways:

   • Modify the theme code of your Shopify Store.

     NOTE

     You cannot use this option if you are on the Shopify Starter plan.

   • Use Google Tag Manager to add the SDK as a Custom HTML tag and trigger it on All Pages.

   Use this option if your Shopify Store uses Google Tag Manager.

Implementation steps

Copy the People Web SDK code from People

1. On the Infobip web interface (opens in a new tab), go to People > Events > Web SDK tab.
2. Copy the JavaScript code that is displayed in the Track events with Web SDK section. The code is prepopulated with the API key for your account.

Example:

(function(e,t,n,o){e.PeopleEventsObject=o;e[o]=e[o]||{init:function(t){e[o].apiKey=t},
setPerson:function(t,n){e[o].person=t;e[o].personTtl=n},
forgetPerson:function(){e[o].toForgetPerson=true},
track:function(){(e[o].q=e[o].q||[]).push(arguments)},
updatePerson:function(t){e[o].personToUpdate={person:t}},
appendToList:function(t,n){e[o].attributeToAppend={attributeName:t,attribute:n}}};
var r=t.createElement("script");
var s=t.getElementsByTagName("script")[0];r.async=1;r.src=n;s.parentNode.insertBefore(r,s)})
(window,document,'https://s3.eu-central-1.amazonaws.com/portal-cdn-production/people-events-sdk/pe.latest-2.js','pe');
pe.init('Your API Key');

Add the code to your website through the Shopify Store

This section explains how to modify the theme code in your Shopify Store to add the People Web SDK code.

Do the following:

1. In your Shopify admin, go to Online Store > Themes > Edit code.

2. In the Layout folder, open the following file:

   theme.liquid

   This file controls the HTML structure of your Shopify Store website.

3. In the head tag, add the JavaScript code that you copied from People.

   

4. Save changes.

The People Web SDK is now included on all the web pages of the website.

Add the code to your website through Google Tag Manager

If your Shopify Store uses Google Tag Manager, you can add the People Web SDK as a Custom HTML tag and trigger it on All Pages.

Additional resources

For more information about the implementation and capabilities of the People Web SDK, refer to the People Web SDK (opens in a new tab) documentation on GitHub.