How to Set Up Google Tag Manager (GTM) to Track RoofQuote PRO® Analytics Events

This guide walks you through setting up Google Tag Manager (GTM) to track RoofQuote PRO® widget events only on pages where the widget is embedded to ensure optimized performance and accurate attribution for Google Ads, Meta Ads, and other platforms

Requirements:

RoofQuote PRO® active subscription
Google Tag Manager account
Google Analytics account with GA4 Property
Google Ads Account
Meta Business Account

Overview:

RoofQuote 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 through Google Tag Manager will allow you to

• gather more insights about people using your tool and track key (conversion) events in GA4
• leverage conversions to optimize your ad campaigns (Meta, Google Ads, Tiktok)
• enhance attribution through storing data for each session

Step 1 - Detecting the Widget
Step 2 - Trigger when Widget Present
Step 3 - RoofQuote PRO Tracking script Tag
Step 4 - Extract Data Layers
Step 5 - Send Events to GA4
Step 6 - Test & Publish
Step 7 - Send Conversions to Google Ads
Step 8 - Send Conversions to Meta
Step 9 - Connect Meta CAPI via GTM

Setup:

Step 1: Create a Variable to Detect the Widget

Since we only need GTM to fire tracking scripts on pages that have the RoofQuote PRO® widget embedded, let's create a variable to track when the widget is present on the page.

1️⃣ Add a Custom JavaScript Variable

In Google Tag Manager, go to Variables → Click New.

1. Name the variable: RoofQuote PRO Widget Presence
2. Click Variable Configuration → Select Custom JavaScript.
3. Copy and Paste this code:
   

   • function() {
         return document.querySelector('script[src*="roof-quote-pro-widget.js"]') ? "sticky" :
                document.querySelector('script[src*="roof-quote-pro-embedded-widget.js"]') ? "embedded" :
                null;
     }

4. Click Save.

✅ This variable will return:

• • "sticky" if the slide-out widget is found.
  • "embedded" if the on-page widget is found.
  • null if no widget is present on the page.

---

Step 2: Create a Trigger for Pages with the Widget

Next, let's create a trigger that fires only on pages where the widget is present.

2️⃣ Set Up the GTM Trigger

Go to GTM → Triggers → Click New.

1. Name it: RoofQuote PRO Widget Loaded
2. Trigger Type: Select Page View.
3. Trigger Condition:
   • Select "Some Page Views".
   • Set the condition:
     RoofQuote PRO Widget Presence does not equal null
4. Click Save.

✅ This trigger ensures that GTM only loads the tracking script when the widget exists.

---

 

Step 3: Create a Tag to Track Events

Now, let's set up a Custom HTML Tag that listens for events and sends them to GTM.

3️⃣ Add the Tracking Script in GTM

Go to GTM → Tags → Click New.

