Custom Goals

On-site conversions

On-site conversions track actions that happen on your Webflow site. Use them to measure third-party form submissions, dynamic interactions, or any custom user action that other goal types don’t capture.

How on-site conversions work

1

Trigger a conversion with custom code

On-site conversions use the wf.sendEvent() API to trigger a conversion. When a visitor performs the action you’re tracking, the goal is recorded and attributed to your optimization.

Your development team will need to add the necessary logic to trigger the conversion when the action occurs.

1<script>
2// Add necessary logic to trigger the conversion
3wf.ready(function() {
4    wf.sendEvent('form_submitted');
5});
6</script>
2

Add the custom code to your site

When the conversion occurs on a specific page, add the code snippet to the custom code section of your page settings before the </body> tag. For more information, see Custom code in Page settings.

If the conversion can occur on any page across your site, add the code snippet to the footer code in the site settings. For more information, see Footer code in Site settings.

Using Google Tag Manager (GTM)

If you use Google Tag Manager and already have a trigger for this action, create a custom HTML tag that calls wf.sendEvent() and attach it to the existing trigger.

Prerequisites

Before tracking on-site conversions, you need to create a custom goal in Webflow.

Example: HubSpot form submissions

In this example, a visitor fills out a form on your site to request a demo. Assumes you’ve created a custom goal in Webflow with the event name form_submitted.

1<!-- Add this to your Page settings Custom Code – before the </body> tag -->
2<script>
3window.addEventListener("message", function (event) {
4    if (event.data.type === "hsFormCallback" && event.data.eventName === "onFormSubmitted") {
5        wf.ready(function() {
6            wf.sendEvent('form_submitted');
7        });
8    }
9});
10</script>
1<!-- Add this to an existing trigger in Google Tag Manager -->
2<script>
3    wf.ready(function() {
4        wf.sendEvent('form_submitted');
5    });
6</script>

Example: Calendly meeting bookings

In this example, a visitor books a meeting through an embedded Calendly widget. Assumes you’ve created a custom goal in Webflow with the event name meeting_booked.

1<!-- Add this to your Page settings Custom Code – before the </body> tag -->
2<script>
3window.addEventListener("message", function (event) {
4    if (event.data.event === "calendly.event_scheduled") {
5        wf.ready(function() {
6            wf.sendEvent('meeting_booked');
7        });
8    }
9});
10</script>
1<!-- Add this to an existing trigger in Google Tag Manager -->
2<script>
3    wf.ready(function() {
4        wf.sendEvent('meeting_booked');
5    });
6</script>

API reference

sendEvent()

Client-side API for triggering on-site conversion goals