CellarPass Help Center

Get quick answers to common questions

Setting Up Google Tag Manager for Google Enhanced eCommerce (Reservations)

Updated over a week ago

If you are looking for detailed reporting information related to traffic and bookings for your CellarPass reservations to be fed to Google Tag Manager and Google Analytics, follow the detailed steps.

In this article we cover two different methods to setting up your Google Tag Manager, you will execute one option based on your familiarity of Google Tag Manager. To ensure that we have provided you the proper step-by-step instructions, we hired the leading experts in GA and GTM as well as spoke with 3 different Google GA/GTM engineers to confirm our documentation is accurate at time of publishing which is November 20, 2020. With that said, Google is constantly making changes to their platform while also introducing Google Analytics 4.0 which is a massive shift in their programming, therefore we do not know, nor tested this documentation with GA 4.0.

NOTE: We are providing this information as a convenience to our customers, but do so with no expressed warranty or technical support offered. Should you have any questions regarding this documentation, we recommend you contact Google or hire an individual experienced with Google Tag Manager.

INTRODUCTION TO GOOGLE TAG MANAGER
If you do to have any any experience with Google Tag Manager (GTM), we strongly recommend you watch this informative video that is designed specifically for beginners. Without first watching this, you may not fully understand what GTM does, how it works and how to configure it. And since Google Tag Manager and Analytics is constantly changing, make sure that any information you read is within the last few months as anything from previous dates will most like steer you in the wrong direction or lead to confusion as the screens may not match what is currently displayed in Google Tag Manager. 

CREATING A GOOGLE TAG MANAGER ACCOUNT
If you have not already created a Google Tag Manager or Google Analytics account, stop reading and do so as this can take 24 hours to be completed.

  1. Create Google Analytics Account
  2. Create Google Tag Manager Account

ADDING GOOGLE TAG MANAGER AND GOOGLE ANALYTICS TO CELLARPASS
Before you jump waist deep into configuring your GTM container, you'll need to add both your GTM Account and Google Analytics Account to your CellarPass account. This step-by-step article and this video covers how to complete this essential configuration. Again, do not continue until this step has been completed first.

CONFIRMING YOUR WEBSITE'S DOMAIN URL ON RECORD WITH CELLARPASS
It's important to understand that these instructions cover how to track conversions when the widget is installed on your website, not from any other site. For this to work properly, the booking must start on your website. If you need to track conversions from Facebook, follow these instructions. We strongly recommend that you reach out to CellarPass technical support to confirm your own website's URL is stored properly with your account as it must be exactly or these instructions will not work.

For example, a good URL on record would be https://www.encorewinery.com, but the following would fail:

  • http://encorewinery.com
  • https://encorewinery.com
  • https://store.encorewinery.com

It's why it's important to contact CellarPass support to re-confirm your website's URL is matching the origin domain you plan on tracking from.

OPTION #1 MANUAL CONFIGURATION
This method will walk you through the specific steps to manually setup your Google Tag Manager Container. This is the recommended method as it will help you better understand what each step does, but do pay close attention as a simple typo along the way will lead inaccurate reporting.

Step 1. Create a Custom HTML tag

  1. Log in to your Google Tag Manager container and go to Tags > New > Custom HTML.
  2. Download the custom GTM Container HTML Code to your desktop.
  3. Open the file on your computer.
  4. Copy and paste the HTML code into the text field in Google Tag Manager custom container field.
  5. Set this tag to fire on All Pages.

Here's an example of the code you will be pasting.

Custom HTML in GTM Container

Step 2 . Create Two Custom Event Triggers

  1. Log into Google Tag Manager
  2. Go  to Triggers > New > Custom Event
  3. In the “Event name” field, enter the following name cellarpass_addtocart
  4. Save the trigger.

NOTE: Typos will lead to inaccurate reporting, so be sure to copy and paste or type exactly as we show you.

Custom HTML in GTM Container

5. Then create another Custom Event trigger
6. Name the event cellarpass_purchase
7. 
Save the trigger.

Custom HTML in GTM Container

Step 3. Create a Data Layer Variable

  1. Go to Variables > New > Data Layer Variable

  2. Enter postMessageData in the “Data Layer Variable Name” field. 

    Important!: name the variable dlv - postMessageData (exactly like this, all lower-case). This name will be used in Custom JavaScript variable that we are going to create in an upcoming step..
    Important!: Select Data Layer Version 1.

    Custom HTML in GTM Container

