Google Tag Manager Shopify & Shopify Plus Direct Installation
Where to install the code?
The JavaScript Tag should be installed on all pages of the website. This is to ensure that our code is on all pages necessary for data and analytics collection, and to run your campaign effectively. A common placement is within the footer code, especially if your footer is present on all pages. This code is asynchronous and will only load after the rest of your page fully loads.
Google Tag Manager Installation Instructions
Option 1: Custom HTML
1. Open the file “CybbaJSTag” and copy the entire code. Click the TAGS section on the left hand side navigation bar, then click NEW.
2. Click in the Tag Configuration section, and scroll down to Custom HTML. Paste the code in the Custom HTML box and set the trigger rules to All Pages.
3. Name the tag and save your changes. Finally, click SUBMIT in the top right corner, and PUBLISH the tag.
Option 2: Tag Templates
1. Understanding Google Tag Manager Templates
2. Accessing and Choosing Templates
3. Configuring the Template
4. Publishing the Template
After Installation
Once your code has been installed, please contact your Account Representative to evaluate whether the integration has been completed successfully. Your representative may also ask that Cybba’s technical team perform a test purchase on the site to complete the configuration.
If you need further assistance, please contact your Cybba representative, or reach out to tagsupport@cybba.com.
The JavaScript Tag should be installed on all pages of the website. This is to ensure that our code is on all pages necessary for data and analytics collection, and to run your campaign effectively. A common placement is within the footer code, especially if your footer is present on all pages. This code is asynchronous and will only load after the rest of your page fully loads.
Google Tag Manager Installation Instructions
Option 1: Custom HTML
1. Open the file “CybbaJSTag” and copy the entire code. Click the TAGS section on the left hand side navigation bar, then click NEW.
2. Click in the Tag Configuration section, and scroll down to Custom HTML. Paste the code in the Custom HTML box and set the trigger rules to All Pages.
3. Name the tag and save your changes. Finally, click SUBMIT in the top right corner, and PUBLISH the tag.
Option 2: Tag Templates
For more details, you can find the complete guide on our Confluence page.
1. Understanding Google Tag Manager Templates
- Purpose: Templates in GTM are pre-configured setups for common tags. They simplify the process of setting up tracking, marketing, or analytics functionalities.
- Types: There are two main types of templates in GTM - tag templates and variable templates. Tag templates are for third-party services like Google Analytics, while variable templates are used for custom data retrieval.
2. Accessing and Choosing Templates
- Accessing: To access templates, you need to log into your GTM account, select a container, and navigate to the TEMPLATES section.
- Choose Cybba: When using GTM templates, you can search for “Cybba” in the SEARCH GALLERY section and add it to your workspace. The gallery offers templates for various third-party services.
3. Configuring the Template
- Setting Up: Once a template is added, you can follow these steps to implement our tag:
- Create a new tag and name it "Cybba Container Tag".
- Click on TAG CONFIGURATION and select CYBBA.
- Enter the provided CYBBA SITE ID.
- Click on TRIGGERING and select ALL PAGES
4. Publishing the Template
- Version Control: GTM keeps track of changes in versions. When you’re ready to go live, create a new version.
- Publishing: Publish the new version to make your template active on your website..
Please ensure that all tags are properly configured to comply with local privacy laws. It is important to follow your site's consent manager configuration in order to meet the necessary requirements.
After Installation
Once your code has been installed, please contact your Account Representative to evaluate whether the integration has been completed successfully. Your representative may also ask that Cybba’s technical team perform a test purchase on the site to complete the configuration.
If you need further assistance, please contact your Cybba representative, or reach out to tagsupport@cybba.com.
Shopify Extensibility Tag Installation
Main Site Installation
The JavaScript tag is unique to your Site, the below script is just an example. Do not use it; your Onboarding Manager will provide you with your own unique script
Direct placement
From your Shopify dashboard navigate to Online Store > Themes >> click Actions dropdown menu > select EDIT CODE > find the theme.liquid file.
Placing our Tag here ensures our code is on all the necessary pages we need to capture information
Where to Install the Code
The simplest placement for the JavaScript is right above the closing </body> tag in the files we request you to place it
In the theme.liquid file, add the JavaScript right above the closing </body> tag so that our code will be placed on all pages outside of the Checkout Funnel.
Or if the website utilizes Google Tag Manager, please reference the Google Tag Manager Instructions tab above
Extensibility Installation
The Shopify Extensibility tag is unique to your Site, the below script is just an example. Do not use it; your Onboarding Manager will provide you with your own unique script
Extensibility Placement Location
From your Shopify dashboard navigate to Settings > Customer Events > click Add Custom Pixel > name the custom pixel.
Placing our Tag here ensures our code is on all the necessary pages we need to capture information
Extensibility Privacy Settings
Please arrange the privacy settings as below in order to make sure we are capturing data in agreement with current regulations.
Where to Install the Code
This will be a simple copy and paste unless experienced with modifying Shopify extensibility code.
1. Right below the privacy settings you’ll find a text box with some example code.
2. Copy the extensibility code Cybba sent into this box.
3. Save the code. The button is on the top right of the window.
4. Click the connect button either above or below the code editor box.
5. Confirm the connection.
Installation Support
If you need further assistance, please contact your Cybba representative and we’ll arrange a call to guide your team through installation with a member of our technical team.
Direct placement
1. From your Shopify dashboard navigate to Online Store >> Themes >> click the Actions dropdown menu >> select EDIT CODE >> find the theme.liquid file. Placing our tag here ensures that our code is on all the necessary pages we need to capture information.
Where to install the code?
The simplest placement for the Javascript is right above the closing </body> tag in the files we request you to place it.
2. In the theme.liquid file, add the JavaScript right above the closing </body> tag so that our code will be placed on all pages outside of the checkout funnel.
3. If you are running Shopify Plus, find the checkout.liquid file (Note: if you do not have Shopify Plus skip to the next step, you will not have a checkout.liquid file). Add the JavaScript right above the closing </body> tag so that our code will be placed on all pages throughout the checkout process.
Placing the Javascript on the Confirmation Page
1. From your Shopify dashboard navigate to Settings >> Checkout.
2. Scroll about halfway down the page to find the Additional Scripts text box. Paste Cybba’s tag into this box, you can add it at the bottom or top just make sure it does not interfere with any other code that may be there already. Adding the code to this text box will ensure the JavaScript is placed on the Confirmation/Thank you page.
If you need further assistance, please contact your Cybba representative, or reach out to tagsupport@cybba.com.
Main Site Installation
The JavaScript tag is unique to your Site, the below script is just an example. Do not use it; your Onboarding Manager will provide you with your own unique script
Direct placement
From your Shopify dashboard navigate to Online Store > Themes >> click Actions dropdown menu > select EDIT CODE > find the theme.liquid file.
Placing our Tag here ensures our code is on all the necessary pages we need to capture information
Where to Install the Code
The simplest placement for the JavaScript is right above the closing </body> tag in the files we request you to place it
In the theme.liquid file, add the JavaScript right above the closing </body> tag so that our code will be placed on all pages outside of the Checkout Funnel.
Or if the website utilizes Google Tag Manager, please reference the Google Tag Manager Instructions tab above
Extensibility Installation
The Shopify Extensibility tag is unique to your Site, the below script is just an example. Do not use it; your Onboarding Manager will provide you with your own unique script
analytics.subscribe('page_viewed', (event) => {
window.CYBurl = event.context.window.location.href;
if(document.cookie.replace(/(?:(?:^|.*;\s*)cart\s*\=\s*([^;]*).*$)|^.*$/, "$1") != ""){
window._vteq = window._vteq || [];
_vteq.push({
"update":{
"_vtsid": document.cookie.replace(/(?:(?:^|.*;\s*)cart\s*\=\s*([^;]*).*$)|^.*$/, "$1")
}});
}
!function(){if(!document.querySelector("[src*='XXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXX']")){window.e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="//www.rtb123.com/tags/XXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXX/btp.js";window.t=document.getElementsByTagName("head")[0];t?t.appendChild(e,t):(t=document.getElementsByTagName("script")[0]).parentNode.insertBefore(e,t)}}();
});
analytics.subscribe('checkout_completed', (event) => {
window.checkoutData = event.data.checkout;
window.orderedItems = event.data.checkout.lineItems;
window.cybOrderData = {
order_id: checkoutData.order.id,
value: checkoutData.totalPrice.amount,
currency: checkoutData.totalPrice.currencyCode,
productTitles: [],
itemData: []
};
orderedItems.forEach(function(element){
cybOrderData.itemData.push({ 'quantity': element.quantity, 'id': element.variant.sku });
cybOrderData.productTitles.push(element.title);
})
window._vteq = window._vteq || [];
window._vteq.push({
confirmation: {
items: cybOrderData.itemData,
orderId: cybOrderData.order_id,
total: cybOrderData.value,
generic: {
currency: cybOrderData.currency
}
}
});
});
analytics.subscribe('checkout_started', (event) => {
window.checkoutStep = event.name;
window.checkoutItems = event.data.checkout.lineItems;
window.checkoutTotal = event.data.checkout.subtotalPrice;
window.email = event.data.checkout.email;
window.cItems = [];
checkoutItems.forEach(function(element){
cItems.push(element.variant.sku);
})
window._vteq = window._vteq || [];
window._vteq.push({
checkout: {
step: checkoutStep,
items: cItems
}
});
window._vteq.push({
login: {
email: email
}
});
_vteq.push({
'event': {
'event_name': 'abandonmentTotal',
'total': checkoutTotal
}
});
});
analytics.subscribe('checkout_address_info_submitted', (event) => {
window.checkoutStep = event.name;
window.checkoutItems = event.data.checkout.lineItems;
window.checkoutTotal = event.data.checkout.subtotalPrice;
window.email = event.data.checkout.email;
window.cItems = [];
checkoutItems.forEach(function(element){
cItems.push(element.variant.sku);
})
window._vteq = window._vteq || [];
window._vteq.push({
checkout: {
step: checkoutStep,
items: cItems
}
});
window._vteq.push({
login: {
email: email
}
});
_vteq.push({
'event': {
'event_name': 'abandonmentTotal',
'total': checkoutTotal
}
});
});
analytics.subscribe('checkout_contact_info_submitted', (event) => {
window.checkoutStep = event.name;
window.checkoutItems = event.data.checkout.lineItems;
window.email = event.data.checkout.email;
window.checkoutTotal = event.data.checkout.subtotalPrice;
window.cItems = [];
checkoutItems.forEach(function(element){
cItems.push(element.variant.sku);
})
window._vteq = window._vteq || [];
window._vteq.push({
checkout: {
step: checkoutStep,
items: cItems
}
});
window._vteq.push({
login: {
email: email
}
});
_vteq.push({
'event': {
'event_name': 'abandonmentTotal',
'total': checkoutTotal
}
});
});
analytics.subscribe('checkout_shipping_info_submitted', (event) => {
window.checkoutStep = event.name;
window.checkoutItems = event.data.checkout.lineItems;
window.checkoutTotal = event.data.checkout.subtotalPrice;
window.email = event.data.checkout.email;
window.cItems = [];
checkoutItems.forEach(function(element){
cItems.push(element.variant.sku);
})
window._vteq = window._vteq || [];
window._vteq.push({
checkout: {
step: checkoutStep,
items: cItems
}
});
window._vteq.push({
login: {
email: email
}
});
_vteq.push({
'event': {
'event_name': 'abandonmentTotal',
'total': checkoutTotal
}
});
});
analytics.subscribe('cart_viewed', (event) => {
window.totalCartCost = event.data.cart.cost.totalAmount.amount;
window.cartItems = event.data.cart.lines;
window.pItems = [];
_vteq.push({
'event': {
'event_name': 'abandonmentTotal',
'total': totalCartCost
}
});
cartItems.forEach(function(element){
pItems.push({ 'ProductName': element.merchandise.product.title, 'Quantity': element.quantity, 'ProductImage': element.merchandise.image, 'ProductPrice': element.merchandise.price.amount, 'ProductSubtotal': element.cost, 'ProductSKU': element.merchandise.sku, 'ProductVariantName': element.merchandise.title, 'ProductVendor': element.merchandise.product.vendor, 'ProductType': element.merchandise.product.type, 'ProductURL': element.merchandise.product.url });
})
_vteq.push({
'event': {
'event_name': 'cart',
'items': pItems,
'shopifyCartID': event.data.cart.id
}
});
});
analytics.subscribe('product_added_to_cart', (event) => {
window.itemAddedSKU = event.data.cartLine.merchandise.sku;
window._vteq = window._vteq || [];
window._vteq.push({
addtocart: {
itemId: itemAddedSKU
}
});
});
analytics.subscribe('search_submitted', (event) => {
window.searchQuery = searchResult.query;
window._vteq = window._vteq || [];
window._vteq.push({
"search": {
query: searchQuery
}
});
});
analytics.subscribe('product_viewed', (event) => {
window.productSKU = event.data.productVariant.sku;
window._vteq = window._vteq || [];
window._vteq.push({
"viewitem": {
itemId: productSKU
}
});
});
analytics.subscribe('input_blurred', (event) => {
window.element = event.data.element;
window.elementValue = element.value;
if(!!~elementValue.indexOf("@")){
window._vteq = window._vteq || [];
window._vteq.push({
login: {
email: elementValue
}
});
}
});
Extensibility Placement Location
From your Shopify dashboard navigate to Settings > Customer Events > click Add Custom Pixel > name the custom pixel.
Placing our Tag here ensures our code is on all the necessary pages we need to capture information
Extensibility Privacy Settings
Please arrange the privacy settings as below in order to make sure we are capturing data in agreement with current regulations.
Where to Install the Code
This will be a simple copy and paste unless experienced with modifying Shopify extensibility code.
1. Right below the privacy settings you’ll find a text box with some example code.
2. Copy the extensibility code Cybba sent into this box.
3. Save the code. The button is on the top right of the window.
4. Click the connect button either above or below the code editor box.
5. Confirm the connection.
Installation Support
If you need further assistance, please contact your Cybba representative and we’ll arrange a call to guide your team through installation with a member of our technical team.
Direct placement
1. From your Shopify dashboard navigate to Online Store >> Themes >> click the Actions dropdown menu >> select EDIT CODE >> find the theme.liquid file. Placing our tag here ensures that our code is on all the necessary pages we need to capture information.
Where to install the code?
The simplest placement for the Javascript is right above the closing </body> tag in the files we request you to place it.
2. In the theme.liquid file, add the JavaScript right above the closing </body> tag so that our code will be placed on all pages outside of the checkout funnel.
3. If you are running Shopify Plus, find the checkout.liquid file (Note: if you do not have Shopify Plus skip to the next step, you will not have a checkout.liquid file). Add the JavaScript right above the closing </body> tag so that our code will be placed on all pages throughout the checkout process.
Placing the Javascript on the Confirmation Page
1. From your Shopify dashboard navigate to Settings >> Checkout.
2. Scroll about halfway down the page to find the Additional Scripts text box. Paste Cybba’s tag into this box, you can add it at the bottom or top just make sure it does not interfere with any other code that may be there already. Adding the code to this text box will ensure the JavaScript is placed on the Confirmation/Thank you page.
If you need further assistance, please contact your Cybba representative, or reach out to tagsupport@cybba.com.
Direct placement
1. If you are planning to install the Cybba JavaScript directly, please follow the instructions below. If you are using a Tag Manager, please skip to the Tag Manager Installation Instructions in the first tab.
Where to install the code?
The JavaScript Tag should be installed on all pages of the website. This is to ensure that our code is on all pages necessary for data and analytics collection, and to run your campaign effectively. A common placement is within the footer code, especially if your footer is present on all pages. This code is asynchronous and will only load after the rest of your page fully loads.
2. Open the file labelled “CybbaJSTag” provided to you by your Cybba Account Representative and copy and paste the code into your site footer. This should allow the JavaScript to be installed across all site pages if there is a shared footer. If you have pages which do not use your footer, manually install the JavaScript on these pages as well. If footer installation is not possible, install the code near the bottom of the HTML above the end </BODY> tag.
After Installation
Once your code has been installed, please contact your Account Representative to evaluate whether the integration has been completed successfully. Your rep may also ask that Cybba’s technical team perform a test purchase on the site to complete the configuration.
If you need further assistance, please contact your Cybba representative, or reach out to tagsupport@cybba.com.
1. If you are planning to install the Cybba JavaScript directly, please follow the instructions below. If you are using a Tag Manager, please skip to the Tag Manager Installation Instructions in the first tab.
Where to install the code?
The JavaScript Tag should be installed on all pages of the website. This is to ensure that our code is on all pages necessary for data and analytics collection, and to run your campaign effectively. A common placement is within the footer code, especially if your footer is present on all pages. This code is asynchronous and will only load after the rest of your page fully loads.
2. Open the file labelled “CybbaJSTag” provided to you by your Cybba Account Representative and copy and paste the code into your site footer. This should allow the JavaScript to be installed across all site pages if there is a shared footer. If you have pages which do not use your footer, manually install the JavaScript on these pages as well. If footer installation is not possible, install the code near the bottom of the HTML above the end </BODY> tag.
After Installation
Once your code has been installed, please contact your Account Representative to evaluate whether the integration has been completed successfully. Your rep may also ask that Cybba’s technical team perform a test purchase on the site to complete the configuration.
If you need further assistance, please contact your Cybba representative, or reach out to tagsupport@cybba.com.
*Under certain circumstances, your Cybba representative may send you an additional Conversion Tag that needs to be installed in addition to the JavaScript tag.
Direct placement
1. Locate and open the file labelled “CybbaConversionTag”. The file should contain a script tag which looks like above.
Where to install the code?
The Conversion Tag should be installed on all confirmation pages of the website (or whichever pages or instances in which you’d like a conversion to be marked). This is to ensure that our code is tracking all sales and completed customer journeys.
2. Place this tag on the confirmation page(s) with the highlighted fields filled with applicable values on all pages or in all instances you would like a conversion to be marked.
3. PLEASE NOTE: The conversion tag will require values to be populated for total, order id, and currency, highlighted in yellow. During the installation is when the required conversion values should be added to the conversion tag for these values to populate correctly*.
*If there are issues with this part of the implementation, it is possible for our technical team to temporarily configure for this information in order to launch more quickly.
After Installation
Once your code has been installed, please contact your Account Representative to evaluate whether the integration has been completed successfully. If the “Conversion Tag” was not able to be placed, you will be asked for approval for Cybba’s technical team to perform a test purchase on the site to complete the configuration.
If you need further assistance, please contact your Cybba representative, or reach out to tagsupport@cybba.com.
Direct placement
1. Locate and open the file labelled “CybbaConversionTag”. The file should contain a script tag which looks like above.
Where to install the code?
The Conversion Tag should be installed on all confirmation pages of the website (or whichever pages or instances in which you’d like a conversion to be marked). This is to ensure that our code is tracking all sales and completed customer journeys.
2. Place this tag on the confirmation page(s) with the highlighted fields filled with applicable values on all pages or in all instances you would like a conversion to be marked.
3. PLEASE NOTE: The conversion tag will require values to be populated for total, order id, and currency, highlighted in yellow. During the installation is when the required conversion values should be added to the conversion tag for these values to populate correctly*.
*If there are issues with this part of the implementation, it is possible for our technical team to temporarily configure for this information in order to launch more quickly.
After Installation
Once your code has been installed, please contact your Account Representative to evaluate whether the integration has been completed successfully. If the “Conversion Tag” was not able to be placed, you will be asked for approval for Cybba’s technical team to perform a test purchase on the site to complete the configuration.
If you need further assistance, please contact your Cybba representative, or reach out to tagsupport@cybba.com.