SkyQuote Tracking in Google Analytics Using Google Tag Manager

This article will teach you how to set up Google Tag Manager to track SkyQuote Appointments, InstaQuote and Contact Form submissions in Google Analytics 4.

Introduction

SkyQuote InstaQuotes, Appointments and Contact Forms are powerful tools for your roofing website. When a customer of yours fills in a InstaQuote or Contact Form, their information automatically shows up in your leads dashboard and Appointments show up in your Appointments dashboard. Getting the roofing lead is obviously the most important part, but you also need to be able to see some metrics on how leads are performing on your website. You need to know how many people are signing up for roofing appointments, submitting InstaQuote leads, or filling out contact forms on your site. Maybe you have multiple contact forms and want to see metrics on how they are performing. More importantly, if you are running ads, emails, or other campaigns, you want to keep track of your conversions so that you can see what campaigns are returning the most return on investment for your roofing company.

Google Analytics is a free tool that most roofers use on their website to track everything from page views and visits to leads. This article will show you how to track your Appointments, InstaQuote and Contact Form submissions with Google Analytics. There are many ways to do this, and many tutorials out there that you can read from. We are going to focus on using Google Tag Manager as the solution instead of directly working with Google Analytics. There are many reasons why we recommend Google Tag Manager as the solution for your roofing website tracking needs. They include but are not limited to:

Simpler Implementation & Management

• You don’t need to manually edit your website’s code every time you want to track a new event
• You can add additional tags for other platforms without having to get your website developer involved
• Changes are instant as soon as you publish a new version through the UI

More Flexibility

• All tracking is managed through a single, fairly user-friendly interface that gives you a lot of flexibility and integrates with a lot of other platforms besides Google Analytics
• You don't have to rely on a bunch of WordPress plugins

Built-in Debugging and Version Control

• Google Tag Manager provides a Preview Mode to test tracking before publishing, ensuring that data is being captured correctly
• Version control allows you to roll back to previous configurations if needed

Support for Ad Conversion Tracking

• Google Tag Manager makes it easy to manage multiple analytics tools (Google Ads, Facebook Pixel, LinkedIn Insights, etc.) from a single place

Hopefully, this paints a good picture of why we recommend Google Tag Manager to manage analytics and other tools on your roofing website.

Prerequisites

This article assumes a basic understanding of Google Analytics and some Google Tag Manager concepts. If you have never used Google Analytics before, we advise you to start by watching some YouTube Videos to understand the concepts. We'll cover some of the simple basics in Google Tag Manager just as a review to help make sense of the steps involved. We assume you have create a Google Tag Manager workspace and a Google Analytics property for your website. If you have not, here are a couple of great articles to get you started. There are also a lot of videos on YouTube.

• How to Install Google Tag Manager on your Website
• How to Install Google Analytics

Note: It is not necessary for SkyQuote tracking to have GTM and GA on your website, though its recommended to track normal page views and other things on your website. SkyQuote has its own GTM tag integration as you will see soon.

Key Concepts in Google Tag Manager

To effectively use Google Tag Manager, it’s essential to understand its core components: Tags, Triggers, Variables, and the Data Layer.

Tags – The Tracking Mechanism
Tags are snippets of code that send data to third-party services like Google Analytics, Google Ads, or other marketing platforms. In Google Tag Manager, you configure tags to fire based on specific conditions instead of embedding them directly into your website's code. Google Analytics has two types of tags in Google Tag Manager. One is the Google Tag. This is the basic Google Analytics tag that you set up to track normal website traffic like visits, page views, etc. The other tag is a Google Analytics: GA4 Event. This is a special tag that creates an Event within Google Analytics to track various things like contact form submissions, news letter sign ups, etc. We will be using it to track our SkyQuote Contact Form submission.

Triggers – Define When Tags Fire
Triggers tell Google Tag Manager when a tag should execute. They listen for specific user actions or page events and determine whether a tag should be fired. Google Analytics has a number of pre-defined tags like Initialization (which fires when the page is loading and is typically what triggers the normal Google Analytics Google Tag), Page Views, Element or Link clicks, etc. Each one of the triggers can be constrained to fire if so desired. For example you can set up a Page View Trigger to fire on all pages, or just a specific page like a Contact Form Thank You page which is how some people track contact forms.

You can define your own custom tags as well in Google Tag Manager to do whatever you want. This is what makes it so incredibly powerful. We'll be setting up a special Custom Event trigger that looks for a particular action happening on a page. In our case, these are SkyQuote events that are published for Appointments, InstaQuote and Contact Forms.

