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 show you how to create a GTM trigger, and check that the trigger fires on Formsort's events. It will also serve to get GTM connected to Formsort.
We'll have GTM look for Formsort's FlowLoaded event, and create an alert on your browser page that lets us know our Google Tag is firing at when the flow is loaded.
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 available for GTM to detect. For this guide, we'll use FlowLoaded.
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.
Once you've finished configuring your events, head over to the variants within the flow that you want to pick up the changes. Deploy or re-deploy these variants. Changes to Integrations are not automatically deployed to variants.
Head back to your GTM container.
Under Trigger Type, use a
Custom Event trigger. You can use Custom Event triggers to capture the analytics events shown at the start of Step 2. Since we're looking for the FlowLoaded event, add "FlowLoaded" as the event name. Name the trigger ("Flowloaded trigger" works) and Save.
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. When the flow loads, a console alert will be generated by GTM that shows our tag has successfully loaded.
Console alert script, loaded by GTM
Formsort is beginning it's transition to GA4 from Universal Analytics, which will stop being supported by Google on July 1, 2023.
To send pageviews to Universal Analytics via Google Tag Manager, choose the Google Analytics: Universal Analytics tag type, and set Track Type to Page View.
Tag configuration in the GTM console
Note, you probably don't need anything in advanced settings or "Enable overriding settings in this tag" - you just need to create a variable with your GA setup and choose it under Google Analytics Settings.
Under Triggering, choose All Pages.
Once the container is published, you will see Pageviews under Content in GA:
The analytics screen in GA
Similar to setting up pageviews, we'll use the Google Analytics: Universal Analytics tag, but in this case, set the Track Type to Event.
Category, Action, and Event will map to the corresponding attributes in Google Analytics - it's up to you what you do with this, but our suggestion is:
- Set Category to Formsort so that you can distinguish Formsort events from others in your analytics.
- Set Action to the Custom Events type variable (Name: Event).
Tag configuration in GTM console
- Set Label to a Data Layer Variable, having it pull the stepId variable from the event payload
Click "+" to open a new variable menu for Label
Choose Data Layer Variable
Give "stepId" as Data Layer Variable Name. Click Save.
stepId, while valuable, is an arbitrary example used for the purposes of this guide. There are several datalayer variables available from Formsort, and in GTM you can configure as many Data Layer Variables are as required for reporting. The available Data Layer variables can be found in the "Preview Event Type" window of your Google Tag Manager integration console in Formsort.
Different "Event Types" will have different variables available, so be sure to take a moment to look through the options.
Ensure case matching when configuring these variables as Tags.
In Triggering, create a Custom Event trigger for this tag. To fire it only for a specific event, put the event name in Event name (i.e. FlowLoaded, StepLoaded, EmailCollected, etc).
Alternatively, if you'd like the tag to be triggered on all events, put
.* in there and check Use regex matching so that every event gets forwarded along.
Type in .* and check Use regex matching. Trigger fires on All Custom Events.
Once deployed, you should start seeing events flow in. If you set the category when setting up the tag, you should see the step ID come through as the label.
The GA console
To send pageviews to GA4 via Google Tag Manager, you can use the GA4 Configuration tag.
This tag is required for "configuring" the GA4 version of Google Analytics on the website you want collect data on, and should always be set up before configuring GA4 Event tags.
For information on setting up a GA4 property, see Google's documentation. Follow the instruction for Web.
In Tag Configuration, choose the GA4 Configuration tag and enter the Measurement ID of your GA4 property.
Picking the GA4 Configuration tag
Enter Measurement ID
Under Triggering, choose Initialization - All Pages. This will ensure the configuration 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.
The GTM integration menu
In the Tag Configuration menu, choose the Google Analytics: GA4 Event tag.
For the Configuration Tag field, choose the configuration tag we've created in the GA4 Configuration Tag section.
For Event Name, choose the name of the event you want to track. We can use FlowLoaded as an example here.
Ensure case matching of our Analytics Events when adding them to event name.
In Triggering, create a Custom Event trigger for this tag. To fire it only for a specific event, put the event name in Event name - in this case, FlowLoaded.
Alternatively, if you'd like the tag to be triggered on all events, put
.* in there and check Use regex matching so that every event gets forwarded along.Set "This trigger fires" to on All Custom Events. Give the Trigger a name and Save.
From here you can move on to the "Previewing..." section to double-check your tag setup. Or, if you're feeling confident, you can publish your container!
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. You can also view Variables, Data Layer values, Consent and Errors of the tags in the top navigation bar by clicking on an event.
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 3mo ago