Announcement

Collapse
No announcement yet.

Google Analytics (Universal Enhanced Ecommerce) Using Google Tag Manager Guide

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Google Analytics (Universal Enhanced Ecommerce) Using Google Tag Manager Guide

    Hello,

    Google is an everchanging beast and a few years go I made the switch from using the built in Miva Google Analytics module to Using Google Tag Manager.

    I have had a few people asking me how it is done so I thought I'd do my best to help guide anyone that needs help.

    I will also include setting up what is necessary to track the checkout flow so you can see where users are dropping out of checkout if they do not make a purchase.

    DISCLAIMER: This is for any store using the Universal Enhanced Ecommerce (analytics.js) setting in Miva. I cannot confirm that this exact procedure can be used for Universal (analytics.js) or Classic (ga.js).
    Use this guide at your own risk and please be sure to check that this can apply to you.

    1.) Setting Up Enhanced Ecommerce in Google Analytics (GA)

    So for starters you will want to make sure your GA account is set up for enhanced ecommerce.

    Log into your GA account and go to All Website Data for the store you are trying to implement this on.

    From there go to Admin > All Website Data > Ecommerce Settings

    Make sure both the Ecommerce and Enhanced Ecommerce Reporting are enabled.

    (The following is optional but highly recommended)
    You will also create your Checkout Labeling/Funnel Steps on this screen.

    The following checkout funnel labels are based on Miva's native multi-step checkout and would be different if you have a custom checkout flow.

    I labeled ours as follows:

    1.) Cart Page (BASK in Miva)
    2.) Customer Information (OCST in Miva)
    3.) Shipping & Payment Selection (OSEL in Miva)
    4.) Payment Information (OPAY in Miva)
    5.) Order Confirmation (INVC in Miva)

    Click Save After both above settings are enabled and checkout flow is set up.

    Screenshot for visual reference:
    01-GA-Enhanced-Ecommerce-Admin-Ecommerce-Settings.png

    2.) Setting Up Google Tag Manager (GTM)

    First you need to create a GTM account and then create a container for the website you would like to use this for at https://tagmanager.google.com/

    If your having trouble go here: https://support.google.com/tagmanager/answer/6103696 but wait to install the container on your website.

    3.) Set Up GA Settings Variable in GTM

    Go to your Workspace and then click on "Variables" in the left hand navigation.

    Then to the right of "User-Defined Variables" click "New"

    Give the variable an easily identifiable Title (by default it is populated with Untitled Variable). I just titled it: Google Analytics Settings

    Set your Variable type to "Google Analytics Settings"

    Enter your GA Tracking ID (https://support.google.com/tagmanage.../9207621#ga_id)

    Set Cookie Domain to auto.

    Click "More Settings", then click "Ecommerce".

    Check both boxes for "Enable Enhanced Ecommerce Features" and "Use data layer"

    Then click "Save"

    Screenshot for visual reference:
    02-GA-Enhanced-Ecommerce-Settings-Variable.png

    4.) Setting Up GA Universal Analytics (UA) Tracking (Pageviews) Tag

    In your same Workspace, click on "Tags" in the left hand navigation. Then click "New" on the top right.

    Give the Tag an easily identifiable Title (Ex: Google Analytics UA Pageviews).

    Set your Tag type to "Google Analytics: Universal Analytics"

    Set Track Type to "Page View"

    Select the Google Analytics Settings Variable that you set up in the Step 3 in the "Google Analytics Settings" drop down.

    Check the box for "Enable overriding settings in this tag"

    Set Triggering to "All Pages - Page View"

    Click "More Settings", then click "Fields to set", then click "Add Field"

    In "Field Name", enter: cookieUpdate (enter exactly as shown). In "Value", enter: samesite=none;secure (enter exactly as shown).

    (The following is optional)
    Click "Add Field" again.

    In "Field Name", enter: allowAdFeatures (enter exactly as shown). In "Value", enter: true (if ad features are enabled in GA) enter: false (if ad features are not enabled in GA).


    Then click "Save"

    Screenshots for visual reference:
    03-GA-Enhanced-Ecommerce-Pageviews.png
    04-GA-Enhanced-Ecommerce-Pageviews-More-Settings.png
    Last edited by SidFeyDesigns; 06-18-21, 06:42 AM.
    Nick Harkins
    www.loveisarose.com
    *Web Developer
    *Miva
    *Google Analytics, Search Console, Tag Manager, Merchant Center, Ads

    #2
    5.) Setting Up Page Code & Checkout Step (flow) Variables

    Page Code Variable


    In your same Workspace, click on click on "Variables" in the left hand navigation.

    Then to the right of "User-Defined Variables" click "New"

    Give the variable an easily identifiable Title (Ex: dlv pageCode)

    Set the Variable Type to "Data Layer Variable"

    In "Data Layer Variable Name", enter: pageCode (enter exactly as shown)

    Select "Version 2" in the "Data Layer Version" drop down.

    Click Save

    Screenshot for visual reference:
    05-GA-Enhanced-Ecommerce-DLV-pageCode.png

    Checkout Step Variable

    To the right of "User-Defined Variables" click "New" again.

    Give the variable an easily identifiable Title (Ex: dlv checkoutStep)

    Set the Variable Type to "Data Layer Variable"

    In "Data Layer Variable Name", enter: ecommerce.checkout.actionField.step (enter exactly as shown)

    Select "Version 2" in the "Data Layer Version" drop down.

    Click Save

    Screenshot for visual reference:
    06-GA-Enhanced-Ecommerce-DLV-checkoutStep.png

    6.) Setting Up Triggers for INVC page and Checkout Steps (flow)

    INVC page Trigger


    In your same Workspace, click on click on "Triggers" in the left hand navigation. Then click "New" on the top right.

    Give the Trigger an easily identifiable Title (Ex: INVC Page).

    Set your Trigger type to "Page View - Window Loaded"

    Set "This trigger fires on" to "Some Window Loaded Events"

    Under "Fire this trigger when an Event occurs and all of these conditions are true" Set the following:

    Select the "dlv pageCode" variable we set up in Step 5 in the first drop down.

    Select "equals" in the second drop down.

    In the last field, enter: INVC (this is case sensitive, enter exactly as shown)

    Click Save

    Screenshot for visual reference:
    07-GA-Enhanced-Ecommerce-Trigger-INVC.png

    Checkout Step Trigger

    click "New" on the top right again.

    Give the Trigger an easily identifiable Title (Ex: Checkout Step).

    Set your Trigger type to "Custom Event"

    In "Event name", enter: checkout (enter exactly as shown)

    Set "This trigger fires on" to "Some Custom Events"

    Under "Fire this trigger when an Event occurs and all of these conditions are true" Set the following:

    Select the "Event" in the first drop down.

    Select "equals" in the second drop down.

    In the last field, enter: checkout (enter exactly as shown)

    Click Save

    Screenshot for visual reference:
    08-GA-Enhanced-Ecomerce-Trigger-Checkout-Step.png
    Last edited by SidFeyDesigns; 06-18-21, 06:45 AM.
    Nick Harkins
    www.loveisarose.com
    *Web Developer
    *Miva
    *Google Analytics, Search Console, Tag Manager, Merchant Center, Ads

    Comment


      #3
      7.) Setting Up Tags for Purchases and Checkout Step (flow)

      Purchase Tag


      In your same Workspace, click on "Tags" in the left hand navigation. Then click "New" on the top right.

      Give the Tag an easily identifiable Title (Ex: Google Analytics UA Purchase).

      Set your Tag type to "Google Analytics: Universal Analytics"

      Set Track Type to "Transaction"

      Select the Google Analytics Settings Variable that you set up in Step 3 in the "Google Analytics Settings" drop down.

      Set Triggering to to the trigger we set up in Step 6 "INVC Page - Window Loaded"

      Click Save

      Screenshot for visual reference:
      09-GA-Enhanced-Ecomerce-Tag-Purchase.png

      Checkout Step Tag

      Then click "New" on the top right Again.

      Give the Tag an easily identifiable Title (Ex: Google Analytics UA Checkout Step).

      Set your Tag type to "Google Analytics: Universal Analytics"

      Set Track Type to "Event"

      Under "Event Tracking Parameters" Enter the following:

      In the "Category" field, enter: Ecommerce (enter exactly as shown)

      In the "Action" field, enter: Checkout (enter exactly as shown)

      Select "False" in the "Non-Interaction Hit" drop down

      Select the Google Analytics Settings Variable that you set up in Step 3 in the "Google Analytics Settings" drop down.

      Check the box for "Enable overriding settings in this tag"

      Set Triggering to to the trigger we set up in Step 6 "Checkout Step - Custom Event"

      Click "More Settings", then click "Ecommerce"

      Select "True" in the "Enable Enhanced Ecommerce Features" drop down

      Check the box for "Use Data Layer"

      Then click "Save"

      Screenshots for visual reference:
      10-GA-Enhanced-Ecommerce-Tag-Checkout-Step.png
      11-GA-Enhanced-Ecommerce-Tag-Checkout-Step-More-Settings.png

      8.) Publish Your Container

      Once you have finished the above steps its time to publish the container.

      In your same Workspace, click on "Submit" on the top right.

      I would recommend entering an easily identifiable Version Name and description so its easy to revert back in the future, but it is not required.

      Click Publish.

      You are now done setting up everything in GTM. Onto setting things up within the Miva Admin.

      9.) Installing the GTM Container in Miva

      In your same Workspace in Google Tag Manager, click on "Admin" at the top.

      In the menu for the Container for the site you're installing on click "Install Google Tag Manager"

      Click the Copy Icon in the top right corner of the top snippet of code. Keep this browser tab open.

      Screenshot for visual reference:
      12-GA-Enhanced-Ecommerce-Copy-Container-Code.png

      Open another browser tab and log into Miva.

      Go to User Interface > Global Settings

      Go to the Global Head tag section and paste the GTM container code you just copied from the GTM Admin. I chose to paste it at the bottom of the Global Head Tag.

      Click Update in Miva.

      Next go back to your browser tab with the GTM admin open and copy the bottom snippet of code (Shown in image above). This is the noscript version of the container.

      Now go back to your browser tab with the Miva Admin open.

      Go to User Interface > Global Settings

      Go to the Global Header section and paste the noscript version of the GTM container code you just copied from the GTM Admin. Paste it at the very top of you Global Header.

      Click Update in Miva.
      Last edited by SidFeyDesigns; 06-18-21, 06:48 AM.
      Nick Harkins
      www.loveisarose.com
      *Web Developer
      *Miva
      *Google Analytics, Search Console, Tag Manager, Merchant Center, Ads

      Comment


        #4
        10.) Setting up the Data Layer in Miva

        In Miva, Go to User Interface > Global Settings

        Go to the Global Head tag section and paste the following code immediately after the GTM container script:

        Here is a link to that code: https://www.loveisarose.com/Miva-Glo...Data-Layer.txt (code wrapped in /* GA4 */ comments is optional. It is for GA4 data layer event tracking)

        Sorry the forum kept throwing an error when trying to add it here.

        After the data layer code is added click update

        11.) Test Your New GA Tracking Via GTM Preview Mode

        First, create a test product in Miva with a price of $1.00 and assign it to any category. Maybe one that isn't used much. This will be used to test checkout flow and purchase tags
        ​​​
        Go back to your Workspace in the GTM admin

        Resize your browser window to be about half the size of your screen

        Click Preview in the top left corner

        A new tab will open in Google's Tag Assistant asking to connect to to your site with your site's url already filled in.

        Click Connect.

        A new browser window will open with your site loaded.

        Click on a Category, and then on a Product. in that new window.

        Go back to the Google Tag Assistant tab in your original browser window.

        You'll notice on the left, there is a summary of the pages you have visited in the other window that opened up.

        Click on any page listed in that summary (they are titled based off the html <title> tags)

        On the right will be a list of the tags fired. There should only be 1 GTM tag firing on all pages and thats the Google Analytics UA Pageviews tag we set up in Step 4 (except BASK screen or checkout flow)

        Be sure to also click the "Errors" tab on the right to see if there are any errors within GTM or the Data Layer.

        Once you have verified that tag is working, Add the test product to the cart in the window that opened up from going into preview mode.

        Go to the Cart Page in that window.

        Go back to the Google Tag Assistant tab in your original browser window.

        And click on what would be the cart page on the left in the Summary Section

        You'll notice there should now be two tags fired: Google Analytics UA Pageviews tag we set up in Step 4 and Google Analytics UA Checkout Step we set up in Step 7.

        Again, be sure to also click the "Errors" tab on the right to see if there are any errors within GTM or the Data Layer.

        Once you have verified that both tags are working, continue through the checkout process in the window that opened up from going into preview mode.

        On each step of checkout go back and forth between the preview mode window and and the Google Tag Assistant window and verify everything is working and then you can even place the order with a credit card. (it's only $1.00 haha and can be credited)

        When in the Preview mode window, once you get to the order confirmation page (INVC in the Miva Admin), go back to the Tag Assistant window.

        Click on the order confirmation page in the Summary section

        You should now see a third tag has fired. The Google Analytics UA Purchase tag we set up in Step 7

        Again, be sure to also click the "Errors" tab on the right to see if there are any errors within GTM or the Data Layer.

        Once you have verified that all tags are working, you can close the new preview window and close the tag assistant tab.

        You are now ready to remove the built in GA tracking in Miva.

        11.) Removing built in GA Tracking in Miva

        Go into Miva and locate the <mvt:item name="ga_tracking" /> tag.

        It should be here: Go to User Interface > Global Settings > Global Head Tag

        or her: User Interface > Global Settings > Global Footer.

        You can go ahead and delete the above tag and click update.

        Now go to User Interface > Templates > Pages and go to the INVC page template and locate the <mvt:item name="ga_transaction" /> tag.

        You can go ahead and delete the above tag and click update as well.

        Now go to User Interface > Templates > Items and click on the blue link to the right of the "ga_tracking" item. Then click on the "Pages" tab.

        Un-assign the item from all pages.

        Then go back to User Interface > Templates > Items and click on the blue link to the right of the "ga_transaction" item. Then click on the "Pages" tab.

        Un-assign the item from all pages. (Although it should only be assigned to the INVC page)

        DO NOT DELETE OR REMOVE THE ABOVE ITEMS FROM YOUR MIVA ADMIN.

        Why? Because you can easily revert back to using it by doing everything in Step 11 in the reverse order and then removing the GTM Container snippet and Data Layer code from the Global Head Tag that we added in Step 9 and Step 10.



        I really hope this helps anyone in need.

        Let me know if anyone see's any errors that need correcting.

        After 2 years of using GTM I have learned to love it. We use it for all of our third party tracking code as well including Google Ads, Microsoft Ads, and Verizon Media Ads. It can also be used for the Facebook pixel as well.

        Having all of it in one place sure is convenient. Makes editing much more organized

        Cheers!

        -Nick Harkins
        Last edited by SidFeyDesigns; 06-18-21, 06:32 AM.
        Nick Harkins
        www.loveisarose.com
        *Web Developer
        *Miva
        *Google Analytics, Search Console, Tag Manager, Merchant Center, Ads

        Comment


          #5
          SidFeyDesigns, thank you for the hard work you put into this, I really appreciate it. I'll keep you posted.
          Thank you, Bill Davis

          Comment


            #6
            William Davis you're very welcome. Definitely let me know how it goes or if you have any questions.
            Nick Harkins
            www.loveisarose.com
            *Web Developer
            *Miva
            *Google Analytics, Search Console, Tag Manager, Merchant Center, Ads

            Comment

            Working...
            X