Step 4. Create a Custom Javascript Variable

  1. Go to Variables > New > Custom JavaScript
  2. Download the custom GTM Container HTML to your desktop.
  3. Open the text file on your computer.
  4. Copy and paste the code into the GTM text field.
  5. Save your changes.

Custom HTML in GTM Container

Step 5. Create Universal Analytics Tag

  1. Go to Tags > New > Universal Analytics
  2. Enter the following settings:Track type: EventCategory: ecommerce (but you can enter whatever fits your existing naming convention)Action: {{Event}} (this is a built-in variable in Google Tag Manager. You can enable it in Variables > Customize and click checkbox next to “Event” variable”). As a result, the value (sent to Google Analytics) will be either cellarpass_addtocart or cellarpass_purchase.Label: you can leave it emptyValue: leave it emptySelect your existing Google Analytics Settings Variable (learn more about it here)
  3. Click Enable overriding settings in this tag > More Settings > Ecommerce > True > Read Data from Variable and select the Custom JavaScript variable that you created in the previous chapter.


In the triggering section, add both custom event triggers that you have previously created.

Step 6. Test and publish

  1. In Google Tag Manager interface, click the Preview button and check whether your tag is firing when the Ecommerce data is being sent from the CellarPass widget.
  2. When the data is passed from the CellarPass widget to your website, you will see a cellarpass_addtocart or cellarpass_purchase event on the left side of the GTM Preview mode.
  3. Click it and you should see that your Google Analytics Enhanced Ecommerce tag has fired.
  4. Once you make sure that the tags fire, click the SUBMIT button in the top-right corner of the GTM interface
  5. Then Publish the changes.

 

OPTION #2 Importing the CellarPass GTM Container Template
This method will walk you through the specific steps to manually setup your Google Tag Manager Container. This is the recommended method as it will help you better understand what each step does, but do pay close attention as a simple typo along the way will lead inaccurate reporting.

Step 1. Import the Container Template

  1. Download the custom CellarPass GTM Container Import Template to your desktop.
  2. Go to your Google Tag Manager container > Admin > Import container.

  3. Choose the container file saved on your desktop in step 1.

  4. Select Existing workspace.

  5. Select Merge and Overwrite conflicting tags, triggers and variables.

  6. Click Confirm.

 

 

Step 2. Replace the Dummy Google Analytics Settings Variable with your own variable

  1. Go to Tags and open the tag Ga Event - Ecommerce - CellarPass Data.

  2. In the field Google Analytics Settings Variable, please choose your own settings variable.

  3. If you don’t know what it is, watch this video tutorial.

 

 

Step 3. Delete the Dummy Google Analytics Settings Variable

  1. Go to Variables, click the checkbox next to the {{REMOVE THIS VARIABLE AND INSERT YOUR OWN GA SETTINGS VARIABLE}}
  2. Then at the top of the list, click the Trash bin icon.
  3. Delete the variable.

 

Step 4. Test and Publish Container

  1. In Google Tag Manager interface, click the Preview button and check whether your tag is firing when the e-commerce data is being sent from the CellarPass widget.
  2. When the data is passed from the CellarPass widget to your website, you will see a cellarpass_addtocart or cellarpass_purchase event on the left side of the GTM Preview mode.
  3. Click it and you should see that your Google Analytics Enhanced Ecommerce tag has fired.
  4. Once you make sure that the tags fire, click the SUBMIT button in the top-right corner of the GTM interface
  5. Then publish the changes.

Step 5. Enable Enhanced Ecommerce Reporting in Google Analytics
When you start sending CellarPass data to Google Analytics, you must enable the ecommerce reporting features.

  1. Log in to your Google Analytics account.
  2. Go to Admin
  3. In the View column, click Ecommerce settings.
  4. And then toggle the following settings:

  5. Enable EcommerceEnable Enhanced Ecommerce reporting

  6. Click Save.

If Enhanced Ecommerce reporting was already enabled in your Google Analytics view, then you don’t need to do any additional configuration here.

Here's an example of enabling the Enhanced Ecommerce settings.

Step 6.Wait For Google Data to Populate

Within the next 24 hours, your ecommerce data will appear in Conversions > Ecommerce section in Google Analytics.

CellarPass widget bookings send two ecommerce events to Google Analytics:

Add To Cart (when a user clicks on a particular reservation time

Purchase (when a user completes a purchase)

Also, you will be able to see product data which includes the main Event information and any included Add-Ons or UpSells.