Variables – Store Dynamic Values
Variables hold dynamic values that can be used in tags and triggers. They help capture important data such as form IDs, button clicks, or page URLs. Google Tag Manager provides both built-in and custom variables. Examples of built-in variables are URL which holds the value of the page URL that a trigger fires on, and a Click Text variable which could store the name of a button that was pressed. You can also define your own custom variables to store whatever you want. We use custom variables to store things like the Contact Form Name, the name of the Service the appointment is being booked for, and the timeline for InstaQuote.

Data Layer – Coding Magic
The data layer is a JavaScript object that temporarily stores data on a webpage and makes it accessible to Google Tag Manager. The data layer enables a structured way to pass event information to Google Tag Manager. This part typically relies on your web developer to add some special code on your website to pass what ever information you are interested in. SkyQuote Contact forms have this code built in, so it just works wherever a SkyQuote Contact Form is on your website (assuming that page includes the Google Tag Manager script).

When a SkyQuote Contact Form is submitted the SkyQuote code includes a little bit of Javascript that pushes information about the form being submitted. The code looks like this:

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
    'event': 'SkyQuote Contact Form Submitted',
    'skyQuoteFormName': this.formName,
    'skyQuoteFormId': this.formId
});

Google Tag Manager then picks up this event and processes it according to your tag and trigger setup. The name of the custom event is SkyQuote Contact Form Submitted. There are two custom variables submitted with it which are the name of the form and the id of the form. This information can be passed to Google Analytics so you can track contact form submissions. If you have multiple contact forms on your website (maybe one for roofing enquiries and another for financial enquiries) the name of forms help indicate the particular form that was submitted.

When a SkyQuote Appointment is booked the code looks like this:

window.dataLayer.push({
    'event': 'SkyQuote Appointment Scheduled',
    'skyQuoteCategoryName': 'Roof Inspection Serivces',
    'skyQuoteServiceName': 'Free Roof Inspection & Estimate'
});

Google Tag Manager then picks up this event and processes it according to your tag and trigger setup. The name of the custom event is SkyQuote Appointment Scheduled. There are two custom variables submitted with it which are the name of the general service category (Roof Inspection in this example) and the specific service (Free Roof Inspection & Estimate in this case) for which the appointment is being booked. This information can be passed to Google Analytics so you can track the type of appointments being booked if you are interested.

When a SkyQuote InstaQuote is booked the code looks like this:

window.dataLayer.push({
    'event': 'SkyQuote InstaQuote Submitted',
    'skyQuoteTimeline': 'Immediately'
});

Google Tag Manager then picks up this event and processes it according to your tag and trigger setup. The name of the custom event is SkyQuote InstaQuote Submitted. There is one custom variable submitted with it which is the timeline (Immediately, 1-3 Months, etc.) that the customer is thinking for roofing work. This information can be passed to Google Analytics so you can track this if you are interested.

That's a summary of the pieces involved. Let's get it set up.

Setting up SkyQuote Contact Form Event Tracking

Step 1: Integrate Google Tag Manager with SkyQuote

To configure SkyQuote to use GTM properly, it is necessary to integrate GTM with SkyQuote. To do this you need to get your Google Tag Manager ID. Login to Google Tag Manager, and navigate to your workspace. You should see a screen like this:

Copy your workspace ID from the top of the screen. The workspace ID is located where the red arrow points in the diagram. Do not copy the ID from the diagram (which is just an example), but your own ID from your Google Tag Manager account.

Login to SkyQuote, click Settings and then click Integrations. On the Integration Screen you will see a Google Tag Manager section where you can enter your Google Tag Manager Workspace ID. Enter your Google Tag Manager ID in the Google Tag Manager section and press save. Here's an example:

SkyQuote will now be able to publish events using your Google Tag Manager. Note: SkyQuote needs to be configured this way as some of the tools are served up using iFrames on your website. Because they are in a iFrame, they do not necessarily have access to any scripts running on the same webpage that the tool is on. So even if you have Google Tag Manager on your website, it is still necessary to do this step.

Step 2: Merge SkyQuote Google Analytics Tags

There a bunch of variables, triggers and tags to setup in Google Tag Manager. Rather than have you walk you through a bazillion steps, you can just import the following container code. It will do the following:

1. Create 5 variables for all the data layer custom variables we are passing
2. Create 3 triggers for each type of event (Contact Form, InstaQuote, and Appointment)
3. Create 3 tags for each event, and 1 optional one for Google Analytics in particular in case you do not already have set that up

