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 abandoned checkouts or sync orders, 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 with the following integrated:

  • People Web SDK (opens in a new tab)
  • Shopify

  People is enabled by default with your account.

  If you do not have an Infobip 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

     To use this option, you must have a Shopify plan that supports it.

   • 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.

3. Track end user activity on your Shopify website.

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.

Track end user activity

Whenever an end user opens a page on your Shopify website, the Web SDK is loaded, and starts tracking their activity on the page.

For more information, refer to the People Web SDK (opens in a new tab) documentation.

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.