Description: 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. Only one visit tag is needed per website, and it must be implemented on all pages of your website 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 in a consistent way with the consent criteria.
Note: Action tags are optional and can be added once a response tag has been added. Using action tags varies depending on the partner and the terms of the agreement, so we cannot guarantee you will be able to implement action tags.
Adding a web tag in Shopify
This section explains the following:
- Adding the web tag
- Checking the web tag
Adding the web tag
- 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: - Within Shopify, navigate to Administration > Online Store > Themes.
- Within the kebab menu, select Edit Code.
- Select the theme file, usually named theme.liquid.
- Paste the InnovidXP website visit tag code at the bottom of the theme file code, for example:
- Select Save to save your changes. the changes by selecting the Save button.
Checking the web tag
- Refresh the Shopify page and preview the store.
- Right-click anywhere on the page to open the menu and select Inspect > Network.
- Type “TV2” into the Filter textbox and refresh the page.
- If it has been successfully added, 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. Using action tags varies depending on the partner and the terms of the agreement, so we cannot guarantee you will be able to implement action tags. Action tags fire on the page(s) they are placed while obeying the required opt-in/opt-out mechanisms.
Adding the action tag
- Log into your Shopify account.
Notes:
- 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 correspond to the client ID within 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:
Some more details about the action tag and placing it can also be found on that page. - Within Shopify, navigate to Administration > Online Store > Themes:
- Within the kebab menu, select Edit Code.
- Find the file where you want the action to be tracked, for example, the Contact Us form.
- Navigate to the code associated with the item where you would like the action to be tracked, for example, the Submit button.
- 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.
- 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:
<script>
function nameOfTheFunction(){
"Insert the pixel here"
}
</script> - Paste the copied action tag code within the function created in step 7.
- 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: - Select Save to save your changes.
Checking the action tag
- Navigate to the Shopify page where you added the action tag.
- Right-click anywhere on the page to open the menu and select Inspect > Network.
- Perform the action, for example, select the Submit button.
- The action tag should appear within the list of tags in the Network console.
- Select the Payload tab and scroll to the “cvar” field, where the action tag created above should be visible, for example:
Related content