How to track lead conversion events with Google Tag Manager and Dub

Conversion tracking requires a Business plan subscription or higher.

When it comes to conversion tracking, a lead event happens when a user performs an action that indicates interest in your product or service. This could be anything from:

Signing up for an account
Booking a demo meeting
Joining a mailing list

A diagram showing how lead events are tracked in the conversion funnel

In this guide, we will be focusing on tracking new user sign-ups for a SaaS application that uses Google Tag Manager to track conversions.

Prerequisites

First, you’ll need to enable conversion tracking for your Dub links to be able to start tracking conversions:

If you’re using Dub Partners, you can skip this step since partner links will have conversion tracking enabled by default.

Option 1: On a workspace-level

To enable conversion tracking for all future links in a workspace, you can do the following: To enable conversion tracking for all future links in a workspace, you can do the following:

Navigate to your workspace’s Analytics settings page.
Toggle the Workspace-level Conversion Tracking switch to enable conversion tracking for the workspace.

Enabling conversion tracking for a workspace

This option will enable conversion tracking in the Dub Link Builder for all future links.

Option 2: On a link-level

If you don’t want to enable conversion tracking for all your links in a workspace, you can also opt to enable it on a link-level.To enable conversion tracking for a specific link, open the Dub Link Builder for a link and toggle the Conversion Tracking switch.

You can also use the C keyboard shortcut when inside the link builder to quickly enable conversion tracking for a given link.

Option 3: Via the API

Alternatively, you can also enable conversion tracking programmatically via the Dub API. All you need to do is pass trackConversion: true when creating or updating a link:

const link = await dub.links.create({
  url: "https://dub.co",
  trackConversion: true,
});

Then, you’d want to install the @dub/analytics script to your website to track conversion events. You can install the @dub/analytics script in several different ways:

React

Manual installation

Framer

Shopify

WordPress

Webflow

Google Tag Manager

You can verify the installation with the following tests:

Open the browser console and type in _dubAnalytics – if the script is installed correctly, you should see the _dubAnalytics object in the console.
Add the ?dub_id=test query parameter to your website URL and make sure that the dub_id cookie is being set in your browser.

If both of these checks pass, the script is installed correctly. Otherwise, please make sure:

The analytics script was added to the <head> section of the page
If you’re using a content delivery network (CDN), make sure to purge any cached content

Configure Google Tag Manager server-side tracking

To track lead conversion events with Google Tag Manager, you’ll need to set up a server container and configure a custom client to handle Dub conversion events.

1. Set up GTM Server Container

In Google Tag Manager, you’ll need to use an existing server container or create a new one. Server containers are the foundation for server-side tracking and allow you to process events before they reach their final destinations.

If you already have a server container set up, you can use that
If not, create a new server container in your GTM workspace

2. Import Dub GTM Server Client Template

Inside your GTM server container, navigate to the Templates tab. Under Client Templates, click the New button.

This will open up the Template Editor. In the top right corner, click on the ⋮ button and select Import.

Download the gtm-server-client-template/template.tpl file and upload it to the Template Editor. You’ll see a preview of the template:

Click the Save button in the top right to save the template.

3. Create Dub Server Client

Next, you’d want to create a new GTM Server Client using the imported template. In your GTM server container, navigate to the Clients tab and click New.

This will open up the client configuration page, where you can choose a client type to begin setup. Under Custom, select the Dub GTM Server Client template that you created in step 2.

Make sure your client configuration is set to the following:

Client Name: Dub GTM Server Client
Priority: 0
Request Path: /dub/track
Debug Logging: (optional)

Clients in GTM Server are adapters that act as bridges between the software running on a user’s device and your server container. They receive requests and transform them into events that can be processed by tags.

4. Import Dub GTM Server Tag Template

Next, you’ll want to import the Dub GTM Server Tag template to handle lead tracking. In your GTM server container, navigate to the Templates tab once again. Under Tag Templates, click the New button.

This will open up the Template Editor. In the top right corner, click on the ⋮ button and select Import.

Download the gtm-server-tag-template/template.tpl file and upload it to the Template Editor. You’ll see a preview of the template:

