Google Tag Manager
Freeform includes built-in support for Google Tag Manager if you wish to use that with your forms.
This guide assumes you are familiar with Google Tag Manager. We cannot provide any assistance with setting this up, aside from the basics.
Setup Instructions
- Go to the 'Other' integration section in Freeform Settings (Freeform → Settings → Integrations → Other).
- Click on Google Tag Manager in the list.
- Enable it by toggling on the Enabled setting.
- If you'd like GTM to be enabled for all forms by default, toggle on the Enabled by default setting.
- If you wish to have Freeform insert its own scripts, enter your GTM ID (
GTM-XXXXXX) in the Container ID setting and a custom event name (if applicable) in the Event Name setting. - Save the form.
To use this integration on your form(s), you'll need to configure each form individually. If you toggled on the Enabled by default setting in the Freeform Settings, it will automatically be ON for all forms. You can disable them for each form as necessary.
- Visit the form inside the form builder.
- Click on the Integrations tab.
- Click on Google Tag Manager in the list of available integrations.
- On the right side of the page:
- Enable (or disable) the integration.
- Adjust any of the settings as needed.
- Save the form.
To customise what gets sent to the events, you can write your own JS and add an event listener in your template, like this:
window.addEventListener('freeform-gtm-data-layer-push', function (event) {
event.payload.myCustomValue = 'something_here';
event.payload.otherCustomValue = 'other_value';
});
2
3
4
This would then attach whatever you add to the payload to the event that is being pushed to GTM.
- Visit your form on your site.
- Fill out the form and submit it.
- 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 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.