Articles in this section

See more

How to set up Google Tag Manager with the Online Booking Portal

Matson Tanner
  • Updated
Follow

How to setup Online Booking Portal with Google Tag Manager

Note: This tutorial will not focus on the benefits of Google Tag Manager, nor will it focus on the difference between Google Tag Manager and Google Analytics.

 

Overview

The purpose of this tutorial is to walk you through a basic integration of Google Tag Manager with the online booking portal of your course.

 

Step One: Create a Google Tag Manager Account

From Google’s documentation:

Create a new account and container

  1. You will need a Google Account in order to set up Google Tag Manager

  2. Go to https://tagmanager.google.com/#/home

  3. Click: “Create Account”

  4. Enter an account name and optionally indicate whether you'd like to share data anonymously with Google and others.

  5. Click Continue.

  6. Enter a descriptive container name and select the type of content: Web. Click Create.

  7. Review the Terms of Service and click Yes if you agree to those terms.

  8. When your new container first loads, you will be prompted with the web container installation code snippet, but don’t worry about any of that, we already took care of that part for you. Click OK.

 

Add a new container to an existing account

  1. In Tag Manager, click Accounts and then the ellipsis next to the relevant account name.
  2. Choose Create Container.
  3. Repeat steps 4–6, listed above.

At that top of your new Tag Manager Dashboard, you will see a code with the “GTM-” prefix. This is what you need to plug into your Online View Settings within the software to successfully connect your Online Booking Portal to Google Tag Manager. Copy this code

 

Step Two: Plug in your GTM code

  1. Go to your Settings module in foreUP:
    https://foreupsoftware.com/index.php/v2/home#settings/online_reservations/online_view_settings
  2. Inside the Online Reservations section, click on “Online View Settings”. With your code copied, go ahead and paste it into the Google Tag Manager Container ID field.
  3. Click Save Settings.

 

Please note that if the Google Tag Manager Container ID is filled in, it will ALWAYS TAKE PRECEDENCE over the Google Analytics Tracking ID field above it. To revert back to using Google Analytics, just delete your Google Tag Manager Container ID from the field.

That’s it! Google Tag Manager is connected to your Online Booking Portal! If you would like to know how to connect that data to Google Analytics with your newly installed Google Tag Manager, continue on!

 

Step Three: Configure Your Google Analytics Tag

If you want to track page views and basic events through Google Analytics, follow these steps. You’ll need to create a Google Analytics account during this process:

http://www.google.com/analytics/

 

Click: “Start for free”

And then: “Start Measuring”

There is a 5 step Account Creation Process. 

  1. “Account Creation”. Most likely use the name of your Golf Course/Country Club/Organization.

  2. “Property Creation”. Most likely use the name of your Golf Course/Country Club/Organization again.

  3. “Business Details”. Most likely select “Sports” and select the size of the business.

  4. “Choose your business objectives”. Select the topics most important to you. You will need to select at least one and agree to Google Analytics Terms of Service Agreement.

  5. “Data collection”. Select “Web” as the platform.

When it asks for the website URL, grab the Online Reservations URL, which can be found in settings.

 

You will need to change the url a little. The link you get from foreUP will look like this:

Cleaned up, the URL should look similar to this:
www.foreupsoftware.com/index.php/booking/19640/2158

Paste that into the Google Analytics URL, name the stream (again most likely the name of your Golf Course/Country Club/Organization), leave “Enhanced Measurement” toggle as is and finalize by clicking on: "Create Stream”

Once you click “Create Stream”, there will be a pop up. This can be ignored as this is handled automatically.

Close the window.

Once the window is closed, you will see a “Measurement ID”.

Copy the “Measurement ID”, this will need to be pasted into foreUP. Open foreUP, navigate to Settings > Online Customer Portal > Reservation View Settings, and paste the Measurement ID into the field below “Google Analytics 4 ID”.

Once you have your Google Analytics setup and your Measurement ID is saved in foreUP, navigate back to Google Tag Manager:
https://tagmanager.google.com/#/home

 

Step Four: Test Initial Configuration of Google Analytics Tag

There’s a button named “Preview” that we want to hit next. Once you do, you’ll see the following on the dashboard:

In a new tab, “Google Tag Assistant” will open to Connect Tag Assistant to your site. You will need to grab the Online Reservations URL again, which can be found in settings.

https://foreupsoftware.com/index.php/booking/19640/2158#teetimes

Paste your Online Booking URL and click “Connect” to Continue. This will open your Online Booking in a new window. Minimize the online booking window and open the tab that shows “Tag Assistant” which will have a flashing tab. You will see a pop up that says “Connected!” here. Click “Continue” to close this window.

There should be at least two tags on this page. One of these will be your Google Tag Manager ID and the other should be the Measurement ID. If not, navigate to foreUP Settings and ensure that both Google Tag manager Container ID & Google Analytics 4 ID are saved.

