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:

1. 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.

2. 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.

3. 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.

1. 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.

1. 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 event and a value of {{Custom Event Value}}.
• Save your tag.

1. 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:

1. How can I track form submissions in Webflow using Google Tag Manager?
2. How to integrate Webflow forms with Google Tag Manager?
3. What is the process to trigger a custom event in Google Tag Manager when a specific form is submitted on Webflow?