1. Name the tag: RoofQuote PRO Tracking Script
2. Choose Tag Type:  Select Custom HTML
3. Paste this code:
   

   • <script>
     (function() {
         window.dataLayer = window.dataLayer || [];
     
         function captureQueryParams() {
             var params = new URLSearchParams(window.location.search);
             var trackingParams = ["utm_source", "utm_medium", "utm_campaign", "gclid", "fbclid", "ttclid"];
     
             for (var i = 0; i < trackingParams.length; i++) {
                 var param = trackingParams[i];
                 if (params.has(param)) {
                     sessionStorage.setItem(param, params.get(param));
                 }
             }
     
             if (!sessionStorage.getItem("session_id")) {
                 sessionStorage.setItem("session_id", Math.random().toString(36).substr(2, 9));
             }
         }
     
         function listenForWidgetEvents() {
             window.addEventListener("message", function(event) {
                 if (event.origin.indexOf("app.roofle.com") === -1) return;
     
                 console.log("Received event from widget:", event.data.event); // ✅ Debugging Log
     
                 var widgetType = document.querySelector('script[src*="roof-quote-pro-widget.js"]') ? "sticky" :
                                  document.querySelector('script[src*="roof-quote-pro-embedded-widget.js"]') ? "embedded" : "unknown";
     
                 var eventMapping = {
                     "Roof-quote-pro-viewed": "roofquotepro_viewed",
                     "Address-loaded": "roofquotepro_address_loaded",
                     "Contact-form-displayed": "roofquotepro_lead_form_displayed",
                     "Get-help-form-displayed": "roofquotepro_other_contact_form_displayed",
                     "Get-help-form-submitted": "roofquotepro_other_contact_submitted",
                     "Contact-form-submitted": "roofquotepro_lead_submitted",
                     "Product-requested-cta": "roofquotepro_product_requested"
                 };
     
                 var eventName = eventMapping[event.data.event];
     
                 if (eventName) {
                     console.log("Pushing to dataLayer:", eventName); // ✅ Debugging Log
     
                     dataLayer.push({
                         event: eventName,
                         eventCategory: "RoofQuote PRO",
                         eventAction: eventName.replace("roofquotepro_", "").replace(/_/g, " "),
                         eventLabel: "RoofQuote PRO Widget",
                         utm_source: sessionStorage.getItem("utm_source") || "",
                         utm_medium: sessionStorage.getItem("utm_medium") || "",
                         utm_campaign: sessionStorage.getItem("utm_campaign") || "",
                         gclid: sessionStorage.getItem("gclid") || "",
                         fbclid: sessionStorage.getItem("fbclid") || "",
                         ttclid: sessionStorage.getItem("ttclid") || "",
                         session_id: sessionStorage.getItem("session_id") || "",
                         timestamp: new Date().toISOString(),
                         widgetType: widgetType
                     });
                 } else {
                     console.warn("Event not mapped:", event.data.event); // ❌ Logs if an unknown event is received
                 }
             });
         }
     
         captureQueryParams();
         listenForWidgetEvents();
     })();
     </script>

4. Triggering: Select the RoofQuote PRO Widget Loaded trigger you created in Step 2.
5. Click Save.

---

Step 4: Set Up Data Layers to Extract Data in GTM

Now that the script is listening for events, we configure GTM to extract data and push those events into Google Analytics 4 (GA4).

4️⃣ Create Data Layer Variables

Go to GTM → Variables → Click New.

1. Create these Data Layer Variables:

   Variable Name	Data Layer Variable Name
   eventCategory	eventCategory
   eventAction	eventAction
   eventLabel	eventLabel
   utm_source	utm_source
   utm_medium	utm_medium
   utm_campaign	utm_campaign
   gclid	gclid
   fbclid	fbclid
   session_id	session_id
   widgetType	widgetType

Your data layer variables will look like this:

---

Step 5: Send Events to Google Analytics 4 (GA4)

5️⃣ Create GA4 Event Tag

Go to GTM → Tags → Click New.

1. Name the tag: GA4 - RoofQuote PRO Events

2. Choose Tag Type: Select Google Analytics: GA4 Event

3. Measurement ID: Paste your GA4 Data Stream Measurement ID
4. Name Event: RoofQuote PRO - {{eventAction}}

5. Configure the Event Parameters:

   Parameter	Value
   category	{{eventCategory}}
   action	{{eventAction}}
   label	{{eventLabel}}
   utm_source	{{utm_source}}
   utm_medium	{{utm_medium}}
   utm_campaign	{{utm_campaign}}
   gclid	{{gclid}}
   fbclid	{{fbclid}}
   session_id	{{session_id}}
   widget_type	{{widgetType}}

   

6. Triggering: Include the following Custom Event Trigger:

   • event matches regex roofquotepro_.*
     • Fire on Some Custom Events
     • eventCategory equals RoofQuote PRO

---

Step 6: Test & Publish

1. Click "Preview" in GTM and test on a page with the widget.
2. Open Google Tag Manager Debug Mode and check if:
   • RoofQuote PRO Widget Presence returns "sticky" or "embedded".
   • The RoofQuote PRO Tracking Script tag fires only on widget pages.
   • GA4 receives the following events:
     RoofQuote PRO - viewed
RoofQuote PRO - address_loaded
RoofQuote PRO - lead_form_displayed
RoofQuote PRO - lead_submitted
RoofQuote PRO - product_requested
RoofQuote PRO - other_contact_form_displayed
RoofQuote PRO - other_contact_submitted
3. If all works correctly, Click Submit → Publish in GTM.

✅ Once your events are set up, move to Google Ads & Facebook Ads tracking.

🎯 GTM Tracking for RoofQuote PRO® Conclusion

