diff --git a/conversions/leads/google-tag-manager.mdx b/conversions/leads/google-tag-manager.mdx
index c24806ad..78aa1363 100644
--- a/conversions/leads/google-tag-manager.mdx
+++ b/conversions/leads/google-tag-manager.mdx
@@ -24,120 +24,192 @@ Before you get started, make sure you follow the [Dub Conversions quickstart gui
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.
-
-
-
-
- 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
-
-
-
-
-
- Add a new Client Template using the import option:
-
- 1. In your server container, go to **Client Templates** → **New**
- 2. Click **Import** and upload the [Dub GTM Server Client template](https://github.com/dubinc/gtm-server-client-template)
-
-
- 
-
-
-
-
-
-
- Next, create a new Client using the imported template:
-
- 1. In your server container, go to **Clients** → **New**
- 2. Select the **Dub GTM Server Client** template from **Custom**
- 3. Name the client "Dub Server Client" (or any descriptive name)
- 4. Set the **Request Path** to `/dub/track`
- 5. Optionally enable debug logging for troubleshooting
-
-
- 
-
-
- **Note:** 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.
-
-
-
-
-
- Next, import the Dub GTM Server Tag template to handle lead tracking:
-
- 1. In your server container, go to **Tags** → **New**
- 2. Click **Import** and upload the [Dub GTM Server Tag template](https://github.com/dubinc/gtm-server-tag-template)
- 3. This template is specifically designed to send conversion events directly to Dub
-
-
- 
-
-
-
-
-
-
- Next, create a new tag for lead tracking with proper mapping:
-
- 1. In your server container, go to **Tags** → **New**
- 2. Select the **Dub Conversion Tag** template from **Custom**
- 3. Name the tag "Dub Lead Tracking" (or any descriptive name)
- 4. Configure the tag settings:
-
- - **Dub API Key**: Enter your [Dub API key](https://dub.co/docs/api-reference/tokens) (starts with `dub_`)
- - **Event**: Select "Track lead"
- - **Click ID**: Map to the `clickId` from the Dub Server Client event data
- - **Customer External ID**: Map to the `customerExternalId` from the event data
- - **Event Name**: Map to the `eventName` from the event data (e.g., "Sign Up")
- - **Customer Name**: Map to the `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)
- - **Mode**: Set to "async" for non-blocking requests
-
- 5. **Triggering**: Configure when the tag should fire:
- - Click **Triggering** in the tag configuration
- - 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
-
-
- 
-
-
-
-
-
+### 1. Set up GTM Server Container
+
+In Google Tag Manager, you'll need to use an existing server container or [create a new one](https://youtu.be/waqBSk3vkko). 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](https://developers.google.com/tag-platform/learn/sst-fundamentals/4-sst-setup-container)
+
+### 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](https://raw.githubusercontent.com/dubinc/gtm-server-client-template/main/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](https://raw.githubusercontent.com/dubinc/gtm-server-tag-template/main/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](https://dub.co/docs/api-reference/tokens) (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
@@ -145,7 +217,9 @@ To track lead conversion events with Google Tag Manager, you'll need to set up a
You can test your GTM server setup by sending a curl request to your server URL with the appropriate query parameters:
-```bash
+
+
+```bash cURL
curl "https://server-side-tagging-xxx-uc.a.run.app/dub/track/lead?\
dub_id=pAzVZ3jzwZXcLMDT&\
eventName=Sign%20Up&\
@@ -157,6 +231,8 @@ eventQuantity=1&\
mode=async"
```
+
+
## Download GTM templates
To learn more about how to track leads with Google Tag Manager, check out the following templates:
diff --git a/conversions/sales/google-tag-manager.mdx b/conversions/sales/google-tag-manager.mdx
index b4887d68..6cb322f2 100644
--- a/conversions/sales/google-tag-manager.mdx
+++ b/conversions/sales/google-tag-manager.mdx
@@ -29,135 +29,223 @@ Before you get started, make sure you follow the [Dub Conversions quickstart gui
## Configure Google Tag Manager server-side tracking
-To track sales 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.
-
-
-
-
-
- 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
-
-
-
-
-
-
- If you've already set up the Dub GTM Server Client for lead tracking, you can skip this step and the next step.
-
-
- Add a new Client Template using the import option:
-
- 1. In your server container, go to **Client Templates** → **New**
- 2. Click **Import** and upload the [Dub GTM Server Client template](https://github.com/dubinc/gtm-server-client-template)
-
-
-
-
-
-
-
-
-
-
- If you've already set up the Dub GTM Server Client for lead tracking, you can skip this step.
-
-
- Next, create a new Client using the imported template:
-
- 1. In your server container, go to **Clients** → **New**
- 2. Select the **Dub GTM Server Client** template from **Custom**
- 3. Name the client "Dub Server Client" (or any descriptive name)
- 4. Set the **Request Path** to `/dub/track`
- 5. Optionally enable debug logging for troubleshooting
+
+ If you've already set up the [Dub GTM Server Client and Tag for lead
+ tracking](/conversions/leads/google-tag-manager), you can skip ahead to step
+ 5.
+
-
-
-
-
- **Note:** 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.
-
-
-
-
-
-
- If you've already imported the Dub GTM Server Tag template for lead tracking, you can skip this step.
-
-
- Next, import the Dub GTM Server Tag template to handle sales tracking:
-
- 1. In your server container, go to **Tags** → **New**
- 2. Click **Import** and upload the [Dub GTM Server Tag template](https://github.com/dubinc/gtm-server-tag-template)
- 3. This template is specifically designed to send conversion events directly to Dub
-
-
-
-
-
-
-
-
-
- Next, create a new tag for sales tracking with proper mapping:
-
- 1. In your server container, go to **Tags** → **New**
- 2. Select the **Dub Conversion Tag** template from **Custom**
- 3. Name the tag "Dub Sales Tracking" (or any descriptive name)
- 4. Configure the tag settings:
+To track sales 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
+
+
+ If you've already set up the [Dub GTM Server Client and Tag for lead
+ tracking](/conversions/leads/google-tag-manager), you can skip this step.
+
+
+In Google Tag Manager, you'll need to use an existing server container or [create a new one](https://youtu.be/waqBSk3vkko). 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](https://developers.google.com/tag-platform/learn/sst-fundamentals/4-sst-setup-container)
+
+### 2. Import Dub GTM Server Client Template
+
+
+ If you've already set up the [Dub GTM Server Client and Tag for lead
+ tracking](/conversions/leads/google-tag-manager), you can skip this step.
+
+
+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](https://github.com/dubinc/gtm-server-client-template/blob/main/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
+
+
+ If you've already set up the [Dub GTM Server Client and Tag for lead
+ tracking](/conversions/leads/google-tag-manager), you can skip this step.
+
+
+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)
+
+
+
+
- - **Dub API Key**: Enter your [Dub API key](https://dub.co/docs/api-reference/tokens) (starts with `dub_`)
- - **Event**: Select "Track sale"
- - **Customer External ID**: Map to the `customerExternalId` from the event data
- - **Amount**: Map to the `amount` from the event data (in cents)
- - **Currency**: Map to the `currency` from the event data (e.g., "usd")
- - **Event Name**: Map to the `eventName` from the event data (e.g., "Purchase")
- - **Payment Processor**: Map to the `paymentProcessor` from the event data (e.g., "stripe")
- - **Invoice ID**: Map to the `invoiceId` from the event data (optional)
- - **Lead Event Name**: Map to the `leadEventName` from the event data (optional)
- - **Metadata**: Map to the `metadata` from the event data (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.
+
- 5. **Triggering**: Configure when the tag should fire:
- - Click **Triggering** in the tag configuration
- - 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 sales events:
- - **Variable**: Select a variable that contains the event type
- - **Operator**: Equals
- - **Value**: "Purchase"
- - Name the trigger "Dub Sales Event Trigger" and save it
-
-
- 
-
-
-
-
-
+### 4. Import Dub GTM Server Tag Template
+
+
+ If you've already set up the [Dub GTM Server Client and Tag for lead
+ tracking](/conversions/leads/google-tag-manager), you can skip this step.
+
+
+Next, you'll want to import the Dub GTM Server Tag template to handle sales 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](https://github.com/dubinc/gtm-server-tag-template/blob/main/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 Sales 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](https://dub.co/docs/api-reference/tokens) (starts with `dub_`)
+- **Event**: Select "Track sale" from the dropdown
+- **Customer External ID**: `customerExternalId` from the event data
+- **Amount**: `amount` from the event data (in cents)
+- **Currency**: `currency` from the event data (e.g., "usd")
+- **Event Name**: `eventName` from the event data (e.g., "Purchase")
+- **Payment Processor**: `paymentProcessor` from the event data (e.g., "stripe")
+- **Invoice ID**: Map to the `invoiceId` from the event data (optional)
+- **Lead Event Name**: Map to the `leadEventName` from the event data (optional)
+- **Metadata**: Map to the `metadata` from the event data (optional)
+
+
+
+
+
+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 sales events:
+ - **Variable**: Select a variable that contains the event type
+ - **Operator**: Equals
+ - **Value**: "Purchase"
+- Name the trigger "Dub Sales Event Trigger" and save it
@@ -165,17 +253,23 @@ To track sales conversion events with Google Tag Manager, you'll need to set up
You can test your GTM server setup by sending a curl request to your server URL with the appropriate query parameters:
-```bash
+
+
+```bash cURL
curl "https://server-side-tagging-xxx-uc.a.run.app/dub/track/sale?\
+dub_id=pAzVZ3jzwZXcLMDT&\
customerExternalId=user_1K0RN3SDNAC0C1WCW4BGRS3EW&\
amount=1000&\
currency=usd&\
eventName=Purchase&\
paymentProcessor=stripe&\
invoiceId=inv_123456789&\
-leadEventName=Sign%20Up"
+leadEventName=Sign%20Up&\
+mode=async"
```
+
+
## Download GTM templates
To learn more about how to track sales with Google Tag Manager, check out the following templates:
@@ -201,6 +295,6 @@ To learn more about how to track sales with Google Tag Manager, check out the fo
## View conversion results
-And that's it – you're all set! You can now sit back, relax, and watch your conversion revenue grow. We provide 3 different views to help you understand your conversions:
+And that's it – you're all set! You can now sit back, relax, and watch your conversion revenue grow. We provide 3 different views to help you understand your conversions:
diff --git a/images/conversions/google-tag-manager/gtm-choose-client-type.png b/images/conversions/google-tag-manager/gtm-choose-client-type.png
new file mode 100644
index 00000000..76099e4c
Binary files /dev/null and b/images/conversions/google-tag-manager/gtm-choose-client-type.png differ
diff --git a/images/conversions/google-tag-manager/gtm-choose-tag-type.png b/images/conversions/google-tag-manager/gtm-choose-tag-type.png
new file mode 100644
index 00000000..55017fd0
Binary files /dev/null and b/images/conversions/google-tag-manager/gtm-choose-tag-type.png differ
diff --git a/images/conversions/google-tag-manager/gtm-import-client-template.png b/images/conversions/google-tag-manager/gtm-import-client-template.png
new file mode 100644
index 00000000..fc85e75d
Binary files /dev/null and b/images/conversions/google-tag-manager/gtm-import-client-template.png differ
diff --git a/images/conversions/google-tag-manager/gtm-new-client-template.png b/images/conversions/google-tag-manager/gtm-new-client-template.png
new file mode 100644
index 00000000..48d84c20
Binary files /dev/null and b/images/conversions/google-tag-manager/gtm-new-client-template.png differ
diff --git a/images/conversions/google-tag-manager/gtm-new-server-client.png b/images/conversions/google-tag-manager/gtm-new-server-client.png
new file mode 100644
index 00000000..592b2878
Binary files /dev/null and b/images/conversions/google-tag-manager/gtm-new-server-client.png differ
diff --git a/images/conversions/google-tag-manager/gtm-new-tag-template.png b/images/conversions/google-tag-manager/gtm-new-tag-template.png
new file mode 100644
index 00000000..6fadd146
Binary files /dev/null and b/images/conversions/google-tag-manager/gtm-new-tag-template.png differ
diff --git a/images/conversions/google-tag-manager/gtm-new-tag.png b/images/conversions/google-tag-manager/gtm-new-tag.png
new file mode 100644
index 00000000..0a77480f
Binary files /dev/null and b/images/conversions/google-tag-manager/gtm-new-tag.png differ
diff --git a/images/conversions/google-tag-manager/gtm-server-client-template.png b/images/conversions/google-tag-manager/gtm-server-client-template.png
index 649e8571..b2305e5f 100644
Binary files a/images/conversions/google-tag-manager/gtm-server-client-template.png and b/images/conversions/google-tag-manager/gtm-server-client-template.png differ