Before doing this, you will need get your Google Analytics Measurement Id. This can be a bit tricky to find if you don't already have it. So follow these steps:

1. Open Google Analytics
2. Select the settings icon in the lower-left-hand corner of the window. This will bring up your Admin screen.
3. Find the section called Data collection and modification. It will probably be on the right hand side about half-way down your screen
4. Click Data Streams
5. Select your website
6. You'll see details about your stream include the name, url, stream id and measurement ID.
7. Copy your measurement ID. It's the string that starts with G- followed by a bunch of characters.

Now that you have your measurement ID, download this file that you will import into Google Tag Manager. Click the following download button.

This should download a file named GTM-sample-workspace.json to your computer. Using a text editor, open the file and find REPLACE_ME and replace that with your measurement id. Make sure to keep the quotation marks. Save the file.

Now, let's apply this to your container.

1. In your workspace in Google Tag Manager, click the Admin tab.
2. Under the container, select "Import Container"
3. Select Merge for Import Option (DO NOT SELECT OVERWRITE)
4. Select Overwrite conflicting tags, triggers, and variables
5. Select Default Workspace
6. Click on Choose Container File
7. This will open a file manager on your computer
8. Select the GTM-sample-workspace.json file you edited
9. This will show you a preview of what it will do
10. Click Add to workspace

This should import everything you need. Double check one value. Under Variable, select Google Analytics Measurement Id and make sure it is the value you replaced the REPLACE_ME string with. If not, enter your Google Analytics measurement ID in the value and save.

Click through the variables, triggers and tags so you can see how things are setup. Another thing to double check is one of the triggers to make sure your analytics tag is setup correctly. For example click on the tag GA4 Event - Generate Appointment Booked tag. You should see a page that looks like this:

Everything should look the same. If not something either did not get setup correctly, or your Google Analytics measurement ID was not correct.

Your tags are now set up. Time to debug and make sure everything looks right.

Step 5: Testing the Setup

Your tag is all setup and ready to try out. We have yet to publish it to your website. Before doing so, it is always a good idea to run a test and make sure everything works correctly. Google Tag Manager has a great preview function that allows you to do just that.

At the top-right of Google Tag Manager is a button called Submit and a button called Preview.

Click the button called Preview. This bring up a preview dialog

Type in the name of the URL that contains your SkyQuote Contact Form and press Connect. This will open that page in a new window or tab.

On your new window fill in the contact form and press submit.

Back on the previous window where you were in Google Tag Manager you should see a page like this:

Click the Continue button. On the left hand side of the screen is a bunch of different events that have been captured.

You should see an event for SkyQuote Contact Form Submitted in the left-hand side. Click on it, and you'll see what tags were fired. You should see a GA4 Event tag like in the example.

If you click the variables tab, you should see a page like the following:

Make sure you see an _event called SkyQuote Contact Form Submitted and farther down the page you should see a variable for sq-formName.

If you do not see these values, something is not set up correctly, so you will need to troubleshoot. Otherwise, congrats! We just need to publish this now.

To learn more about the powerful Google Tag Manager preview tool you can search YouTube or read articles like A Guide To Google Tag Manager Preview Mode.

Step 6: Publishing and Verifying in Google Analytics

To make this live and start tracking, you need to save your Google Tag Manager changes.

In Google Tag Manager, click on the Submit button in the upper-right-hand corner. Give a name and description for your changes. Version names can be whatever you want. "Setup SkyQuote Tags" is an example of what you could type.

Click the Publish button. After a few seconds, your changes will be live!

Google Analytics may take a while to show changes since it's not truly real-time. In Google Analytics you can find your form submissions on the Engagement report under the Life cycle section. There are a lot of events that Analytics track, so make sure you to set your Rows Per Page to a high number so that you can see all your events. You should eventually see an Event Name called "generate_lead", "instaquote_lead" and "book_appointment" events.

Google Analytics also has "Key Events". These key events show up on pages like your Realtime Overview. I would highly recommend setting up "generate_lead", "instaquote_lead" and "appointment_booked" as Key Events, as they are probably the more important events on your website. You can set these up on your Admin Page under PropertySettings->Data Display->Key events. See Google's About Key Events for more information.

If your events are not showing up but everything looked good in Google Tag Manager, you can use Google Analytics debugger to make sure the event is being received. A good resource to learn more is DebugView in Google Analytics 4. Alternatively, reach out to us at [email protected] and we'll be happy to help.

Step 7: Tracking Different Form Names, InstaQuote Timelines, & Appointment Types in Google Analytics

