How to track form activity with Google Tag Manager

When to use

By tracking the activity of respondents in your forms, you can get insight information of their behaviors. This helps you to analyze form starts, form completions, interactions and drop-offs.

With Google Tag Manager you can receive those events and distribute them from there on to your desired connected services. Follow the instructions in this article if you want to use Google Tag Manager to receive your form activity.

---

How to use

In this article we will show the steps you have to take to send Tripetto activity data to Google Tag Manager. You can also have a look at our global article about how form activity tracking works.

🚧 Warning: Google Tag Manager knowlegde needed

We assume you know how to configure and use Google Tag Manager. Tripetto support can not help you with configuring your Google Tag Manager account. Follow the Tag Manager Help by Google for more information:

• Tag Manager Help by Google

Step 1 - Prepare Google Tag Manager

First step is to get your unique ID from Google Tag Manager that you will need to connect Tripetto with Google Tag Manager.

In Google Tag Manager:

First make sure you have created and configured your container in Google Tag Manager like you want to. This means you configure your Google Tag and connect the services you want to send data to.

Step 2 - Connect Google Tag Manager

Next step is to connect your Tripetto form to Google Tag Manager.

In Google Tag Manager:

After your Google Tag Manager container is configured, simply copy the Container ID of your container, which starts with GTM-. You can find that in the Admin tab in Google Tag Manager. You will need that ID later on in Tripetto.

In Tripetto:

Switch to your form in Tripetto. At the top menu bar of the form builder click Automate Click Tracking. The Tracking pane will show up on the right side of the form builder.

In there, enable the feature Track form activity with Google Analytics or Google Tag Manager to expand the settings for Google Tag Manager.

Before you enter your container ID, first ask yourself if the page that your Tripetto form is hosted at already has the Google Tag Manager tag installed to it:

• If you already installed the Google Tag Manager tag, you can simply enable the option Google Analytics or Google Tag Manager is already installed on my website. If enabled, you don't have to enter your container ID anymore and the Tripetto events will be sent to the container ID that you have installed yourself.¹
• If you haven't already installed the Google Tag Manager tag, you can paste the container ID that you just copied from Google Tag Manager. Tripetto will recognize automatically that you're using Google Tag Manager, based on the container ID that you supply.

🔖 Ad 1: Using the shareable link?

If you're (also) using the shareable link to your form, make sure you always supply your container ID to be able to track events in the shareable link version of your form.

Step 3 - Select tracking events

Now your Tripetto form is connected to your Google Tag Manager container. By default Tripetto will track the most important activities (form starting and form completion), but you can control which activities Tripetto needs to track for you.

In Tripetto:

Select the tracking events that you want to receive insights for in your Google Tag Manager container.

Tripetto forms can record and share the following events:

• Track form starting (tripetto_start) - Tracks when a form is started;
• Track form completion (tripetto_complete) - Tracks when a form is completed;
• Track staged blocks (tripetto_stage) - Tracks when a block becomes available.
  It depends on your selected form face when this event will be fired:
  • Autoscroll form face: this event will be fired when a block gets activated;
  • Chat form face: this event fires when a block becomes answerable;
  • Classic form face: this even fires when the block becomes visible.
• Track unstaged blocks (tripetto_unstage) - Tracks when a block becomes unavailable.
  It depends on your selected form face when this event will be fired:
  • Autoscroll form face: this event will be fired when a block gets deactivated;
  • Chat form face: this event fires when a block becomes unanswerable;
  • Classic form face: this even fires when the block becomes invisible.
• Track focus (tripetto_focus) - Tracks when an input element gains focus;
• Track blur (tripetto_blur) - Tracks when an input element loses focus;
• Track form pausing (tripetto_pause) - Tracks when a form is paused.

🚧 Warning: Update embed code (studio only)

If you have embedded your form in your website/app, please make sure you always update your embed code over there.

Step 4 - Receive tracking data

Google Tag Manager is now ready to receive the selected tracking data from your Tripetto form.

In Google Tag Manager

Tracking events are sent to Google Tag Manager using a data layer. You can receive that data layer in Google Tag Manager by configuring a data layer variable in there. Once that's configured you can use that variable in your tags and triggers in Google Tag Manager to distribute the collected event data to any service you have connected to your Google Tag Manager.

🚧 Warning: Google Tag Manager knowlegde needed

We assume you know how to configure and use data layer variables in Google Tag Manager. Tripetto support can not help you with configuring your data layer variables in Google Tag Manager.

For help with data layer variables, please have a look at the Tag Manager Help by Google and specifically this article about the data layer.

Data layer variables

Tripetto sends the following variables to Google Tag Manager via the data layer. It's important that you use the exact names in your data layer variable configurations in Google Tag Manager to be able to retrieve the value that the Tripetto form sends.

• event - The name of the event;
• description - The description of the event;
• form - The name of the form;
• id - The id of the form (not available when using the Tripetto studio);
• reference - The reference id of the form (not available when using the Tripetto studio);
• fingerprint - The fingerprint of the form;
• block - The name of the block (in case an event is about a specific block in your form);
• key - The id of the block (in case an event is about a specific block in your form).

Now that this data is available in a variable in Google Tag Manager, you can use that variable in your tags in Google Tag Manager. For example to send an event to Google Analytics (GA4) or any other service you connect to via Google Tag Manager.

In Tripetto:

After you have configured your Google Tag Manager and the connected services, open your Tripetto form and submit an entry to it. The best way to do so, is by just opening your form and perform the actions you want to track yourself.

In Google Tag Manager:

Now switch back to Google Tag Manager and/or the service that you distributed the data to and see if the data is shown.

Troubleshooting

Are your events not received by your Google Tag Manager and/or the connected service(s)? There can be a few reasons:

• Please notice that although Tripetto sends all events in realtime, it can take some time (up to 24 hours) before your receiving service shows the events from your Tripetto form.
• Next step is to check if the events are triggered in the form. To test this there are some browser extensions that can give instant insights on the events that are measured. You can install such an extension right in your browser, for example Google Chrome.
  • If the events are not visible in such an extension, please check if your event tracking is configured correctly in Tripetto.
  • If the events are visible in such an extension, but not in your Google Tag Manager/connected service, please check if your Google Tag Manager is configured correctly. For example check if you have configured the needed data layer variables and if your GTM container has been published.
• Next step is to check if there can be any conflicts with other Google script tags in your site, for example if you have already installed the GTM tag yourself. To check this, please temporarily remove all other Google script tags from your page where the Tripetto form is at. And then test if the events are triggered and sent correctly.
• To prevent such conflicts, you can enable the setting Google Analytics or Google Tag Manager is already installed on my website. If enabled, Tripetto will not add another GTM tag to your page, which will prevent any conflicts.