Contact Support
Guides

Installation Process of Elevar Scripts

Follow this guide for the first step in the installation process of Elevar Scripts on Version 3.9+

Suggest Edits

Overview

Add GTM and Elevar’s Non-Shopify Attribution Script to all Site Pages:

The steps below will have you install GTM and Elevar's scripts to your headless and Shopify portions of your site.

Elevar will be responsible for adding GTM to all (Shopify based) checkout pages. You are responsible for adding the GTM script to all headless site pages.

To do this you’ll need your web container GTM ID (don’t use a server side container ID here).

Install Google Tag Manager (GTM)

If you plan to use the Shopify Market's feature to allow different pixels per Shopify Market, you'll need to load different GTM containers per Shopify Market, pass valid market ids [How do I pass market ID?], and configure your Shopify source and destinations for your different markets [How to implement Shopify Markets].

  • Paste the following code as high in the<head> tags as possible, making sure to replaceGTM-XXXXXX with your web container ID. [How to find Web Container ID?].
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

Install the Shopify Source on Checkout Pages

You’ll need to the Shopify source on the Shopify portion of your website from the Elevar app in order to proceed further. This includes our dataLayer and data listener logic.

Shopify Source:

  • This can be accessed by going to the homepage of your Elevar App. Use the left-hand menu to click on the "My Tracking" tab.

Install Elevar’s Non-Shopify Attribution script on the headless portion of your website:

  • Follow this step-by-step guide on how to implement to Non-Shopify source on your headless site.
    • Elevar will attempt to fetch your Shop’s custom domain. If this domain isn’t available, you’ll be prompted to manually enter it. [How do I find this?].
    • After doing so, you’ll need to copy the highlighted code like below and include it immediately after the opening <head> section of your headless site on all the pages.
      • (See Figure 1)

Step 1 screenshotFigure 1

❗️

Warnings:

  • The Non-Shopify Attribution Tracking script noted above will give a 404 error unless your Shopify source is fully installed.
  • In order for the Non-Shopify Attribution Tracking script to work as intended, you must be using the Cart Object when using the Storefront API. If you are using the Checkout Object, Shopify’s Web Pixel API will not fire it’s checkout_started event (which will affect the Non-Shopify Attribution Tracking script).
  • Do not add a “http” in the Main Overarching Domain section. The format should be “website.com”.

Updated 9 months ago

What’s Next