Google Tag Manager (GTM)
Single Google Tag Manager is, in fact, a tag manager, it can be used to load other integrations and analytics tools, such as Intercom, RocketHub, or Google Analytics.
Last updated
Single Google Tag Manager is, in fact, a tag manager, it can be used to load other integrations and analytics tools, such as Intercom, RocketHub, or Google Analytics.
Last updated
Combining Google's tags and triggers has many different uses, from inserting custom JavaScript code to sending information to Google Analytics, or even forwarding information to integrations outside what Formsort supports!
A trigger is only one part of the equation - it detects when something should happen. A tag is the other half of the equation - it tells what should happen when the trigger fires, e.g. insert custom JavaScript, or send data to Google Analytics.
Configuring Triggers is going to:
first, get your GTM container connected to Formsort so event data from your Flows can be sent to GTM;
then, show you how to create a GTM trigger, and check that the trigger fires on Formsort's events.
We'll do this by having a GTM trigger on Formsort's FlowLoaded event, which will create an alert on your browser page that lets us know our Google Tag is firing when the flow is loaded.
This process should give you enough familiarity that you can start creating triggers for the tags you will later create to capture data.
Find your GTM container ID. It will start with "GTM-".
In your Flow's Google Tag Manager Integrations tab, add your container ID. Enable any events you want to be available for GTM to detect.
These events can be used to set up the GTM Trigger. Continue reading to see how that works!
Note that as long as a Container ID is provided, GTM will always be loaded, and the Enabled Events menu will be available. The analytics events you choose will be available for Google Tag Manager to pick up on (i.e. FlowLoaded, FlowClosed, etc).
The enabled events options control the events within Formsort that send dataLayer.push variables (stepId, variantLabel, etc).
Make sure to:
Choose at least FlowLoaded under enabled events.
Save your changes.
FlowLoaded is chosen for the purposes of this guide. In reality, you can choose any custom event you require (StepLoaded, FlowFinalized, etc.)
The shape of the payload will also be configured and can be seen in "preview event type" at the bottom of the menu. Choosing to Send answers will allow you to push answers to GTM as well.
Append StepID to StepLoaded and StepCompleted event names will add the Step ID to the payload when you receive a StepLoaded and StepCompleted event.
If Send answers is enabled, an answers payload will be present in the dataLayer.push() object that is sent with your events. More about that will be covered in "Previewing" GTM tags in GA4.
Once you've finished enabling or disabling your events in this integration menu, head over to the variants within the flow that you want to pick up these changes. Deploy or re-deploy these variants. Changes in the Integration menu are not automatically deployed to variants, so it is imperative that you do this yourself.
Now, head back to your GTM container.
Under Trigger Type, use a Custom Event trigger. Custom Event triggers will always be used to capture Formsort's analytics events (available events are shown above in Configure sending events in Formsort).
Since we'll be looking for the FlowLoaded event, add "FlowLoaded" as the event name.
Don't forget to add a name to this trigger - "Flowloaded trigger" is apt. Save.
FYI, if you'd like a tag to be triggered on all events, put .* as the Event name and check "Use regex matching".
Now, open the Tags menu and navigate to New -> Tag Configuration -> Custom HTML.
For the purposes of this section, we're going to have GTM insert a <script> onto our page that notifies us that GTM works when our flow loads. Add the following script to your Tag:
Under Triggering, add the FlowLoaded trigger we just created. Save.
Submit the changes at the top right, then Publish.
Visit a live version of your flow - we advise doing this in an incognito window.
When the flow loads, a console alert will be generated by GTM that shows our tag has successfully loaded when triggered by Formsort's FlowLoaded event.
From here, we can move on to creating tags for capturing different events.
This tag is required to configure the GA4 version of Google Analytics on your flows, and should always be set up before configuring GA4 Event tags.
The Google Tag can also be used send pageview events to GA4 via Google Tag Manager.
If you still need to create a GA4 property, please see Google's documentation. Follow the instruction for Web.
In Tag Configuration, choose the Google Analytics -> Google Tag and enter the Measurement ID of your GA4 property.
Under Triggering, choose Initialization - All Pages. This will ensure the Google Tag fires before any other trigger. Give the tag a name and Save.
The Event Tag allows you to track the events that Formsort will send as the user completes the form. You can see the Analytics Events available for tracking here, as well as in the integration menu for GTM, under Enabled Events.
To continue on with the Configuring Triggers guide above, we will create a Tag that captures the FlowLoaded event.
See Configuring Triggers if you still need to set up your GTM integration in Formsort.
Click the Tag Configuration box and choose the Google Analytics: GA4 Event tag.
Enter your Measurement ID in the corresponding field.
For Event Name, choose the name of the event you want to track. We'll use FlowLoaded.
Ensure case matching of our Analytics Events when adding them to event name.
In Triggering, add the FlowLoaded trigger we've already created.
To recap, we just created a Tag called FlowLoaded that will send a "flow loaded" analytics event to our Google Property. This will fire when the flow is loaded, thanks to our FlowLoaded trigger!
From here you can move on to the "Previewing..." section to double-check your tag setup before Publishing your GTM container. Or, if you're feeling confident, you can publish your container right away!
Universal Analytics has been deprecated by Google as of July 1, 2023. Please see our above section Google Analytics 4.
If you need assistance transitioning your property from Universal Analytics to GA4, please see our guide.
GA4 properties have a very helpful feature called "debug view" that will allow you to test your event tags before publishing your GTM container.
Once you have setup a tag and trigger and want to test, click Preview in the top right corner of your GTM container.
Google's Tag Assistant tab will launch, and may require you to add the URL of the flow (or, if you're embedding, the URL of your website) that these tags are being configured for.
Once the URL is added, click Connect and then Continue.
The Tag Assistant tab, you can interact with the debug interface and in the Summary Bar, you can view which tags are firing and the order they are firing in. If you've enabled Send Answers in Formsort's integration menu, you would be able to view the values of answer variables in the dataLayer.push() object.
By default, you will be able to see other pertinent information like the event, flowLabel and variantLabel.
The Summary item can give you an aggregated look at which of your tags are firing, among other things.
In addition to the Tag Assistant tab, you should see your flow open in a new window. This will allow you to interact with your flow and test the different triggers and tags you have set up.
In your GA4 properties, you can also check the reception of these events using DebugView.
To get to DebugView, open your GA4 property in Google Analytics and head to Admin.
In the Property column, scroll down to DebugView.
With this screen open, you can view the various tag events you've created, as well as the event parameters and user properties associated with them.
When you're done testing and everything looks good, head back to your GTM container and publish it!
