How to Set Up Google Tag Manager to Track RoofQuote PRO® Events and Optimize Ads

Requirements:

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

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

PRO TIP: Skip the guesswork—generate your setup instantly with our GTM Setup Tool and drop the container straight into your Google Tag Manager account.

Jump to a section:

Instructions
Google Ads (Optional)
Meta Ads (Optional)

Instructions:

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, create a variable to track when the widget is present on the page.
1. In Google Tag Manager, go to Variables → Click New.
2. Name the variable: RoofQuote PRO Widget Presence
3. Click Variable Configuration → Select Custom JavaScript.
4. Copy and paste this code:
```
function() {
return document.querySelector('script[src*="roof-quote-pro-widget.js"]') ? "slideout" :
document.querySelector('script[src*="roof-quote-pro-embedded-widget.js"]') ? "embedded" :
null;
}
```
5. Click Save. This variable will return:
  1. "slideout" if the slide-out widget is found.
  2. "embedded" if the on-page widget is found.
  3. null if no widget is present on the page.
Create a Trigger (Option 1): Default. Create a trigger that fires only on pages where the widget is present.
1. Go to GTM → Triggers → Click New.
2. Name it: RoofQuote PRO Widget Loaded
3. Trigger Type: Select Page View.
4. Trigger Condition:
  1. Select "Some Page Views".
  2. Set the condition: RoofQuote PRO Widget Presence does not equal null
5. Click Save. This trigger ensures that GTM only loads the tracking script when the widget exists.
Create a Trigger (Option 2): Custom Event Trigger. This is the preferred method for WIX websites or anytime an iframe is used to embed the widget rather than the widget scripts.
1. Go to Triggers → Click New.
2. Name the variable: RoofQuote PRO Events
3. Set Event name matches regex ^roofquotepro_.*
4. Fire on All Custom Events.
5. On your WIX parent page, add this script to listen for RoofQuote PRO Events:
```
// On the parent Wix page
window.addEventListener("message", function(event) {
if (event.data.event === "roofquotepro_viewed") {
window.dataLayer = window.dataLayer || [];
dataLayer.push({
event: event.data.event,
widgetType: event.data.widgetType
});
}
});
```

Create a Tag to Track Events. Set up a Custom HTML Tag that listens for events and sends them to GTM.

Go to GTM → Tags → Click New.
Name the tag: RoofQuote PRO Tracking Script
Choose Tag Type: Select Custom HTML.

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);

var widgetType = document.querySelector('script[src*="roof-quote-pro-widget.js"]') ? "slideout" :
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);

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);
}
});
}

captureQueryParams();
listenForWidgetEvents();
})();
</script>

Triggering: Select the RoofQuote PRO Widget Loaded or RoofQuote PRO Events trigger you created in the previous step.
Click Save.

Set Up Data Layers to Extract Data in GTM. Now that the script is listening for events, configure GTM to extract data and push those events into Google Analytics 4 (GA4).

Go to GTM → Variables → Click New.

Create the following 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`

For each variable:
1. Name the Variable using the Variable Name column shown above.
2. Choose Data Layer Variable.
3. Set the Data Layer Variable Name the same name as the Variable Name and set the Layer Version as Version 2.
Click Save, then repeat for each Data Layer in the column above.

Send Events to Google Analytics 4 (GA4)
1. Go to GTM → Tags → Click New.
2. Name the tag: GA4 - RoofQuote PRO Events
3. Choose Tag Type: Select Google Analytics: GA4 Event.
4. Measurement ID: Paste your GA4 Data Stream Measurement ID.
5. Name Event: RoofQuote PRO -
6. Configure the Event Parameters:
  
  Parameter Value
  
  category
  
  action
  
  label
  
  utm_source
  
  utm_medium
  
  utm_campaign
  
  gclid
  
  fbclid
  
  session_id
  
  widget_type
7. Triggering: Include the following Custom Event Trigger:
  1. Event name matches regex ^roofquotepro_.*
  2. Fire on All Custom Events or specify Some Custom Events (for instance eventCategory equals RoofQuote PRO).Send Events to Google Analytics 4 (GA4).
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:
  1. RoofQuote PRO Widget Presence returns "slideout" or "embedded".
  2. The RoofQuote PRO Tracking Script tag fires only on widget pages.
  3. GA4 receives the following events:
    1. RoofQuote PRO - viewed
    2. RoofQuote PRO - address_loaded
    3. RoofQuote PRO - lead_form_displayed
    4. RoofQuote PRO - lead_submitted
    5. RoofQuote PRO - product_requested
    6. RoofQuote PRO - other_contact_form_displayed
    7. RoofQuote PRO - other_contact_submitted
3. If all works correctly, click Submit → Publish in GTM.

NOTE: Once your events are set up, move to Google Ads & Meta Ads tracking below.

Google Ads (Optional):

GA4 can send conversions automatically to Google Ads if linked properly. Choose either Option 1 (via GA4) or Option 2 (direct via GTM).

Option 1: Send GA4 Conversions to Google Ads.
1. 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.
2. Mark events as Key Events for Conversion Tracking:
  1. In GA4 → Admin → Events, mark the following as key events:
    1. RoofQuote PRO - address_loaded
    2. RoofQuote PRO - lead_submitted
    3. RoofQuote PRO - product_requested
  2. Toggle ON "Mark as Key Event".
3. 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. Click Save and Continue.
Option 2: Send Conversions Directly to Google Ads via GTM. For faster & direct tracking, use GTM to send Google Ads conversions.
1. Create a Google Ads Conversion Tracking Tag:
  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 → Goals → Summary → Click a Conversion Action you want to track → Use Google Tag Manager).
  4. Triggering: Trigger on RoofQuote PRO events.
2. Create a Google Conversion Linking Tag:
  1. Go to GTM → Tags → Click New.
  2. Tag Type: Select Google Ads Conversion Linker.
  3. Triggering: Fire on All Pages.

NOTE: With either option complete, conversions will fire correctly in Google Ads.

Meta Ads (Optional):

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

Verify Meta (Facebook) 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 (see next step).

Add Meta Pixel via GTM.

Go to GTM → Tags → Click New.
Tag Type: Select Custom HTML.

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>

Triggering: Select the RoofQuote PRO Widget Loaded trigger you created in the Instructions section.
Trigger: Fire on All Pages.
Click Save & Publish.

Send Meta 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.
Connect Meta CAPI via GTM (Server-Side Tracking). For better conversion tracking (bypassing ad blockers), set up Meta Conversions API (CAPI).
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