How To Implement the Elevar Data Layer & Data Layer Listener Your Shopify Plus Store

❗️

This guide has been depreciated

Please follow this guide to implement our simplified Shopify source.

Prerequisites: Make sure to connect the Data Connections.

Learn more about Data Connections here.

My Tracking

Navigate to the "My Tracking" tab > Data Layer > Setup

Step 1: GTM Details

Input Your GTM ID & Select Your Events

This is a new option with version 2.0 of our data layer. You can now choose to disable certain events that fire on your store.

For example, if you do not want the collection list view events to fire then simply uncheck the box.

This can be useful if you are not using the data from dataLayer on these pages and want to reduce the amount of code running on your site for performance reasons. Or if you want to implement your own custom data layer events for that particular page then you can do so while still utilizing the rest of Elevar's.

Then when you're done, enter your GTM Container ID into the configuration setting and select "CONTINUE".

Important Notes:

1. This does not inject the snippets into your store (yet). We'll do it in the next couple of steps.

2. When you copy/paste the GTM Container ID into this setting, please make sure that there's no leading space or whitespace to prevent 'Invalid or Missing Account ID' error.

Step 2: Consent Mode

Please refer to the link below for guides if you want to enable the consent mode:

• Privacy Implementation

Otherwise, just leave the default settings "No" and click "Mark as Complete & Continue"

Step 3: Do you have Non-Shopify Subdomain Pages?

If all your pages live within Shopify and on the same domain (website.com), just leave the default settings "No" and click "Save & Continue"

If you have non-Shopify subdomain landing pages such as landing.website.com select Yes, and enter your Main Overarching Domain [How do find this?]

🚧

Never include a "http" in the Main Overarching Domain

The main overarching domain should always follow the format of "website.com". It should never include an http or https. Adding an http or https can cause attribution data loss.

Copy the below script.

Paste the code into the section on every non-Shopify subdomain page.

Step 4: Prepare your Store

Remove Pre-Existing GTM Code From Website

Do you already have GTM installed on your website? (Not sure? Here is how you check)

• If no, then click "Mark as Complete & Continue" to proceed with Step 4.
• If yes, then it is important that you remove the existing GTM code so that you do not have duplicate GTM containers on your website. This is easy to do, just follow this guide! Once you have done this, you can continue with the rest of the installation.

"replace screenshot showing the updated installation steps"

Step 5: Configure Checkout

Update the Checkout Thank You Page Snippet

Option 1: If you are on Shopify Plus and not yet using Shopify's latest Checkout Extensibility feature and you have the checkout.liquid file available in your theme code as displayed in the screenshot below.

In this case, you will not have to do anything in this step and the Elevar app will take care of placing the Purchase tracking code inside your checkout.liquid file in the theme files and you can click on Next step. #### Option 2: If you are not on Shopify Plus or if you on Shopify's latest Checkout Extensibility feature then you will be prompted with the following details to place the Elevar purchase tracking code in the checkout settings section.

Once you have followed the displayed instructions and placed the displayed code on your Shopify store, you are ready to Mark this step as Complete!

Step 6: Install on Stores

Install Data Layer On Store

This next step will inject the Elevar data layer snippets into your store's production theme.

When you're ready to go live with the data layer then click "Install".

Step 7: Install the Data Layer Listener

The data layer listener helps us send the order and the visitor data to the Elevar servers to process them and send to all your marketing destinations. Click on the Data Layer Listener option visible under the "Sources" section right below the Data Layer and click on "Get Started"

Step 8: Configure the Data Layer Listener code on Shopify Checkout

If you are on Shopify Plus and not using Shopify's Checkout Extensibility feature and you have a checkout.liquid file present in your theme code, then you will not have to do any manual setup here and click on "Next".

But if you are not on Shopify Plus or currently using Shopify's Checkout Extensibility feature then you will be presented with a piece of code which you will have to place in your Shopify's settings -> Checkout section as instructed on the screen.

Step 9: Install on Store

This next step will inject the Elevar data layer listener snippets into your store's production theme.

You need to click on "Install" in order to proceed to the next steps.

Once you click on install, the following happens:

1. elevar-head.liquid snippet created and added into your theme.liquid and checkout.liquid right after the tag
2. elevar-body-end.liquid snippet created and input into your theme.liquid right after the tag
3. elevar-checkout-end.liquid snippet created and input into your checkout.liquid right after the tag
4. elevar-head-listener.liquid snipet created and added into your theme.liquid and checkout.liquid right after the tag

📘

If your developers use version control (like Github) and need to check these into your codebase then we recommend doing the following to prevent your data layer from accidentally being removed from production:

1. Make a duplicate of your production theme
2. Click "Install" on this setting
3. Go back to your duplicate theme and publish
4. Send your developers the theme that is now unpublished that contains the Elevar snippets and send them this guide to follow.

Once these files are in your repository have your developers publish this theme to production.