# Google Tag Manager (GTM)
## Configuring Triggers
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.
#### Grab your container ID from GTM
Find your GTM container ID. It will start with "GTM-".
#### Configure sending events in Formsort
In your Flow's Google Tag Manager [Integrations](https://docs.formsort.com/integrations/integration-reference) tab, add your container ID. Enable any events you want to be available for GTM to detect.
{% hint style="info" %}
These events can be used to set up the GTM Trigger. Continue reading to see how that works!
{% endhint %}
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](https://docs.formsort.com/integrations/getting-data-out/analytics) 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.
{% hint style="info" %}
**FlowLoaded** is chosen for the purposes of this guide. In reality, you can choose any custom event you require (StepLoaded, FlowFinalized, etc.)
{% endhint %}
The [shape of the payload](https://docs.formsort.com/integrations/getting-data-out/event-payload-shape) 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](https://docs.formsort.com/building-flows/adding-content/steps/settings) 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](#previewing-gtm-tags-in-ga4).
{% hint style="warning" %}
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.
{% endhint %}
#### Configure the triggers and tags in GTM
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**](#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**.
{% hint style="info" %}
FYI, if you'd like a tag to be triggered on *all* events, put `.*` as the Event name and check "Use regex matching".
{% endhint %}
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 `
```
Under **Triggering**, add the **FlowLoaded** trigger we just created. **Save**.
**Submit** the changes at the top right, then **Publish.**
#### Put it together
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.
## Google Analytics 4 (GA4)
### GA4 Google Tag
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.
{% hint style="info" %}
If you still need to create a GA4 property, please see [Google's documentation](https://support.google.com/analytics/answer/9304153?hl=en\&ref_topic=9303319#zippy=%2Cweb). Follow the instruction for **Web**.
{% endhint %}
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.**
### GA4 Event Tag
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](https://docs.formsort.com/integrations/getting-data-out/analytics), 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.
{% hint style="info" %}
See [Configuring Triggers](#configuring-triggers) if you still need to set up your GTM integration *in Formsort.*
{% endhint %}
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.**
{% hint style="info" %}
Ensure case matching of our Analytics Events when adding them to **event name**.
{% endhint %}
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
{% hint style="warning" %}
Universal Analytics has been deprecated by Google as of July 1, 2023. Please see our above section [Google Analytics 4](#ga4-google-tag).
If you need assistance transitioning your property from Universal Analytics to GA4, please see [our guide](https://docs.formsort.com/integrations/integration-reference/google-analytics/updating-from-universal-analytics-to-ga4).
{% endhint %}
## "Previewing" GTM tags in GA4
### GTM Preview
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](https://docs.formsort.com/publishing-and-deployment/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.
### GA4 DebugView
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!
