Dub 项目实战通过 Google Tag Manager 配置线索Lead事件跟踪【免费下载链接】dubThe modern link attribution platform. Loved by world-class marketing teams like Framer, Perplexity, Superhuman, Twilio, Buffer and more.项目地址: https://gitcode.com/GitHub_Trending/du/dub本文以 Dub现代链接归因平台的官方 GTM 集成指南为骨架系统讲解如何借助 Google Tag Manager 在自有站点上采集dub_idCookie、上报 lead 转化事件并落地「感谢页跟踪」与「表单提交跟踪」两种实战方案。读完本文你将掌握完整的 GTM 变量、自定义 HTML 标签、触发器配置方法以及事件参数的底层校验规则与调试排障手段。前置条件先通过 GTM 安装 Dub Analytics 客户端脚本本文的所有步骤都建立在「已通过 GTM 安装 Dub Analytics 脚本」这一前提之上。若尚未安装请先按 gtm-client-sdk.md 完成以下四步新建标签进入 GTM 工作区的Tags→New标签类型选择Custom HTML粘贴客户端脚本将 Dub 的引导加载脚本loader粘贴到 HTML 字段中。该脚本会注册window.dubAnalytics及trackClick/trackLead/trackSale三个方法并异步加载https://www.dubcdn.com/analytics/script.jsscript (function (c, n) { c[n] c[n] || function () { (c[n].q c[n].q || []).push(arguments); }; var methods [trackClick, trackLead, trackSale]; for (var i 0; i methods.length; i) { (function (method) { c[n][method] function () { var args Array.prototype.slice.call(arguments); args.unshift(method); c[n].apply(null, args); }; })(methods[i]); } var s document.createElement(script); s.defer 1; s.src https://www.dubcdn.com/analytics/script.js; document.head.appendChild(s); })(window, dubAnalytics); /script配置触发器在Triggering中选择All Pages让脚本在每个页面加载时都生效保存并发布命名标签为Dub Analytics依次点击Save→Submit→Publish使其上线。说明dubAnalytics.q是队列机制即使脚本尚未加载完成调用trackLead等方法的参数也会先入队待 SDK 就绪后统一消费因此无需担心页面时序问题。理解归因的关键dub_idCookieDub 的转化归因依赖dub_idCookie。当用户点击一个 Dub 短链接如https://dub.sh/xxx被重定向到你的站点时Dub 会在响应中种下dub_idCookie其中保存的是这次点击的唯一标识click ID。从源码看Dub 的中间件在重写响应时会通过 create-response-with-cookies.ts 写入该 Cookie并设置maxAge: 60 * 601 小时用于去重缓存// apps/web/lib/middleware/utils/create-response-with-cookies.ts if (dubIdCookieValue) { response.cookies.set(dubIdCookieName, dubIdCookieValue, { path, maxAge: 60 * 60, // 1 hour }); }因此凡是经由 Dub 短链接进入你站点的访客浏览器里都会存在dub_id。上报 lead 事件时把它一并带上Dub 就能把这次转化精确归因到最初的点击与渠道。Step 1创建 GTM 变量读取dub_idCookie由于 GTM 的 Custom HTML 标签默认无法直接读取 Cookie需要先创建一个「第一方 Cookie」类型的用户自定义变量在 GTM 工作区进入Variables面板点击New新建变量Variable Type选择1st Party CookieCookie Name填写dub_idVariable Name命名为「Dub ID Cookie」点击Save保存。之后在标签代码中即可用{{Dub ID Cookie}}引用该 Cookie 值。代码中统一采用{{Dub ID Cookie}} || 的写法确保 Cookie 缺失时得到空字符串而不是null避免后续判断出错。Step 2跟踪 lead 事件的两种方式Dub 官方提供两种 lead 跟踪路径推荐度与可靠性不同方式适用场景可靠性触发时机感谢页跟踪Thank You Page Tracking推荐表单提交后跳转到独立的成功/感谢页更高不易被广告拦截器拦截数据更准确页面加载时表单提交跟踪Form Submission Tracking无独立感谢页、需即时上报的场景较低受广告拦截器与触发时序影响表单提交事件发生时方式一感谢页跟踪推荐此方式在用户完成表单后落地到感谢页/成功页时上报 lead。由于是在页面加载阶段发送请求且不依赖表单 DOM被广告拦截器屏蔽的概率更低。创建一个Custom HTML标签粘贴以下代码script (function () { // Get query parameters from URL var params new URLSearchParams(window.location.search); var email params.get(email); var name params.get(name); // Get dub_id from cookie using GTM variable var clickId {{Dub ID Cookie}} || ; // Only track the lead event if email and clickId are present if (email clickId) { dubAnalytics.trackLead({ eventName: Sign Up, customerExternalId: email, customerName: name || email, customerEmail: email, clickId: clickId, }); } })(); /script重要务必保证表单在跳转感谢页时把email与name作为查询参数传递例如?emailxxnamexx否则 lead 事件无法归因到正确客户。同时customerExternalId建议使用你在自己系统内稳定唯一的标识这里示例直接用 email便于后续 sale 事件持续关联到同一客户。为该标签配置Page View触发器限定只在感谢页触发Trigger TypePage ViewThis trigger fires onSome Page Views条件示例Page URL包含/thank-you或Page Path等于/success或任何与你的感谢页 URL 模式匹配的条件将标签命名为Dub Lead Tracking - Thank You Page并保存。方式二表单提交跟踪此方式在用户提交表单的瞬间上报 lead适合没有独立感谢页的站点。它依赖页面上的表单 DOM因此受广告拦截器和脚本执行时序影响更大。同样创建Custom HTML标签粘贴以下代码script (function () { // Get form data - customize these selectors based on your form var name document.getElementById(name) ? document.getElementById(name).value : ; var email document.getElementById(email) ? document.getElementById(email).value : ; // Get dub_id from cookie using GTM variable var clickId {{Dub ID Cookie}} || ; // Only track the lead event if email and clickId are present if (email clickId) { dubAnalytics.trackLead({ eventName: Sign Up, customerExternalId: email, customerName: name || email, customerEmail: email, clickId: clickId, }); } })(); /script重要代码中的 DOM 选择器getElementById(name)、getElementById(email)必须与你的真实表单字段 ID 一一对应。如果表单结构更复杂也可以改用document.querySelector、FormData或表单submit事件中的event.target来采集数据。为该标签配置Form Submission触发器Trigger TypeForm SubmissionThis trigger fires onSome Forms若想跟踪所有表单提交则选All Forms添加条件限定哪些表单触发 lead 跟踪将标签命名为Dub Lead Tracking - Form Submission并保存。trackLead 参数详解来自源码的字段约束为了让上报更准确建议结合 Dub 开源仓库中 leads.ts 定义的trackLeadRequestSchema理解每个参数的校验规则与默认值参数必填约束与说明clickId是点击唯一 ID从dub_idCookie 读取若为空字符串延迟跟踪场景Dub 会尝试用customerExternalId找到既有客户并沿用其 clickIdeventName是事件名称1 ~ 255字符同一客户可借此名与后续 sale 事件关联对应/track/sale的leadEventNamecustomerExternalId是你系统内客户的唯一 ID1 ~ 100字符用于识别并归因该客户所有后续事件customerName否客户姓名最多 100 字符不传时 Dub 会生成随机名字如 Big Red CariboucustomerEmail否客户邮箱需符合 email 格式最多 100 字符customerAvatar否客户头像 URLmode否async默认不阻塞请求/wait阻塞至事件完整入库/deferred延迟到后续请求再创建eventQuantity否事件数值如免费试用开通的席位数量最大 100传 N 则该 lead 事件被记录 N 次metadata否附加元数据序列化后最多 10,000 字符客户端脚本dubAnalytics.trackLead与服务端 SDK/API 的字段语义一致因此你在 GTM 里写的对象参数可以直接对照上表核对。测试你的 GTM 配置配置完成后使用 GTM 的Preview模式验证启用预览模式在 GTM 工作区右上角点击Preview输入你的网站 URL并点击Connect按所选方式测试方式一感谢页带查询参数直接访问感谢页例如?emailtestexample.comnameTest User方式二表单提交打开含表单的页面提交一次测试表单观察 GTM 调试器确认标签是否正确触发、代码是否报错。验证 lead 是否真正入库浏览器开发者控制台检查是否存在 JavaScript 报错Network 面板确认请求是否发往 Dub 的分析端点Dub 控制台登录仪表盘确认 lead 事件出现在分析数据中。常见故障排查现象排查方向标签不触发检查触发器条件是否与页面 URL/路径结构匹配缺少 publishable key确认 GTM 里的占位符是否替换为你的实际 publishable key缺少查询参数方式一确认表单跳转感谢页时携带了所需查询参数表单数据采集不到方式二核对 DOM 选择器与表单字段 ID/name 是否一致进阶lead 事件如何与 sale 联动lead 只是归因链的起点。Dub 的 sale成交事件同样支持通过 GTM 上报其完整配置流程见 gtm-track-sale.md。其中trackSale的核心参数金额以分为单位、币种默认为usd、paymentProcessor支持 stripe/shopify/paddle 等枚举值、invoiceId可作幂等键在仓库源码 sales.ts 中有明确定义。如果eventName传入了与 lead 事件相同的名称leadEventName销售就会被归因到该 lead 对应的点击与客户形成完整的「点击 → 线索 → 成交」归因闭环。延伸服务端跟踪与 REST APIGTM 适用于前端场景如果你的 lead 产生在后端例如注册成功回调中可以参考 manual-track-lead.md 使用服务端 SDK 或 REST API。仓库自身也提供了可运行的服务端示例track-dub-lead.ts 展示了如何读取dub_idCookie 并调用dub.track.lead()上报注册事件eventName: Sign Up上报完成后还会主动删除dub_id与dub_partner_dataCookie 防止重复上报——这套「读 Cookie → 上报 → 清除 Cookie」的写法可作为自定义后端集成的参考范本。import { dub } from /lib/dub; import { cookies } from next/headers; const cookieStore await cookies(); const clickId cookieStore.get(dub_id)?.value; if (clickId) { await dub.track.lead({ clickId, eventName: Sign Up, customerExternalId: user.id, customerName: user.name, customerEmail: user.email, }); cookieStore.delete(dub_id); }小结通过 GTM 跟踪 Dub lead 事件的完整链路为Dub 短链接点击 → 写入dub_idCookie → GTM 第一方 Cookie 变量读取 → Custom HTML 标签调用dubAnalytics.trackLead()→ Dub 归因入库。生产环境建议优先采用「感谢页跟踪」方案并将email、name通过查询参数带入感谢页同时结合 gtm-track-sale.md 打通销售事件即可在 Dub 仪表盘中获得从点击到成交的全链路归因视图。若前端采集不可行还可参考 manual-track-lead.md 以服务端 SDK 或 REST API 完成同样的上报。【免费下载链接】dubThe modern link attribution platform. Loved by world-class marketing teams like Framer, Perplexity, Superhuman, Twilio, Buffer and more.项目地址: https://gitcode.com/GitHub_Trending/du/dub创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/9/12 4:50:12 · 阅读 1.2k Dub 项目实战：通过 Google Tag Manager 配置线索（Lead）事件跟踪
Dub 项目实战通过 Google Tag Manager 配置线索Lead事件跟踪【免费下载链接】dubThe modern link attribution platform. Loved by world-class marketing teams like Framer, Perplexity, Superhuman, Twilio, Buffer and more.项目地址: https://gitcode.com/GitHub_Trending/du/dub本文以 Dub现代链接归因平台的官方 GTM 集成指南为骨架系统讲解如何借助 Google Tag Manager 在自有站点上采集dub_idCookie、上报 lead 转化事件并落地「感谢页跟踪」与「表单提交跟踪」两种实战方案。读完本文你将掌握完整的 GTM 变量、自定义 HTML 标签、触发器配置方法以及事件参数的底层校验规则与调试排障手段。前置条件先通过 GTM 安装 Dub Analytics 客户端脚本本文的所有步骤都建立在「已通过 GTM 安装 Dub Analytics 脚本」这一前提之上。若尚未安装请先按 gtm-client-sdk.md 完成以下四步新建标签进入 GTM 工作区的Tags→New标签类型选择Custom HTML粘贴客户端脚本将 Dub 的引导加载脚本loader粘贴到 HTML 字段中。该脚本会注册window.dubAnalytics及trackClick/trackLead/trackSale三个方法并异步加载https://www.dubcdn.com/analytics/script.jsscript (function (c, n) { c[n] c[n] || function () { (c[n].q c[n].q || []).push(arguments); }; var methods [trackClick, trackLead, trackSale]; for (var i 0; i methods.length; i) { (function (method) { c[n][method] function () { var args Array.prototype.slice.call(arguments); args.unshift(method); c[n].apply(null, args); }; })(methods[i]); } var s document.createElement(script); s.defer 1; s.src https://www.dubcdn.com/analytics/script.js; document.head.appendChild(s); })(window, dubAnalytics); /script配置触发器在Triggering中选择All Pages让脚本在每个页面加载时都生效保存并发布命名标签为Dub Analytics依次点击Save→Submit→Publish使其上线。说明dubAnalytics.q是队列机制即使脚本尚未加载完成调用trackLead等方法的参数也会先入队待 SDK 就绪后统一消费因此无需担心页面时序问题。理解归因的关键dub_idCookieDub 的转化归因依赖dub_idCookie。当用户点击一个 Dub 短链接如https://dub.sh/xxx被重定向到你的站点时Dub 会在响应中种下dub_idCookie其中保存的是这次点击的唯一标识click ID。从源码看Dub 的中间件在重写响应时会通过 create-response-with-cookies.ts 写入该 Cookie并设置maxAge: 60 * 601 小时用于去重缓存// apps/web/lib/middleware/utils/create-response-with-cookies.ts if (dubIdCookieValue) { response.cookies.set(dubIdCookieName, dubIdCookieValue, { path, maxAge: 60 * 60, // 1 hour }); }因此凡是经由 Dub 短链接进入你站点的访客浏览器里都会存在dub_id。上报 lead 事件时把它一并带上Dub 就能把这次转化精确归因到最初的点击与渠道。Step 1创建 GTM 变量读取dub_idCookie由于 GTM 的 Custom HTML 标签默认无法直接读取 Cookie需要先创建一个「第一方 Cookie」类型的用户自定义变量在 GTM 工作区进入Variables面板点击New新建变量Variable Type选择1st Party CookieCookie Name填写dub_idVariable Name命名为「Dub ID Cookie」点击Save保存。之后在标签代码中即可用{{Dub ID Cookie}}引用该 Cookie 值。代码中统一采用{{Dub ID Cookie}} || 的写法确保 Cookie 缺失时得到空字符串而不是null避免后续判断出错。Step 2跟踪 lead 事件的两种方式Dub 官方提供两种 lead 跟踪路径推荐度与可靠性不同方式适用场景可靠性触发时机感谢页跟踪Thank You Page Tracking推荐表单提交后跳转到独立的成功/感谢页更高不易被广告拦截器拦截数据更准确页面加载时表单提交跟踪Form Submission Tracking无独立感谢页、需即时上报的场景较低受广告拦截器与触发时序影响表单提交事件发生时方式一感谢页跟踪推荐此方式在用户完成表单后落地到感谢页/成功页时上报 lead。由于是在页面加载阶段发送请求且不依赖表单 DOM被广告拦截器屏蔽的概率更低。创建一个Custom HTML标签粘贴以下代码script (function () { // Get query parameters from URL var params new URLSearchParams(window.location.search); var email params.get(email); var name params.get(name); // Get dub_id from cookie using GTM variable var clickId {{Dub ID Cookie}} || ; // Only track the lead event if email and clickId are present if (email clickId) { dubAnalytics.trackLead({ eventName: Sign Up, customerExternalId: email, customerName: name || email, customerEmail: email, clickId: clickId, }); } })(); /script重要务必保证表单在跳转感谢页时把email与name作为查询参数传递例如?emailxxnamexx否则 lead 事件无法归因到正确客户。同时customerExternalId建议使用你在自己系统内稳定唯一的标识这里示例直接用 email便于后续 sale 事件持续关联到同一客户。为该标签配置Page View触发器限定只在感谢页触发Trigger TypePage ViewThis trigger fires onSome Page Views条件示例Page URL包含/thank-you或Page Path等于/success或任何与你的感谢页 URL 模式匹配的条件将标签命名为Dub Lead Tracking - Thank You Page并保存。方式二表单提交跟踪此方式在用户提交表单的瞬间上报 lead适合没有独立感谢页的站点。它依赖页面上的表单 DOM因此受广告拦截器和脚本执行时序影响更大。同样创建Custom HTML标签粘贴以下代码script (function () { // Get form data - customize these selectors based on your form var name document.getElementById(name) ? document.getElementById(name).value : ; var email document.getElementById(email) ? document.getElementById(email).value : ; // Get dub_id from cookie using GTM variable var clickId {{Dub ID Cookie}} || ; // Only track the lead event if email and clickId are present if (email clickId) { dubAnalytics.trackLead({ eventName: Sign Up, customerExternalId: email, customerName: name || email, customerEmail: email, clickId: clickId, }); } })(); /script重要代码中的 DOM 选择器getElementById(name)、getElementById(email)必须与你的真实表单字段 ID 一一对应。如果表单结构更复杂也可以改用document.querySelector、FormData或表单submit事件中的event.target来采集数据。为该标签配置Form Submission触发器Trigger TypeForm SubmissionThis trigger fires onSome Forms若想跟踪所有表单提交则选All Forms添加条件限定哪些表单触发 lead 跟踪将标签命名为Dub Lead Tracking - Form Submission并保存。trackLead 参数详解来自源码的字段约束为了让上报更准确建议结合 Dub 开源仓库中 leads.ts 定义的trackLeadRequestSchema理解每个参数的校验规则与默认值参数必填约束与说明clickId是点击唯一 ID从dub_idCookie 读取若为空字符串延迟跟踪场景Dub 会尝试用customerExternalId找到既有客户并沿用其 clickIdeventName是事件名称1 ~ 255字符同一客户可借此名与后续 sale 事件关联对应/track/sale的leadEventNamecustomerExternalId是你系统内客户的唯一 ID1 ~ 100字符用于识别并归因该客户所有后续事件customerName否客户姓名最多 100 字符不传时 Dub 会生成随机名字如 Big Red CariboucustomerEmail否客户邮箱需符合 email 格式最多 100 字符customerAvatar否客户头像 URLmode否async默认不阻塞请求/wait阻塞至事件完整入库/deferred延迟到后续请求再创建eventQuantity否事件数值如免费试用开通的席位数量最大 100传 N 则该 lead 事件被记录 N 次metadata否附加元数据序列化后最多 10,000 字符客户端脚本dubAnalytics.trackLead与服务端 SDK/API 的字段语义一致因此你在 GTM 里写的对象参数可以直接对照上表核对。测试你的 GTM 配置配置完成后使用 GTM 的Preview模式验证启用预览模式在 GTM 工作区右上角点击Preview输入你的网站 URL并点击Connect按所选方式测试方式一感谢页带查询参数直接访问感谢页例如?emailtestexample.comnameTest User方式二表单提交打开含表单的页面提交一次测试表单观察 GTM 调试器确认标签是否正确触发、代码是否报错。验证 lead 是否真正入库浏览器开发者控制台检查是否存在 JavaScript 报错Network 面板确认请求是否发往 Dub 的分析端点Dub 控制台登录仪表盘确认 lead 事件出现在分析数据中。常见故障排查现象排查方向标签不触发检查触发器条件是否与页面 URL/路径结构匹配缺少 publishable key确认 GTM 里的占位符是否替换为你的实际 publishable key缺少查询参数方式一确认表单跳转感谢页时携带了所需查询参数表单数据采集不到方式二核对 DOM 选择器与表单字段 ID/name 是否一致进阶lead 事件如何与 sale 联动lead 只是归因链的起点。Dub 的 sale成交事件同样支持通过 GTM 上报其完整配置流程见 gtm-track-sale.md。其中trackSale的核心参数金额以分为单位、币种默认为usd、paymentProcessor支持 stripe/shopify/paddle 等枚举值、invoiceId可作幂等键在仓库源码 sales.ts 中有明确定义。如果eventName传入了与 lead 事件相同的名称leadEventName销售就会被归因到该 lead 对应的点击与客户形成完整的「点击 → 线索 → 成交」归因闭环。延伸服务端跟踪与 REST APIGTM 适用于前端场景如果你的 lead 产生在后端例如注册成功回调中可以参考 manual-track-lead.md 使用服务端 SDK 或 REST API。仓库自身也提供了可运行的服务端示例track-dub-lead.ts 展示了如何读取dub_idCookie 并调用dub.track.lead()上报注册事件eventName: Sign Up上报完成后还会主动删除dub_id与dub_partner_dataCookie 防止重复上报——这套「读 Cookie → 上报 → 清除 Cookie」的写法可作为自定义后端集成的参考范本。import { dub } from /lib/dub; import { cookies } from next/headers; const cookieStore await cookies(); const clickId cookieStore.get(dub_id)?.value; if (clickId) { await dub.track.lead({ clickId, eventName: Sign Up, customerExternalId: user.id, customerName: user.name, customerEmail: user.email, }); cookieStore.delete(dub_id); }小结通过 GTM 跟踪 Dub lead 事件的完整链路为Dub 短链接点击 → 写入dub_idCookie → GTM 第一方 Cookie 变量读取 → Custom HTML 标签调用dubAnalytics.trackLead()→ Dub 归因入库。生产环境建议优先采用「感谢页跟踪」方案并将email、name通过查询参数带入感谢页同时结合 gtm-track-sale.md 打通销售事件即可在 Dub 仪表盘中获得从点击到成交的全链路归因视图。若前端采集不可行还可参考 manual-track-lead.md 以服务端 SDK 或 REST API 完成同样的上报。【免费下载链接】dubThe modern link attribution platform. Loved by world-class marketing teams like Framer, Perplexity, Superhuman, Twilio, Buffer and more.项目地址: https://gitcode.com/GitHub_Trending/du/dub创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考