# 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 [#products-channels]

- [People](https://www.infobip.com/docs/people)

## Prerequisites

- **Infobip account** with the following integrated:
    - [People Web SDK](https://github.com/infobip/people-web-sdk)
    - [Shopify](https://www.infobip.com/docs/integrations/shopify)

  [People](https://www.infobip.com/docs/people) is enabled by default with your account.

  If you do not have an Infobip account, [create a free trial account](https://www.infobip.com/docs/essentials/getting-started/create-an-account).

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

## Process overview [#process-overview]

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

1. [Copy the People Web SDK code](https://www.infobip.com/docs/tutorials/track-custom-events-from-shopify-store-with-people#copy-the-people-web-sdk-code-from-people) from People.
2. Add the code to each page of your Shopify website by using one of the following ways:

    - [Modify the theme code](https://www.infobip.com/docs/tutorials/track-custom-events-from-shopify-store-with-people#implementation-add-code-through-shopify) of your Shopify Store.

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

    - [Use Google Tag Manager](https://www.infobip.com/docs/tutorials/track-custom-events-from-shopify-store-with-people#implementation-add-code-through-gtm) 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](https://www.infobip.com/docs/tutorials/track-custom-events-from-shopify-store-with-people#implementation-track-end-user-activity) on your Shopify website.

## Implementation steps [#implementation-steps]

### Copy the People Web SDK code from People

1. On the [Infobip web interface](https://portal.infobip.com/login), 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:

  ```javascript showLineNumbers copy filename="javascript"
  (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 [#implementation-add-code-through-shopify]

Note
If your Shopify plan does not support this option, use either Google Tag Manager or a third-party custom code application.

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 [#implementation-add-code-through-gtm]

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 [#implementation-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](https://github.com/infobip/people-web-sdk?tab=readme-ov-file#track-visitor-behavior) documentation.

## Additional resources [#additional-resources]

For more information about the implementation and capabilities of the People Web SDK, refer to the [People Web SDK](https://github.com/infobip/people-web-sdk) documentation on GitHub.