Comment on page
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.
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-".
GTM container ID
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.
Once container ID is added, events can be enabled
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 (shown at the start of Step 2). Since we'll be looking for the FlowLoaded event, add "FlowLoaded" as the event name.
Don't forget to name name this trigger as well - "Flowloaded trigger" is apt here. Save.
FYI, if you'd like a tag to be triggered on all events, put
.* in there and check Use regex matching.
Trigger configuration screen in the GTM console
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:<script>alert("Hello from GTM")</script>
Under Triggering, add the FlowLoaded trigger we just created. Save.
Creating a tag that creates a console alert
Submit the changes at the top right, then Publish.
Click "Submit" at top right
Once "Submit" has been clicked, hit "Publish" at top right
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.
Console alert script, loaded by GTM
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. 
The GTM integration menu
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 launch tab
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. 
Viewing tags that fired on FlowLoaded
The Summary item can give you an aggregated look at which of your tags are firing, among other things.
The Summary view
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!
Last modified 2mo ago