How to Integrate Google Analytics with the Solar Wizard

GTM Account and Container setup

These instructions assume that you have already set up a GTM account and container. For more information, please visit https://support.google.com/tagmanager/answer/6103696?hl=en

The first step in tracking GTM is to set up your triggers. Triggers come from the website and are identified by name. The “Next” button click on every page will trigger an event for GTM to capture. Each page will expose a trigger by name. In order to track a particular slide, you will have to get the class name from the HTML within that page. You can use Developer Tools within most browsers to find the class.

Note: This may require some basic HTML knowledge.  

1. Open the Roofing Ruler.
2. Open Developer Tools.
3. From the HTML, click on the element selector.
4. Click on the Next Button.
5. The HTML element that will be highlighted will look something like this: lite-wizard” type=”button”<
6. The class you’re looking for (highlighted here in red as an example) is the class you will need to track that particular page.

Each page will have a class unique to that slide.  Take note of this class, as you will use it in the following sections.
* The one exception is the first slide, which will either be “lite-wizard” or “full-wizard.”  This is to differentiate between which path is selected.  Any other slide will only have one class that describes that slide.

You can choose to track any or all of the pages individually. For example, you may want to know how many steps the user has completed before quitting.  You may also choose to milestone events, such as when the user enters their address and uploads a bill.

For any given tracking scenario, the steps are the same.

Steps to create a new Trigger:

1. From your Triggers left-hand navigation, click New in the upper right corner.
2. Click on Trigger Configuration.
3. From the Choose Trigger Type menu, choose All Elements.
4. Click on Some Clicks.
5. In the Conditions dropdown, choose “Click Classes” and “Contains.”
6. For the condition, enter the Trigger Name associated with the screen you wish to capture.  For example, I would like to track anyone who invokes the Quick Path.  In this case, I will enter “lite-wizard” as the condition.
7. Name your trigger any name that you feel would be useful (for example, Quick Path Click).

Now that you have created triggers, you can send those events to any tagging system.  GTM will not only support Google Analytics, Criteo, Quantcast, Facebook Pixel, Nextdoor, and Adroll Smart Pixel, as well as many more standard tags, but you can implement your own custom HTML for proprietary integrations. We will discuss here how to implement Google Analytics.

Google Universal Analytics

For Google Universal Analytics, you will have to set up a configuration tag to connect to your UA property.  Then you will set up a conversion event for each of the events you would like to track.  The process is the same for each conversion tag.

Tag Creation

To send events to UA, you will have to create a tag for each trigger.  Each tag must use a defined set of 4 fields that in combination represent your conversion.  These 4 fields are matched to your UA property in order to create the conversion.

UA Event Tag

To create a UA event tag from the Tags page

1. Click New.
2. Give your Tag a Name.
3. Click Tag Configuration.
4. Choose a Tag Type – Click on Google Analytics: Universal Analytics.
5. In the Track Type dropdown, select Event.
6. The following set of fields is completely up to you.  These fields MUST match the same set of fields when you set up the UA conversion. The only requirement is that the combination of the 4 is unique to the conversion.  For Roofing Ruler, we advise setting all the same for each conversion except the Label that identifies the specific conversion.  Below are some guidance and examples of what values to set:
   1. Category: Set a category to group these conversions together (e.g., Roofing Ruler)
   2. Action: The action performed on the site to trigger the conversion (e.g., Button Click)
   3. Label: The specific name of the conversion (e.g., lite-wizard)
   4. Value: A conversion value (e.g., 1)
7. In the Google Analytics Setting textbox, input the UA tracking ID associated with the GA property.
8. In the Triggers section, select the previously created trigger that correlates to this conversion (using the same example, it would be the trigger associated with “lite-wizard”).
9. Click Save.

Google Analytics 4

For Google Analytics 4, you will have to set up a configuration tag to connect to your GA4 property.  Then, you will set up a conversion event for each of the events you would like to track.  The process is the same for each conversion tag.

Tag Creation

To send events to GA4, you will have to create a tag for each trigger.  There are 2 components; one is the GA4 configuration tag and the other is the GA4 Event tag.  The configuration tag specifies your instance of the GA4 property.  This must be created once and can be reused for each event tag.

GA4 Configuration

To create the GA4 configuration tag from the Tags page

1. Click New.
2. Give your Tag a Name.
3. Click Tag Configuration.
4. Choose a Tag Type – Click on Google Analytics: GA4 Configuration.
5. Name the tag.
6. Enter the GA4 Measurement ID.
7. Click Triggers.
8. Choose All Pages.

GA4 Event Tag

To create a GA4 event tag from the Tags page

1. Click New.
2. Give your Tag a Name.
3. Click Tag Configuration.
4. Choose a Tag Type – Click on Google Analytics: GA4 Event.
5. In the Select Configuration Tag dropdown, select the previously created GA4 Configuration Tag.
6. In the Event Name textbox, give the event a unique name that identifies this conversion.  In our previous example, we were tracking when the user selected Quick Path.  Continuing this example, we can name this event “Quick Path” (although it can be any name you choose that’s recognizable to you and fits your strategy).
7. In the Triggers section, select the previously created trigger that correlates to this conversion (using the same example, it would be the trigger associated with “lite-wizard”).
8. Click Save.

Now that you have created your tags, the next step is to create conversions.  Conversions are created differently in Google Analytics 4 and Google Universal Analytics.

This section assumes you have already created a Google Property.

Google Analytics 4

To create your conversions in Google Analytics 4, you must create a conversion for each event tag created in GTM.  The name of the event specified in GTM must match the name of the conversion event in GA4.

From your GA4 property:

1. Click Conversions on the left-hand navigation.
2. Click the New Conversion Event Button.
3. Specify the same name of the event that was specified for the correlating tag in GTM.

Google Universal Analytics

For UA events, you will create Goals to track your conversions.  There is a maximum of 20 goals you can create per property.  The values for the event goals will be the same correlating values you entered into Tag Manager (Category, Action, Label, Value).

From your Universal Analytics property:

1. Click Admin from the left-hand navigation.
2. Under View, click Goals.
3. Click New Goal.
4. Under Goal Setup, click Custom.
5. Click Continue.
6. Under Goal Description, Name your Goal.
7. Choose the Event type.
8. Click Continue.
9. Under Goal Details, enter the same values for the correlating GTM tag that specified the conversion (Category, Action, Label, Value).
10. Click Save.

In order to verify that your conversion will work, you can run a test in Google Analytics.  Open both Google Analytics and Google Tag Manager in separate tabs.

Tag Manager debugging

1. From Tag Manager, go to your container and click Preview in the upper right corner.
2. Put the URL of the solar calculator and click Connect.
3. Click through your Roofing Ruler.  For each conversion that correlates to a page, you will see that conversion under the Tags Fired section.

Now that you’ve seen that your tags will be fired, the next step is to check Google Analytics to verify that your conversion is recorded correctly.

Google Analytics 4 debugging

1. From Google Analytics, click on Debug View.
2. Check the Debug View pane for your conversion.  If the conversion is recorded properly, the event will be Green.

Google Universal Analytics

For Google Universal Analytics, you will have to set up a configuration tag to connect to your UA property.  Then, you will set up a conversion event for each of the events you would like to track.  The process is the same for each conversion tag.

The following instructions allow you to set up conversions for the Roofing Ruler.  It assumes you already have UA set up.

1. From the left-hand navigation, click on Realtime, then click Conversions.
2. In the main window, you should see the conversions that have been triggered from Tag Manager within the last 30 minutes.