✅ Optimized tracking → No unnecessary scripts on non-widget pages.
✅ Improved marketing attribution → Captures UTM, GCLID, session IDs.
✅ Zero developer effort for contractors → Works dynamically.

---

 

Step 7 (Option 1): Send GA4 Conversions to Google Ads

GA4 can send conversions automatically to Google Ads if linked properly.

Link GA4 to Google Ads

1. Go to Google Analytics → Admin.
2. Under Product Links, select Google Ads Links.
3. Click "Link" → Select Your Google Ads Account → Click Confirm & Save.

✅ This ensures GA4 sends conversions directly to Google Ads.

Mark as Key Events for Conversion Tracking

1. In GA4 → Admin → Events, mark the following as key events:
   RoofQuote PRO - address_loaded
RoofQuote PRO - lead_submitted
RoofQuote PRO - product_requested
2. Toggle ON "Mark as Key Event".

✅ This ensures Google Ads sees the event as a conversion.

Import GA4 Conversions into Google Ads

1. Go to Google Ads → Goals → Click Conversions → Summary
   
2. Click New Conversion Action
   
   
   
3. If necessary, make sure your Google Tag is linked via GA4 or Google Tag → Click scan to find your tracking tags
   
   
   
4. Choose a conversion action to measure (e.g. Submit lead form or Request Quote)
   
   
5. Select Google Analytics 4 Property as conversion source → Click Setup
   
   
   
6. Select your Key conversion events
   
7. Save and continue

✅ Now, Google Ads will track GA4 conversions.

---

 

Step 7 (Option 2): Send Conversions Directly to Google Ads via GTM (Google Ads Conversion Tag)

For faster & direct tracking, use GTM to send Google Ads conversions.

Create a Google Ads Conversion Tag in GTM

1. Go to GTM → Tags → Click New.
2. Tag Type: Select Google Ads Conversion Tracking.
3. Enter Your Google Ads Conversion ID & Label (from Google Ads → Tools → Conversions).
4. Triggering: Use the same event as your GA4 conversion event

✅ Now, conversions fire directly in Google Ads via GTM.

---

Step 8: Send Conversions to Facebook (Meta) Ads

To send conversions to Facebook Ads, you need the Meta Pixel & Conversions API.

Verify Facebook (Meta) Pixel Is Installed

1. Go to Meta Business Manager → Events Manager.
2. Select your Pixel ID and check if it’s receiving data.
3. If not installed, add the Meta Pixel via GTM.

Add Meta Pixel via GTM

1. Go to GTM → Tags → Click New.
2. Tag Type: Select Custom HTML.
3. Paste this code (replace YOUR_PIXEL_ID):
   
   

   <script>
     !function(f,b,e,v,n,t,s)
     {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
     n.callMethod.apply(n,arguments):n.queue.push(arguments)};
     if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
     n.queue=[];t=b.createElement(e);t.async=!0;
     t.src=v;s=b.getElementsByTagName(e)[0];
     s.parentNode.insertBefore(t,s)}(window, document,'script',
     'https://connect.facebook.net/en_US/fbevents.js');
     fbq('init', 'YOUR_PIXEL_ID'); 
     fbq('track', 'PageView');
   </script>

4. Triggering: Select the RoofQuote PRO Widget Loaded trigger you created in Step 2.
5. Trigger: Fire on All Pages.
6. Click Save & Publish.
   
   

---

Send Facebook Conversion Events via GTM

1. Go to GTM → Tags → Click New.
2. Tag Type: Select Custom HTML.
3. Paste this code (for a lead event):

   <script>
     fbq('track', 'Lead');
   </script>

4. Trigger: Use the same conversion trigger as Google Ads (e.g., lead_submitted).
5. Click Save & Publish.

✅ Now, Facebook receives lead events directly from GTM.

---

 

Step 9: Use Facebook Conversion API
(Server-Side for Better Tracking)

For better conversion tracking (bypassing ad blockers), set up Facebook Conversions API (CAPI).

9️⃣ Enable CAPI in Facebook Business Manager

1. Go to Meta Events Manager → Select Your Pixel.
2. Click Settings → Find Conversions API.
3. Click Choose a Partner → Select Google Tag Manager.
4. Follow the setup instructions.

✅ This allows Facebook Ads to receive conversions via server-side tracking.

---

 

🔥 Final Checklist: