Google Analytics and Google Tag Manager

Open the Google Analytics web page on your browser.

The Google Analytics web page opens and prompts you to log in to your Google Account.

Enter your Google Account Credentials and click Sign In.

The Google Analytics homepage opens.

Click Sign Up.

Since you are using a new Google product, you need to sign up separately for the product.

Enter your account information in the fields given.

All the information such as Account Name, Website Name, Website URL, Industry Category, Reporting Time Zones, and Data Sharing Settings should be entered. They are mandatory.

Click Get Tracking ID.

The Google Analytics dashboard appears.

A sample image of the Google Analytics Dashboard.

Your Google Analytics account is now set up. To track all the events of your guests on your Webstore, you need to extract the tracking id of Google Analytics and use it while creating tags and triggers in Google Tag Manager.

Click Admin on the main menu.

The Admin page opens with three sections. Account, Property, and View.

Click Tracking Info in the Property section.

The Tracking Info sub-menu appears.

Click Tracking code in the sub-menu.

A new screen appears, with Tracking ID info and a Javascript code.

Make a note of the Tracking ID.

You will need it when you are creating tags and triggers in Google Tag Manager.

Log in to Google Tag Manager home page.

Click the hamburger icon and click Sign in to Tag Manager.

Sign in with your credentials.

Click the name of your website.

Google Tag Manager dashboard opens with your tracking id that begins with GTM followed by seven digit alphanumeric code.

For example, GTM-A1B2C34.

Click the tracking id.

Copy both the codes present in the window (the codes are highlighted in the image below) and paste them into a notepad. You will need them when you are pasting the code snippets into Zenoti Webstore.

At the organization level, click the Configuration icon.

Search for and click Online booking settings from the Online booking section.

Click the Webstore v2 template.

Expand Analytics.

Turn ON the Enable Ecommerce Transaction Tracking For Google Analytics setting.

In the Google Tag Manager box, paste both the code snippets you copied in Step 1.

For tracking e-commerce transactions for Google Analytics, you must paste the Google Analytics script in the same box below the Google Tag Manager script.

To publish, click Publish.

Select All Clicks radio button in the Trigger Configuration page.

Click Save.

Your trigger will be saved.

If you have not named the trigger, Tag Manager will prompt you to name the trigger and then save it.

Click Publish.

All your changes will be published.

Select Some Clicks radio button in the Trigger Configuration page.

The Trigger condition drop-down lists open.

Based on your requirement, select any one of the options from the first drop-down list.

ExampleElements, ID, Classes, Target, Text.

Note

The options available in the first drop-down are various HTML elements.

Select the element conditions from the second drop-down list.

Type the value for the trigger condition in the third field.

Example: If you selected Click Id in the first drop-down list, you need to enter the HTML element id in the third field.

Click Save.

Your trigger will be saved.

Click Publish.

All your changes will be published.

You have successfully set up Triggers in your Google Tag Manager.

You can now proceed to set up the Tags.

Download the Pre-configured Tags and Triggers JSON file (Right click and select Open Link in New Tab )

Import the Pre-configured JSON file to your GTM Account

Update your Google Analytics Id in your Google Tag Manager account

Log in to your Google Tag Manager account by navigating to its home page.

The All Accounts page with the name of your Website/Workplace opens.

Click the name of your Workplace/Website.

The Google Tag Manager dashboard opens with your tracking id that begins with GTM followed by 7 digit alphanumeric code. For example, GTM-A1B2C34.

Click Admin on the dashboard.

The Admin page opens.

Click Import Container.

The Import Container page opens.

Click Choose Container file.

A new window to select the downloaded JSON file opens.

Locate and select the JSON file.

The Container File is imported.

Select Existing for the Choose Workspace setting.

The Workspaces window opens.

Select your current workspace.

The workspace is updated.

Select Merge as the Import Option.

Based on your preference, select any one of the following as Merge option.

A preview of all the Tags and Triggers appears.

Click Confirm.

The Google Tag Manager Dashboard re-opens with all the new pre-configured tags and triggers added to your workspace.

Log in to Google Tag Manager.

Google Tag Manager dashboard opens.

Select Tags in the side menu.

Click New.

Untitled Tag page appears.

Enter the name of the tag as Step 1 Service Listing.

Click the Tag Configuration.

Set the following configuration:

Scroll down to see the Trigger section.

Click the Trigger icon.

Choose a Trigger page opens.

Select Home Page as the trigger.

Click Save.

The Service Listing tag is created.

Refer to the following image.

Select Tags in the side menu.

Click New.

Untitled Tag page appears.

Enter the name of the tag as Step 2 - Book Appointment Button.

Click the Tag Configuration.

Choose Tag Type page appears.

Select the tag type as Google Analytics - Universal Analytics.

Select the Track Type as Event.

Under Event Tracking Parameters select the following:

Navigate to More Settings > E-Commerce.

E-Commerce settings appear.

Set Enable Enhanced E-commerce Features as True.

Select Book Appointment Button in the Read Data from Variable dropdown.

Scroll down to see the Trigger section.

Click the Trigger icon.

Choose a Trigger page opens.

Select Click on Book Appointment as the trigger.

Click Save.

The Book Appointment Button tag is created.

Select Tags in the side menu.

Click New.

Untitled Tag page appears.

Enter the name of the tag as Step 3 - Click on Confirm Booking.

Click the Tag Configuration.

Choose Tag Type page appears.

Select the tag type as Google Analytics - Universal Analytics.

Select the Track Type as Event.

