How to Implement Data Layer & Data Listener with Your Non-Plus Shopify Store

This is your complete guide to install Elevar's Data Layer with your Non-Plus Shopify 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.


My Tracking

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

Elevar My Tracking Screenshot

Step 1: Add Your Google Tag Manger(GTM) Details & Select Your Events

You can 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 our Privacy Implementation guide if you want to enable the consent mode.

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

Step 3: Non-Shopify Attribution Tracking step

If you have non-Shopify subdomain pages such a blog of third party landing pages, or a headless page select Yes, otherwise select No and proceed to Step 4.

If Yes is selected enter your Main Overarching Domain and Save

After saving, follow the instructs as provided. Once completed click the Mark as Complete button to proceed.

Step 4: 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 5.
  • 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.
    prepare store

Step 5: Update the Checkout Thank You Page Snippet

  1. To make sure all transaction data is available to GTM, you'll need to manually add a script to the Thank You page in your Shopify admin. This only takes a minute:
  2. Click the button "Copy to Clipboard"
    Then paste it into the Checkout Settings > Order Status Page > Additional Scripts or Scripts Box

Once you've copied and pasted the Elevar data layer code into the Settings > Checkout > Order Status Page > Additional Script Box, and select SAVE.

Notes:

❗️

Important Reminder: Do not delete your existing scripts in this setting without reviewing them first! It's possible that you might have scripts used for other tracking purposes that you aren't configuring in GTM. Paste Elevar's code above or below what you already have in place.

Depending on what tags you decide to publish in GTM you might have to review & remove other hard-coded conversion scripts if you decide to trigger via GTM now. For example, if you are publishing Google Ads purchase conversions via GTM now and you have a pre-existing Google Ads purchase conversion tag on your thank you page, you'll need to remove this.

Click the "Mark as Complete & Continue" button to proceed.

Step 6: Install Data Layer On Your 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" and the following happens:

  1. elevar-head.liquid snippet created and input into your theme.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 will be added (but this will not be used for Non-Plus Store)

    📘

    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
    5. Once these files are in your repository have your developers publish this theme to production.