If you are using Shopify, an eCommerce platform used to set up your online store and sell products worldwide, then you can effortlessly add the PageSense snippet code on your Shopify websites and start tracking visitor data with a few simple clicks, without the need to add the code manually. Once after you successfully install the PageSense code, you can run experiments and optimize your web pages through the diverse set of services that PageSense offers, such as heatmap, session recordings, A/B testing, funnel analysis, and more. Furthermore, PageSense also allows you to integrate with traditional analytics tools like Google Analytics to get more in-depth insights about your website's performance.

Important: Shopify doesn't allow third-party scripts in the Checkout. You will only be able to track your Storefront and your Order Confirmation page when PageSense code is installed.

To install the Zoho PageSense code on all the pages of your Shopify

Note: Some themes will use the tag {/head}, [/header], or other variations of [/head]. All of these will work in the same way.

To install the PageSense code in the checkout page of your Shopify site

1. Click on Settings > Customer Events > Add Custom Pixel.



2. Add the below mentioned codes inside your Custom Pixel to begin tracking of your site.

Replace <SNIPPET_SRC> with the PageSense tracking snippet from the related Project you wish to track your Shopify site.

Replace the <CHECKOUT-EVENT> with the event name of your goal.

1. // For tracking the Purchase event and Revenue Goal
2. analytics.subscribe('checkout_completed', (event) => {
3.     const checkout = event.data.checkout;
4.     const checkoutTotalPrice = checkout.totalPrice?.amount;
5.     // Use the Revenue Goal code, and replace REVENUE-GOAL-ID below
6.     window.pagesense = window.pagesense || [];
7.     window.pagesense.push(['trackRevenue', '<REVENUE-GOAL-ID>', (checkoutTotalPrice * 100)]);
   

Replace the <REVENUE-GOAL-ID> with the revenue goal ID.

This a sample screenshot of your revenue goal ID:

Info: To ensure that the script is working correctly, clear your browser cache.

Note that the verification message will not show up in your browser window, if your web page loads for more than 10 seconds. However, in such instances, the PageSense code snippet status will be successful at the back-end and be ready to track visitors' data on your website.

To manually verify the presence of the code on your site:
1. Click the Project Settings on the top bar, go to Project Info tab and copy the Project Key given on the page.

2. Open your website on a browser, right-click on the page and choose Inspect from the menu.

3. Now, click the Network tab and paste the Project key within the Filters textbox as shown in the figure.

4. Once you enter the Project key, refresh and the same should reflect as a Java script in the first place as shown below.