Under Event Tracking Parameters select the following:

Navigate to More Settings > E-Commerce.

E-Commerce settings appear.

Set Enable Enhanced E-commerce Features as True.

Select Click on Confirm Booking in the Read Data from Variable dropdown.

Scroll down to see the Trigger section.

Click the Trigger icon.

Choose a Trigger page opens.

Select Click on Confirm Booking as the trigger.

Click Save.

The confirm booking button tag is created.

Select Tags in the side menu.

Click New.

Untitled Tag page appears.

Enter the name of the tag as Step 4 - Thank You.

Click the Tag Configuration.

Choose Tag Type page appears.

Select the tag type as Google Analytics - Universal Analytics.

Select the Track Type as Event.

Under Event Tracking Parameters select the following:

Navigate to More Settings > E-Commerce.

E-Commerce settings appear.

Set Enable Enhanced E-commerce Features as True.

Select Thank You page in the Read Data from Variable dropdown.

Scroll down to see the Trigger section.

Click the Trigger icon.

Choose a Trigger page opens.

Select Thank You page as the trigger.

Click Save.

The click on confirm booking tag is created.

Log in to Google Tag Manager.

Google Tag Manager dashboard appears.

Select Triggers in the side menu.

The existing triggers table appears.

Click New.

The Untitled Trigger window opens.

Enter the name for the trigger as Home Page.

Click Trigger Configuration.

The Choose Trigger Type side window opens.

Select the trigger type as Page View.

This Trigger Fires On setting appears.

Select Some Page Views.

The Event Condition dropdown appears.

Select Page Path from the first condition dropdown.

Select Contains from the second condition dropdown.

Enter /webstoreNew in the third column.

Click Save.

The Home Page trigger is now created.

Select Triggers in the side menu.

The existing triggers table appears.

Click New.

The Untitled Trigger window opens.

Enter the name for the trigger as Book Appointment Button.

Click Trigger Configuration.

The Choose Trigger Type side window opens.

Select the trigger type as Click - All Elements.

This Trigger Fires On setting appears.

Select Some Clicks.

The Event Condition dropdown appears.

Select Choose Built-In Variable from the first condition dropdown.

The Built-In Variables side window opens.

Select Click ID.

Select contains from the second condition dropdown.

Enter ws_bookreservation in the third column.

Click Save.

The Book Appointment Button trigger is now created.

Select Triggers in the side menu.

The existing triggers table appears.

Click New.

The Untitled Trigger window opens.

Enter the name for the trigger as Confirm Booking Button.

Click Trigger Configuration.

Select the trigger type as Click - All Elements.

This trigger fires on setting appears.

Select Some Clicks.

The Event Condition dropdown appears.

Select Click ID from the first condition dropdown.

Select contains from the second condition dropdown.

Enter wsConfirmBook in the third column.

Click Save.

The Confirm Booking Button trigger is now created.

Select Triggers in the side menu.

The existing triggers table appears.

Click New.

The Untitled Trigger window opens.

Enter the name for the trigger as Thank You page.

Select the trigger type as Element Visibility.

More settings appear.

Select ID in the Selection Method dropdown.

Select thankYouContainer for Element ID.

Select Every time an element appears on screen radio button for When to fire this trigger.

Select 50 as the Minimum Percent Visible value.

Select Observe DOM changes checkbox.

Select All Visibility Events radio button for This trigger fires on setting.

Click Save.

The ThankYou page trigger is now created.

Log in to Google Tag Manager.

Google Tag Manager dashboard appears.

Select Variables in the side menu.

The Built-In Variables table appears.

Scroll down to click New.

Untitled Variable page appears.

Name the variable as Service Listing.

Select Custom Javascript as the Variable Type.

Custom Javascript code box appears.

Enter the following code in the code box.

                  function(){
  return {
   'ecommerce': {
      'checkout': {
        'actionField': {'step': 1},
      } 
    }
  }
}
               

Click Save.

The service listing variable is created.

Refer to the following image.

Log in to Google Tag Manager.

Google Tag Manager dashboard appears.

Select Variables in the side menu.

The Built-In Variables table appears.

Scroll down to click New.

Untitled Variable page appears.

Name the variable as Book Appointment Button.

Select Custom Javascript as the Variable Type.

Custom Javascript code box appears.

Enter the following code in the box.

                  function(){
  return {
  'ecommerce': {
      'checkout': {
        'actionField': {'step': 2},
      } 
    }
  }
}
               

Click Save.

The book appointment button variable is now created.

Log in to Google Tag Manager.

Google Tag Manager dashboard appears.

Select Variables in the side menu.

The Built-In Variables table appears.

Scroll down to click New.

Untitled Variable page appears.

Name the variable as Confirm Booking Button.

Select Custom Javascript as the Variable Type.

Custom Javascript code box appears.

Enter the following code in the box.

                  function(){
  return {
  'ecommerce': {
      'checkout': {
        'actionField': {'step': 3},
      } 
    }
  }
}
               

Click Save.

The confirm booking button variable is now created.

Log in to Google Tag Manager.

Google Tag Manager dashboard appears.

Select Variables in the side menu.

The Built-In Variables table appears.

Scroll down to click New.

Untitled Variable page appears.

Name the variable as Thank You page.

Select Custom Javascript as the Variable Type.

Custom Javascript code box appears.

Enter the following code in the box.

                  function(){
  return {
  'ecommerce': {
      'checkout': {
        'actionField': {'step': 4},
      } 
    }
  }
}
               

Click Save.

The Thank You page variable is now created.