As you have seen, with everything set up correctly, Google Analytics will show generate_lead events whenever a customer submits a contact form. But what if you have multiple forms on your website and want to see which forms are being submitted? Similarly what if you want to tracke the appointment service categories or names and InstaQuote timelines? There are different ways to do this.

Option 1:

The first approach is to add custom definitions to Google Analytics. In Google Analytics, click the gear icon in the lower-left corner. This will take you to the Admin screen. Under the Data display section, click the Custom definitions menu item. This will open the Custom Definitions page.

On this page, click the Create Custom Dimension button and enter the following information:

• Dimension name: SkyQuote Contact Form Name
• Scope: Event
• Description: Name of contact forms being submitted
• Event parameter: sq_contact_form_name

Click Save. This tells Google Analytics to look for this variable being passed in via an event and store information about it.

Similarly add dimensions for the other variables.

Service Category

• Dimension name: SkyQuote Appointment Service Category
• Scope: Event
• Description: Category of services being schedule for appointments
• Event parameter: sq_appointment_service_category

Service Name

• Dimension name: SkyQuote Appointment Service Name
• Scope: Event
• Description: Name of services being schedule for appointments
• Event parameter: sq_appointment_service_name

InstaQuote Timeline

• Dimension name: SkyQuote InstaQuote Timeline
• Scope: Event
• Description: Timeline customers are interested in from InstaQuote
• Event parameter: sq_instaquote_timeline

When done you should have a screen that looks like:

To see the information, click the Explore menu on the left-hand side of the screen. This will open a screen that asks you to choose what kind of report to create. Select "Free Form." This opens a very complex-looking screen that allows you to create a report with a variety of different settings. Don't worry — it looks more intimidating than it actually is.

Let’s start making the following changes (working from the left-hand side of the screen to the right):

1. Change the Exploration Name to "Contact Forms"
2. Leave the date range to "Last 28 days" unless you want to select something else
3. Under Dimensions, click the + sign
4. This opens another screen. At the very top of the screen is a search bar. Search for "custom."
5. You should see a checkbox for SkyQuote Contact Form Name. Check it and the other SkyQuote dimenstions and press Confirm.

The dialog closes and we are back on the Explore page:

1. At the bottom of the Dimensions section, you should now see an option for SkyQuote Contact Form Name
2. Drag that item to the Rows section
3. There most likely is another item in Rows called City
4. Hover over it and an X should appear
5. Click on the X to delete it
6. The page should now look like this:

You will most likely not see anything but (not set) being displayed in the report. This is because it can take up to 24 hours for Google Analytics to process events. Just make sure to submit a test form, and come back later to confirm that the information is coming in.

You're done. It's not obvious at all, as there is no save button — Google just saves it automatically. If you click on the Explore menu item again, you will return to the Explore page and your report should be listed. Click it to run it.

Repeat this process for the Service Categories, Service Names, and Timelines.

Option 2:

There's another approach so that you don’t have to go the custom definition route. This approach involves setting up different triggers and events in Google Tag Manager so that you generate a custom event for each form type.

To do this, you will need to create a unique trigger and event for each one of your form types. For example, the following trigger fires an event only when the "sq - formName" data variable is equal to "SkyQuote Contact Us." Any other contact form will be ignored by the trigger.

Then you create an event just for that trigger and make the event name unique. Note that in this approach, you don’t need to pass any data variables as custom parameters to GA4, as the event contains all the information you need.

This approach is very clean in Google Analytics as everything is its own event, but it's a lot of steps and lot of tags and triggers in the Google Tag Manager.

Note: You want to mark all your events as a key event in Google Analytics like we did above as well.

You can do the same thing for InstaQuote and Appointments. Just create different triggers and events for each thing you want to track separately as event in Google Analytics.

SkyQuote Analytics

This is good time to remind you that SkyQuote also comes with its own built-in analytics.

With SkyQuote Analytics, you can get a quick picture of how Appointments, InstaQuote Leads and Contact Forms are performing on your website. You can get an idea of trends vs previous periods, see what contact forms have the most submissions, what the status of those leads are, and even see things like what time of day or day of the week is the most common for your clients to submit contact forms. If you have multiple contact forms (different configurations in SkyQuote) and each contact form has had at least one submission during the time period you’re viewing, there will be a Contact Type card shown in the SkyQuote Analytics dashboard that breaks down the various contact forms that were submitted.

Conclusion

We hope you found this article helpful and are now successfully tracking SkyQuote leads and appointments in Google Analytics. If you need help please reach out to [email protected]. We are happy to help.