Opus1.io allows you to easily add your GTM container to the booking engine, and track Self Bookings, Leads, and other interactions throughout the booking funnel.
Introduction to Google Tag Manager (GTM)
Google Tag Manager is a free tool that allows you to easily deploy analytics and tracking tags with a high level of flexibility and customization.
opus1io allows you to easily add your GTM container to the booking engine, and track Self Bookings, Leads, and other interactions throughout the booking funnel.
GTM is our recommended solution for tracking opus1io interactions with Google Analytics, Google Ads, Meta Ads, and all other analytics and tracking platforms.
How to set your Google Tag Manager ID in opus1io
First, you need to find your GTM ID. Visit https://tagmanager.google.com/
If you already have a GTM container created, your ID should be displayed in the account listing page, and in the admin tab within the container settings. The ID is a string of characters beginning with GTM-
Now, log in to your opus1io account, and visit Settings > Business > Edit Business Information. There is a field to paste your GTM ID.
Tags, Triggers, and Variables
Google Tag Manager allows you to deploy snippets of code, called “tags”, and connect them to actions that people tag on your website, called “triggers”. Variables add another layer of detail by allowing you to pass dynamic data to your tags.
An example of this might be a conversion tag for your Google or Meta ad campaigns that fires when someone completes a self-booking. Or a Google Analytics pageview tag that fires on each page.
Events available to you to use as Triggers
Opus1io exposes a number of events to the data layer as your users progress through the self-booking funnel. To use these, set up a Custom Event trigger in Google Tag Manager that references the event names below.
|
Event Name |
Description |
|
PageView |
Because opus1io is a web app, the standard pageview trigger in GTM won’t work properly. Use this custom event if you want to have tags that fire on each “page” view. |
|
StaffListDisplay |
A list of available staff is displayed. |
|
StaffSelection |
A staff member is selected and the calendar of availability is shown. |
|
TimeSlotSelection |
A time slot is selected. |
|
Register |
A new account has been created. |
|
Purchase |
A booking is completed. |
|
LeadCapture |
A lead form has been submitted. |
Variables available to you through the Data Layer
In addition to the custom events listed above, opus1io also passes rich data into the data layer that you can use via GTM’s data layer variables.
This is not a comprehensive list of all the content in the data layer, but these are some of the fields that may be helpful:
|
Field |
Description |
|
production |
Designates if this is on the live site, or an internal staging site. Values are true and false. If you only want your tags to fire on the live site, add a filter to your triggers that checks if this value is true. |
|
page |
The internal name of the “page” or screen the user is viewing. Helpful for tracking “page” views in Google Analytics. |
|
service.serviceName |
The name of the service that is being booked. |
|
service.serviceTags |
The internal tags associated with the service that is being booked. Helpful if you offer different lesson types and only want to fire your ad conversion tags on certain bookings (such as trial lessons for new customers versus makeup lessons for existing customers). |
|
staff.staffName |
The name of the staff member selected. |
|
slot.locationName |
The name of the location selected. |
|
quote.totalDue |
The total amount being billed. Useful for tracking payments. |
The best way to access the full data layer and inspect the data layer values throughout the booking process is via GTM’s preview/debug tool.
Here’s an example of the data layer on the booking summary screen:
{
event: "PageView",
gtm: {uniqueEventId: 455, start: 1656633044255},
type: "SelfBooking",
page: "BookingSummary",
production: true,
service: {
serviceId: "1f140fe0-859c-49be-8acc-12c176a3f36f",
serviceName: "Piano Trial Lesson - 30 Mins",
serviceTags: ["piano", "trial lesson", "30 mins", "age 5-7"]
},
staff: {
staffId: "a145bb84-61f1-4bea-a20a-1e0183299d59",
staffName: "Kyle J"
},
plan: {name: "Single Visit"},
slot: {
locationId: "71ffd8ea-d78f-4cec-ba21-066cb48c669f",
locationName: "Opus 1 - Palo Alto",
staffId: "a145bb84-61f1-4bea-a20a-1e0183299d59",
staffName: "Kyle J",
timezone: "America/Los_Angeles",
startAt: "2022-07-08T23:30:00+00:00"
}
}
Example - Tracking a Meta Ads conversion on Self Booking
In this example, let’s set up a conversion event for our Meta Ads account that only fires when someone completes a self booking for a trial lesson.
First, we need to establish a variable that captures the service name, because we only want our conversion tag to fire on trial lessons.
In GTM, navigate to Variables > New. For Variable Type, choose Data Layer Variable. Then, input service.serviceName into the Data Layer Variable Name field.
Name your variable and save it.
Then, set up a new Custom Event trigger. Whenever someone completes a self booking, the Purchase event fires, so use that.
We don’t want to fire our ad tag on EVERY self booking, only trial lessons. So let’s add a filter so this only fires when the service name has the word “Trial” in it. Select the variable we just created and have it match when the service name contains “Trial”.
Finally, let’s create a tag to associate with this trigger. For Meta events, create a new Custom HTML tag. Refer to Meta’s documentation for the exact specifications for all the events they support. Here’s an example of one.
We then associate this tag with the trigger we just created.
For this to work, make sure you also have the base Meta pixel deployed as well in a separate tag that fires on all pageviews.
We should be all set. Make sure you publish your container to push these changes live.
GTM Recipe with pre-configured triggers and variables
We’ve compiled most of the common variables and triggers into a recipe that you can download and import into your own GTM workspace.
In Google Tag Manager, visit the Admin tab, then Import Container. Select the JSON file that you just downloaded from the link above. Make sure you select the merge option if you have other tags/triggers already set up in your container.
Does this seem too complicated? Our marketing partner Red Blind Media offers turnkey support for deploying the entire GTM tracking package. They also offer ongoing digital media campaign management (Google Ads and Meta Ads) for music schools.