Instructions for Implementing Resonate Site Tag in Shopify

Follow these steps to add the Resonate Site Tag to your Shopify store:

1. Access Shopify Settings:

• Log in to your Shopify account.
• From the Shopify admin dashboard, navigate to the Settings section, typically located at the bottom left of the interface.

2. Navigate to Custom Events:

• Within the Settings menu, find and select Custom Events. This is where you'll manage and configure your store’s custom tracking pixels

3. Add a New Custom Pixel:

• In the Custom Events section, click on Add Custom Pixel. This option will allow you to create a new custom pixel for tracking specific events on your site.

4. Insert Resonate Site Tag:

• Copy the Resonate site tag JavaScript code from the Resonate Ignite platform.
• Paste this code into the appropriate field within the custom pixel setup.
• Click on Save button on the top

5. Connect the Resonate Site Tag to the Shopify site:

• Click connect at the bottom of the screen to apply the Resonate Site Tag to the Shopify site.

Your custom pixel should now be active and tracking the top line website visitation on your Shopify store.

Implementing the Track method Strategy in Shopify:

The resonateAnalytics.track method is used for capturing and sending user actions, product details, and other relevant data from your Shopify store to the Resonate Ignite Platform. This method allows you to track various events, such as adding items to the cart, and pass along specific information like product names and types as a key-value pair.

Basic Syntax

The general syntax for using the resonateAnalytics.track method is as follows:

resonateAnalytics.track('Event Name', {

'Parameter' : 'Value'

 });

Using Shopify's Built-in Standard and DOM Events

Shopify provides a set of built-in standard events that you can leverage to track user interactions on your store. These events cover a wide range of actions, such as viewing a cart, starting checkout, adding products to a cart, and more. To utilize these events, you can subscribe to them using the analytics.subscribe method.

Please refer to these Shopify support articles for more information: https://shopify.dev/docs/api/web-pixels-api/standard-events
https://shopify.dev/docs/api/web-pixels-api/dom-events

Here are some examples of the key standard events from the Shopify documentation:

• cart_viewed: Logs an instance where a customer visited the cart page.
• checkout_address_info_submitted: Logs when a customer submits their address during checkout.
• checkout_completed: Logs when a customer completes a purchase.
• checkout_contact_info_submitted: Logs when a customer submits their contact information during checkout.
• checkout_shipping_info_submitted: Logs when a customer submits their shipping information.
• checkout_started: Logs when a customer starts the checkout process.
• collection_viewed: Logs when a customer views a product collection.
• page_viewed: Logs when a customer views a specific page.
• payment_info_submitted: Logs when a customer submits their payment information.
• product_added_to_cart: Logs when a customer adds a product to their cart.
• product_removed_from_cart: Logs when a customer removes a product from their cart.
• product_viewed: Logs when a customer views a product detail page.
• search_submitted: Logs when a customer performs a search on the storefront.

DOM Events

In addition to standard events, Shopify also provides DOM events, which allow you to track specific interactions on your store at the DOM (Document Object Model) level. These include actions such as clicking on a page element, submitting a form, and interacting with input fields.

Here are some key DOM events:

• clicked: The clicked event logs an instance where a customer clicks on a page element.
• form_submitted: The form_submitted event logs an instance where a form on a page is submitted.
• input_focused: The input_focused event logs an instance where an input on a page gains focus.
• input_blurred: The input_blurred event logs an instance where an input on a page loses focus.
• input_changed: The input_changed event logs an instance where an input value changes.

After subscribing to a specific event, you can then call the ResonateAnalytics.track method from within that subscription event code to capture and send the appropriate information.

Example: Subscribing to a Standard Event and Using the ResonateAnalytics.track Method

After subscribing to a specific event, such as cart_viewed, you can then call the ResonateAnalytics.track method to capture and send relevant information. Below is an example of how you can implement this, the specifics of what subscription event objects to call will depend on your needs and requirements:

analytics.subscribe('cart_viewed', (event) => {

resonateAnalytics.track('View Cart', {

'Funnel Event': 'View Cart',

'Cart Product Category': event.data.cart.lines[0]?.merchandise.product.title

});

});

Explanation

• Subscribing to Event: The analytics.subscribe(‘cart_viewed', function(event) {...}); code subscribes to the cart_viewed event, which triggers when a customer views/open their cart.
• Tracking the Event: Once the event is triggered, the ResonateAnalytics.track method is called to send the event data to the Resonate Ignite Platform. In this case, it tracks the user action ("View Cart") and captures the product type of the first item in the cart. The “[0]?” code in the event snippet identifies the first item in the cart, and this code can be adapted to your measurement needs.

NOTE:

Please be sure to not pass any PII about shoppers to Resonate.  Additionally, do not send individual transaction level details like the exact shopping cart value.  Resonate reporting requires approximately 5,500 events per tracking value in order to be reportable for insights in the platform.  Highly unique details like exact shopping cart values or other details like a unique customer ID will not hit enough sample to be reportable.