Shopify Integration Overview

Purpose

This article describes the steps to add InnovidXP response and action tags within Shopify. 

InnovidXP’s JavaScript-based web tag measures total visits to a website. You need only one visit tag per website, and you must implement it on all pages to measure total visits. The web and action tags fire on the page(s) they are placed while obeying the required opt-in/opt-out mechanisms. Any comparison of web volumes and Google Analytics is on a like-for-like basis, as the tag is intended to interact consistently with the consent criteria.

Note: Action tags are optional and can be added once a response tag has been added. Action tag availability varies by partner and agreement terms, so we cannot guarantee you will be able to implement them.

Adding a web tag in Shopify

This section explains the following:

• Adding the web tag
• Checking the web tag

Adding the web tag

1. Login to your Shopify account.
   
   Note: Ensure you are also logged into the Innovid platform and have copied the InnovidXP web tag code. (Navigate to Data > Responses > InnovidXP Tracker Instructions and select Response tracking - Step 1  > Desktop & Mobile website and copy the code, as shown below).
   
   Visit tag code:
   
   
    
2. Within Shopify, navigate to Administration > Online Store > Themes.
   
   
    
3. Within the ellipsis menu, select Edit Code.
   
   
   
   
4. Select the theme file, usually named theme.liquid.
   
   
    
5. Paste the InnovidXP website tag code at the bottom of the theme file Code, for example:
   
    
    
6. Select Save to save your changes. 
   
   
    

Checking the web tag

1. Refresh the Shopify page and preview the store.
2. Right-click anywhere on the page to open the menu and select Inspect > Network.

3. Type “TV2” into the Filter textbox and refresh the page. 

   If it was added successfully, you will see the tag listed with the associated collector ID.
   
   

Adding an action tag in Shopify

This section explains the following:

• Adding the action tag
• Checking the action tag

Action tags are optional and can be added once a response tag has been added. How you use action tags varies by partner and agreement terms, so we cannot guarantee you will be able to implement them. Action tags fire on the page(s) they are placed while obeying the required opt-in/opt-out mechanisms.

Adding the action tag

1. Log into your Shopify account.
   Note:
   • A response tag must be implemented before an action tag can be added. To check if you have an existing response tag, follow the steps in the section Checking the tag. The collector ID shown should match the client ID in the InnovidXP platform.
   • Ensure you are also logged into the Innovid platform and have copied the InnovidXP action tag code (Navigate to Data > Responses > InnovidXP Tracker Instructions and select Action tracking > Step 2 > Desktop & Mobile website and copy the code as shown below).
     
     Action tag code:
     
     
     More details about the action tag and its placement can also be found on that page.
2. Within Shopify, navigate to Administration > Online Store > Themes:
   
   
    
3. Within the ellipsis menu, select Edit Code.
   
   
   
   
4. Find the file where you want to track the action, for example, the Contact Us form.
5. Navigate to the code for the item where you want to track the action, for example, the Submit button.
6. Add the onclick event to the button code and name the function, for example, ‘contactusactiontag’. This function name cannot contain any spaces or special characters.
   
   
    
7. Create a script tag below the code block that contains the above onclick event function and add a function with the same name as in the previous step, for example, ‘contactusactiontag’, within this script.  You can use the following template:
   
   
   
8. Paste the copied action tag code within the function created in step 7.

9. Modify the parameter  <ACTIONNAME> to reflect what is going to be tracked, for example:  
   Change the following var actionname = '<ACTIONNAME>'; to var actionname = 'contactus';
   
   Note: The action name cannot contain spaces or special characters. If extra values are needed, replace the <PLACEHOLDER> within the tag parameters with your internal code. If these are unnecessary, replace the <PLACEHOLDER> with an empty string.
   
   Parameters

   Details	How to track
   <USERREF>	An internal user ID
   <ACTIONNAME>	The name of the action - this must be included
   <REVENUE>	Any revenue generated by the action
   <PRODUCT>	The product name for the action - a maximum of 15
   <ACTIONID>	An internal ID for the action, for example, the order number
   <PROMOCODE>	The promo code for the action, if applicable

   
   The added code should look similar to the following:
   
   
    

10. Select Save to save your changes.

Checking the action tag

1. Navigate to the Shopify page where you added the action tag.
2. Right-click anywhere on the page to open the menu and select Inspect > Network.

3. Perform the action (for example, select the Submit button).

   The action tag should appear within the list of tags in the Network console.

4. Select the Payload tab and scroll to the “cvar” field, where the action tag created above should be visible, for example:
   
   

Related content

App Integrations