Integrating with Google Tag Manager

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

  1. 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.

  2. In the Workspace View, select the Tag you want to use

    thing

  3. In the Tag view, select the button to add a new Trigger.

    thing

  4. In the “Choose a trigger” Pop-Up, select the add new button

    thing

  5. In the type pop-up, select “Custom Event”


    thing


  6. 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”

    thing


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



  8. 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.


    thing