Integrating with Google Tag Manager and Google Analytics

Lead Scheduling Widgets

The Funnel Appointment Scheduling and Lead Widget use iframes to display their content to ensure they don’t have affect the page in which they are embedded in any unintentional ways. Unfortunately, Google Tag Manager cannot track content within iframes by default.

To solve this issue, the widgets accept an onComplete callback which executes an arbitrary javascript callback when the widget is submitted. You can then interface with Google Tag Managers by creating a custom event and using the dataLayer API to trigger it.

Here is an example of our widget embed codes with an onComplete callback.

Appointment Scheduler

<script src="https://integrations.nestio.com/contact-widget/v1/integration.js" id="nestio-lead-capture-frame"></script>
<script type="text/javascript"> NestioLeadCapture({
  "type": "lead_capture_appointment",
  "key": "FUNNEL_API_KEY_HERE",
  "group": 9,
  "color": "74FFE7",
  "location": "123 First St.",
  onComplete: function() {
        dataLayer.push({'event': 'lead-form-submission'});
  }
})</script>

Lead Form

<script src="https://integrations.nestio.com/contact-widget/v1/integration.js" id="nestio-lead-capture-frame"></script>
<script type="text/javascript"> NestioLeadCapture({
  "type": "lead_capture",
  "key": "FUNNEL_API_KEY_HERE",
  "group": 9,
  "color": "74FFE7",
  "location": "123 First St.",
  onComplete: function() {
        dataLayer.push({'event': 'lead-form-submission'});
  }
})</script>

Step by Step Guide

Ensure the script tags for Google Tag Manager are included on the page you are embedded the Funnel widget. If not, follow the steps on the quickstart guide.
In the Workspace View, select the Tag you want to use
In the Tag view, select the button to add a new Trigger.
In the “Choose a trigger” Pop-Up, select the add new button
In the type pop-up, select “Custom Event”
Now we create the configuration for the custom event. In this case, we only want to have the Tag fire when we trigger the custom event from our Javascript, so we add in a condition to only fire when the event contains the name “lead-form-submission”
We’re all ready to trigger the event from the Funnel Widget. In the Funnel Widget embed code, add the following callback, which triggers the event we’ve created above:
```
onComplete: function() {
 dataLayer.push({'event': 'lead-form-submission'});
}
```
Make sure to either Preview or Submit the Tag Workspace and you should be all ready to go. Your Tag should now fire when the widget is submitted.

In order to emit chatbot events that occur into your GA4 account, you will need to add your GA4 tracking ID (which appear in the format G-XXXXXXXXXX) into the <head> of the index.html file where you have inserted the chatbot script:

<head>
  <script>
    window.GOOGLE_ANALYTICS_TRACKING_ID = 'MEASUREMENT_ID_HERE';
  </script>
</head>

<script src="https://chatbot.funnelleasing.com/funnel-chat.min.js"></script>
<script>
    window.addEventListener('load', function () {
        FunnelChat.initialize({
            apiKey: "FUNNEL_API_KEY_HERE",
            communityId: FUNNEL_COMMUNITY_ID_HERE,
            timeout: 00, 
            leadSourceId: LEAD_SOURCE_ID_HERE,
            defaultPaddingRight: '10px',
            defaultPaddingBottom: '10px',
            reactivePaddingRight: '20px',
            reactivePaddingBottom: '40px'
        })
    })
</script>

Step by Step Guide

Sign in to the Google Analytics website with the appropriate Google account.
Once logged in, click on “Admin” in the lower left corner and click the + Create button in the top left and click to create a property. Follow the initial setup process.
After setting up the property you will be asked to set up a “Data Stream”, select “Web” as the platform. You will be provided with a “Measurement ID” and a “Stream ID”, copy the Measurement ID, this is what will be inserted in the code outlined above.
Check your Google Analytics dashboard to see if data is being received. Go to the “Realtime” section of your Google Analytics dashboard, under “Events” you should see “Chatbot_interaction” as an event category:
Clicking through to the “event_label” parameter, you should see the individual event types.

Integrating with Google Tag Manager and Google Analytics

Lead Scheduling Widgets

Step by Step Guide

Chatbot Widget

Step by Step Guide