How can I add custom JavaScript to trigger an event with a value of bookdemo.signed-up into Google Tag Manager via Segment when a user submits a Demo Request form on Webflow?
To add custom JavaScript to trigger an event with a value of
bookdemo.signed-up
into Google Tag Manager via Segment when a user submits a Demo Request form on Webflow, follow the steps below:
-
Set up Google Tag Manager and Segment integration : Make sure you have set up Google Tag Manager and integrated it with Segment. This will allow you to track events and send data to your desired platforms.
-
Identify the form element : First, you need to identify the form element on your Webflow page where users submit the Demo Request. For example, let's say the form has an ID of
demo-request-form. -
Create a trigger in Google Tag Manager : Log in to your Google Tag Manager account and go to your container. From there, you will create a new trigger that fires when the form is submitted.
- Click on "Triggers" in the left sidebar.
- Click on "New" to create a new trigger.
- Give your trigger a name, like "Demo Request Form Submitted", for easy identification.
- Under "Trigger Configuration", select the trigger type as "Form Submission".
-
In the "Configure Trigger" section, specify the form element ID you identified earlier (
demo-request-form) as the form ID. Leave the other options as default or customize them as per your requirements. - Save your trigger.
-
Create a custom JavaScript variable in Google Tag Manager
: Next, you need to create a custom JavaScript variable that captures the desired value (
bookdemo.signed-up).
- Click on "Variables" in the left sidebar.
- Click on "New" to create a new variable.
- Give your variable a name, like "Custom Event Value".
- Select "Custom JavaScript" as the variable type.
-
In the "Variable Configuration" section, enter the following JavaScript code:
```javascript
return 'bookdemo.signed-up';
``` - Save your variable.
- Create a tag in Google Tag Manager : Now, create a tag that will send the event data to Segment.
- Click on "Tags" in the left sidebar.
- Click on "New" to create a new tag.
- Give your tag a name, like "Send to Segment - Demo Form".
- In the "Tag Configuration" section, select "Segment" as the tag type.
- Configure your Segment settings according to your integration.
- Under "Triggering", choose the trigger you created earlier ("Demo Request Form Submitted").
-
In the "Fields to Set" section, add a field with a key of
eventand a value of{{Custom Event Value}}. - Save your tag.
- Publish changes in Google Tag Manager : After creating the trigger and tag, you need to publish the changes in Google Tag Manager to make them live on your Webflow site.
- Click on "Submit" in the upper right corner of the Google Tag Manager interface.
- Give the version a name and description (e.g., "Added Demo Request Form Tracking").
- Review the changes, and if everything looks good, click on "Publish". It may take a few minutes for the changes to propagate.
That's it! Now, when a user submits the Demo Request form on your Webflow site, the custom JavaScript variable will capture the value
bookdemo.signed-up
, and the tag will send this event data to Segment via Google Tag Manager.
Additional questions users may search for :
- How can I track form submissions in Webflow using Google Tag Manager?
- How to integrate Webflow forms with Google Tag Manager?
- What is the process to trigger a custom event in Google Tag Manager when a specific form is submitted on Webflow?