Click the Save button in the top right to save the template.

5. Add Lead Tracking Tag

Last but not least, you’ll want to create a new GTM Server Tag using the imported template. In your GTM server container, navigate to the Tags tab and click New.

This will open up the tag configuration page. Under Tag Configuration, select the Dub Conversion Tag server tag template that you created in step 4.

Make sure your tag configuration is set to the following:

Dub API Key: Your Dub API key (starts with dub_)
Event: Select “Track lead” from the dropdown
Click ID: clickId from the Dub Server Client event data
Customer External ID: customerExternalId from the event data
Event Name: eventName from the event data (e.g., “Sign Up”)
Customer Name: customerName from the event data
Customer Email: Map to the customerEmail from the event data
Customer Avatar: Map to the customerAvatar from the event data (optional)
Event Quantity: Map to the eventQuantity from the event data (default: 1)

Under the Triggering section, configure when the tag should fire:

Click + to add a new trigger
Select Custom Event as the trigger type
Set the Event Name to match the event name from the Dub Server Client. Default is dub_conversion
Add a condition to filter for lead events:
- Variable: Select a variable that contains the event type
- Operator: Equals
- Value: “Sign Up”
Name the trigger “Dub Lead Event Trigger” and save it

Here’s the full list of attributes you can pass when sending a lead event:

Property	Required	Description
`clickId`	Yes	The unique ID of the click that the lead conversion event is attributed to. You can read this value from `dub_id` cookie. If an empty string is provided (i.e. if you’re using tracking a deferred lead event), Dub will try to find an existing customer with the provided `customerExternalId` and use the `clickId` from the customer if found.
`eventName`	Yes	The name of the lead event to track. Can also be used as a unique identifier to associate a given lead event for a customer for a subsequent sale event (via the `leadEventName` prop in `/track/sale`).
`customerExternalId`	Yes	The unique ID of the customer in your system. Will be used to identify and attribute all future events to this customer.
`customerName`	No	The name of the customer. If not passed, a random name will be generated (e.g. “Big Red Caribou”).
`customerEmail`	No	The email address of the customer.
`customerAvatar`	No	The avatar URL of the customer.
`mode`	No	The mode to use for tracking the lead event. `async` will not block the request; `wait` will block the request until the lead event is fully recorded in Dub; `deferred` will defer the lead event creation to a subsequent request.
`metadata`	No	Additional metadata to be stored with the lead event. Max 10,000 characters.

Testing your setup

You can test your GTM server setup by sending a curl request to your server URL with the appropriate query parameters:

curl "https://server-side-tagging-xxx-uc.a.run.app/dub/track/lead?\
dub_id=pAzVZ3jzwZXcLMDT&\
eventName=Sign%20Up&\
customerExternalId=user_1K0RN3SDNAC0C1WCW4BGRS3EW&\
customerName=John%20Doe&\
customerEmail=john@example.com&\
customerAvatar=https://example.com/avatar.jpg&\
eventQuantity=1&\
mode=async"

Download GTM templates

To learn more about how to track leads with Google Tag Manager, check out the following templates:

Dub GTM Server Client Template

A GTM server-side client template for receiving lead and sale conversion events from web containers

Dub GTM Server Tag Template

A GTM server-side tag template for sending lead and sale conversion events from your GTM server container to Dub

View your conversions

Once you’ve completed the setup, all your tracked conversions will show up in Dub Analytics. We provide 3 different views to help you understand your conversions:

Time-series: A time-series view of the number clicks, leads and sales.

Funnel chart: A funnel chart view visualizing the conversion & dropoff rates across the different steps in the conversion funnel (clicks → leads → sales).

Funnel chart view showing the conversion & dropoff rates from clicks → leads → sales

Real-time events stream: A real-time events stream of every single conversion event that occurs across all your links in your workspace.

Getting Started

Links

Analytics

Conversion tracking

Dub Partners

Integrations

Open source

Google Tag Manager

Prerequisites

React

Manual installation

Framer

Shopify

WordPress

Webflow

Google Tag Manager