At this point, you can navigate to the Analytics Tab and see that Data Collection is active:

 

Step Five: Configure Google Analytics Triggers

We’re going to configure some triggers which tell events to track user behavior across your booking portal. To start, we’re going to follow similar steps to what we did above for tracking page views. Navigate back to your Google Tag Manager tab.

 

First, let’s go to the Triggers menu option in the side menu and create a new Trigger.

Click “New” to add a Trigger. Name your Trigger “Teetime Clicked”, then click on “Triger Configuration”

Once “Trigger Configuration” is clicked, scroll down near the bottom where you will see “Custom Event”. Click this.

Next, name the event “Teetime Clicked”, and for the option of when the trigger will fire, select “Some custom events”. A new row will appear, and fill that out as it looks in the image below:

This means that an event will be triggered whenever a tee time is clicked on, which will allow us to track whenever a user is considering a specific tee time to reserve. Hit “Save” in the top right.

 

Follow the same process using the following values as well:

  • “Teetime Canceled”
  • “Teetime Booked”
  • “Pending Reservation Expired”

IMPORTANT NOTE: You must spell it exactly as “Teetime Clicked” with those capital letters and everything. If the event is misspelled, it will not count properly. “Teetime Canceled” and “Teetime Booked”, and “Pending Reservation Expired” must also be spelled exactly.

 

After adding those values, this is what your Trigger list will look like:

If your goal was to integrate Google Analytics with Google Tag Manager, and tracking these events is all you want to do, you can stop! You should now be able to track users visiting your online booking portal and see your conversion rates!

 

If you want more data regarding bookings, such as how many players were booked, at what price, and for when, read on!

 

Optional Step Six: Getting More out of the Data

This step is focused on extracting the data from the events we’ve just created so that they can be used within Google Tag Manager and shared across other platforms. The actual sharing of the data to other platforms will not be covered, since there are many different options and we wouldn’t be able to cover all of them!

 

Google Tag Manager has Variables, which are configured to make it easy to access certain data sets within our events. As an example of this, go back into your open tab with your online booking portal. Click on a tee time and let’s look at the event data layer:

 

Navigate to your “Tag Assistant” tab. From here, select “Teetime Clicked”, then “Data Layer” as shown in the screenshot below:

As you can see, valuable information is being sent to Google Tag Manager, but how do we access it? Let’s do it now.

 

Let’s say you want to track the number of players for each tee time clicked on or booked. The process is the same:

  • Go back to your “Google Tag Manager” tab.
  • On the left side menu, select “Variables”.
  • Toward the bottom, you’ll see a “User-Defined Variables” section.
  • create a new variable here. (You may notice your Google Analytics ID here!)
  • Name your variable, “Player Count”.
  • For the variable configuration, choose the “Data Layer Variable” for the variable type.

Now, this next part seems tricky but actually is fairly simple. For the Data Layer Variable Name field, we need to drill down the layers that we see in the event data layer above (just under the Step Seven heading).

 

We’re going to start with “eventModal”, and then go to it’s child named “bookingDetails”, and then go to the child of “bookingDetails” named “playerCount”. That is the value we are looking for.

 

So in the “Data Layer Variable Name” field, if you wanted to access the playerCount data, you would enter “eventModal.bookingDetails.playerCount”, with a period (.) separating each layer.

 

For more information on this subject, check out this blog post. If you’re satisfied that in order to access any of those data points in the data layer, all you have to do is “eventModal.bookingDetails.{name of the data you want - spelled exactly how it’s written!}”, then you’re good to go!

 

Save the Variable, then go hit “Refresh” on your preview (the orange box in the dashboard). Go back to your online booking portal and refresh it, and click on a tee time.

 

In your “Tag Manager” window in the online booking portal, click on the “Teetime Clicked” event, and then the “Variables” section at the top. If you look towards the bottom, you should see a “PlayerCount” variable with the number of players beside it!

This is useful for the Teetime Booked event, because now you have a way of tracking not just a booking, but all the data within the booking as well!

 

Other trackable options:

  • teetimeStart
  • playerCount (completed above)
  • teesheetId
  • holes
  • payOnline
  • greenFeePerPlayer
  • greenFeeTaxPerPlayer
  • cartFeePerPlayer
  • cartFeeTaxPerPlayer
  • carts
  • availableSpots

Setting up the other variables is simple. Follow the instructions above and replace the “playerCount” with any of the options above!

 

Very important: All of these must be spelled just as they are written above in order for Google Tag Manager to recognize them and actually track them.

 

Conclusion

We’ve now successfully configured Google Tag Manager to track page view analytics and tee time clicks, bookings, and cancellations within Google Analytics, as well as extracted important booking data from the events for further analysis and use across Google Tag Manager and other platforms.

Related articles

Comments

0 comments

Please sign in to leave a comment.