A newer version of

Freeform

is available.

Try Freeform 5 now →

User Guides

Setting up Google Tag Manager

If you wish to use Google Tag Manager with Freeform forms, follow the guide below.

Instructions

  • Enable the Google Tag Manager inside a form. This is done by checking the Google Tag Manager checkbox in the Form Settings tab in the form builder for each form.
  • Specify the GTM-XXXXXX GTM ID that you have in your Google Tag Manager site for your project.
  • Save the form.

GTM Setup inside Freeform

  • Visit your form on your site.
  • Fill out the form and click submit.
  • The data should have been pushed to GTM using the specified event name.

TIP

The success of this is not observable on your site, as this event goes to GTM via some sockets, so there's nothing in the network tab.

To see if your test worked correctly, visit the Google Tag Manager website and open your project workspace. Then click on the PREVIEW button near the top right side of the page.

Google Tag Manager

Google offers a Tag Assistant tool along with a Tag Assistant Companion Chrome extension. These help troubleshoot installation of gtag.js and Google Tag Manager. When the Chrome extension is present, it enables additional features for Tag Assistant including debugging iframes and debugging multiple windows from the same debug session.

To customise what gets sent to the events, you can write your own JS and add an event listener, like this:

window.addEventListener('freeform-gtm-data-layer-push', function (event) {
    event.payload.myCustomValue = 'something_here';
    event.payload.otherCustomValue = 'other_value';
});
1
2
3
4

This would then attach whatever you add to the payload to the event that is being pushed to GTM.

Finished!