How to set up Google Tag Manager to track Roof Quote PRO™ analytics events

Leverage analytics events emitted from your Roof Quote PRO™ tool to optimize your marketing through conversion tracking

Requirements:

Google Tag Manager account
Google Analytics account with GA4 Property
Roof Quote PRO™ active subscription

Overview:

Roof Quote PRO™ is designed to emit javascript events from the tool making it possible to track your users' interactions from within the tool. Tracking these interactions will allow you to

• closely track performance
• get more insights about people using your tool
• leverage conversions to optimize your ad campaigns

Google Tag Manager makes it easy to capture these events and store the data in your Google Analytics account.

Setup:

Step 1 - Create a Custom HTML Tag to log Roof Quote PRO™ events

To get started, login to your Google Tag Manager account and go to the website container that has Roof Quote PRO™ installed. Go to the Tags section, and create a new Custom HTML tag. Name it Roof Quote Pro. Then paste the following script in the HTML section:

<script>
  window.addEventListener("message", function (event) {
    if (event.origin.includes("app.roofle.com")) {
      if (!dataLayer) {
        console.warn("Google Analytics is not installed.");
        return;
      }

      // Track the widget was loaded
      if (event.data.event === "Roof-quote-pro-viewed") {
        send("roofquotepro_viewed");
      }

      // Track the address entered event
      if (event.data.event === "Address-loaded") {
        send("roofquotepro_address_loaded");
      }

      // Track the slope changed event
      if (event.data.event === "Slope-changed") {
        send("roofquotepro_slope_changed");
      }

      // Track the roof renamed event
      if (event.data.event === "Roof-renamed") {
        send("roofquotepro_roof_renamed");
      }

      // Track the roof inclusion toggled event
      if (event.data.event === "Roof-inclusion-toggled") {
        send("roofquotepro_roof_inclusion_toggled");
      }

      // Track the edit roofs clicked event
      if (event.data.event === "Edit-roofs-clicked") {
        send("roofquotepro_edit_roofs");
      }

      // Track the contact form displayed event
      if (event.data.event === "Contact-form-displayed") {
        send("roofquotepro_lead_form_displayed");
      }

      // Track the contact form submitted event
      if (event.data.event === "Contact-form-submitted") {
        send("roofquotepro_lead_submitted");
      }

      // Track the help/other contact form displayed event
      if (event.data.event === "Get-help-form-displayed") {
        send("roofquotepro_other_contact_form_displayed");
      }

      // Track the help/other contact form submitted event
      if (event.data.event === "Get-help-form-submitted") {
        send("roofquotepro_other_contact_submitted");
      }

      // Track the product detail requested event
      if (event.data.event === "Product-requested-cta") {
        send("roofquotepro_product_requested");
      }
    }

    function send(event) {
      console.log(
        "Roof Quote PRO™ sent the " + event + " event to Google Analytics"
      );
      dataLayer.push({
        event: event,
      });
    }
  });
</script>

Next, select the Trigger type as "Page View - DOM Ready" then save the tag.

Step 2 - Create GA4 Event tags for each event you want to track

You'll need to create a separate tag for each event you wish to track in Google Analytics. Let's start with views of the tool. Create a new tag, name it "GA4 Event - roofquotepro_viewed" and select the tag type "Google Analytics: GA4 Event". Set the Configuration Tag to "GA4 Configuration" and set the Event Name to "roofquotepro_viewed". 

Next you'll need to set a trigger, name it "roofquotepro_viewed". Choose the Trigger Type "Custom Event" and set the Event Name to "roofquotepro_viewed". Set this event trigger fires on "Some Events" and set the condition as "Event equals roofquotepro_viewed"
Save your new trigger. It should look like this:

Then save your new tag. It should look like this:

Repeat this process for each event you wish to track, using the following Event Names:

roofquotepro_address_loaded
roofquotepro_slope_changed
roofquotepro_roof_renamed
roofquotepro_roof_inclusion_toggled
roofquotepro_edit_roofs
roofquotepro_lead_form_displayed
roofquotepro_lead_submitted
roofquotepro_other_contact_form_displayed
roofquotepro_other_contact_submitted
roofquotepro_product_requested

Step 3 - Test your new tags

Once you've created tags for each event you want to track, you can preview your workspace changes by clicking the Preview button at the top right. A Tag Assistant page will open and ask you to Connect your website. When you click Connect, your website page will open and verify your tag is running. Go back on the Tag Assistant page and make sure all the new tags are showing. You should see the Roof Quote Pro tag under the Tags Fired section, and the others will be shown under the Tags Not Fired section until the tool is opened/viewed and each event is triggered.

Step 4 - Set up conversions in GA4

Log into your Google Analytics account and go to Admin > Account Settings > Conversions

Click New Conversion Event, and make the New Event Name the same name as the event. Do this for each event you want to track as a conversion. There are four primary conversion events we recommend you track:

roofquotepro_address_loaded
roofquotepro_lead_form_displayed
roofquotepro_lead_submitted
roofquotepro_product_requested

Once you set up each of these as a New Conversion event, Google Analytics will start counting them as conversions whenever they occur. You can use these conversions in your Google Ads to optimize your campaigns with conversion based bidding