如何在 Auth0 的 afterCallback 中用 dub_id cookie 追踪注册 lead 事件

如何在 Auth0 的 afterCallback 中用 dub_id cookie 追踪注册 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如果你的网站用 Auth0 处理登录注册Dub 无法自动知道“某个用户是从你的 Dub 短链接点进来后才注册的”。官方文档给出的方案是在 Auth0 登录回调的afterCallback函数里读取dub_idcookie调用dub.track.lead上报一次 lead 事件把这次注册归属到用户点击的那条短链接上。本文基于仓库中的 Auth0 集成指南 展开适用于使用 Next.js 与auth0/nextjs-auth0的项目目标是让 Dub 的转化数据中能看到带来源链接的注册lead事件。前提dub_id cookie 从哪里来dub_idcookie 不是 Auth0 或你手动设置的而是 Dub 客户端脚本写入的第一方 cookie。Dub 的集成流程分为两步见 integrations.ts 中对各步骤的说明先安装 Dub 客户端脚本它负责追踪点击事件并把dub_id存为站点上的第一方 cookie再用服务端 SDK 或 REST API 上报 lead 事件。因此afterCallback里能读到dub_id的前提是客户端脚本已经装好。以 React/Next.js 为例官方 快速上手指南 的做法是npm install dub/analytics然后在根 layout或你希望追踪转化的页面中引入Analytics /组件import { Analytics as DubAnalytics } from dub/analytics/react; export default function RootLayout({ children, }: Readonly{ children: React.ReactNode; }) { return ( html langen body {children} DubAnalytics / /body /html ); }第二步需要一个初始化好的 Dub 服务端客户端。按 手动上报 lead 指南用 Dub TypeScript SDK 初始化token 默认读取DUB_API_KEY环境变量import { Dub } from dub; const dub new Dub({ // optional, defaults to the DUB_API_KEY environment variable token: process.env.DUB_API_KEY, });指南中的代码把该客户端放在/lib/dub并从中导入dub你按自己的项目结构放置即可但afterCallback所在的文件需要能 import 到它。在 afterCallback 中上报 lead 事件官方指南给出的完整代码如下与 auth0.md 一致import { handleAuth, handleCallback, type Session } from auth0/nextjs-auth0; import { cookies } from next/headers; import { dub } from /lib/dub; const afterCallback async (req: Request, session: Session) { const userExists await getUser(session.user.email); if (!userExists) { createUser(session.user); // check if dub_id cookie is present const clickId cookies().get(dub_id)?.value; if (clickId) { // send lead event to Dub await dub.track.lead({ clickId, eventName: Sign Up, customerExternalId: session.user.id, customerName: session.user.name, customerEmail: session.user.email, customerAvatar: session.user.image, }); // delete the dub_id cookie cookies().set(dub_id, , { expires: new Date(0), }); } return session; } }; export default handleAuth({ callback: handleCallback({ afterCallback }), });其中getUser和createUser指南没有给出实现它们是你项目里已有的“按 email 查询用户”和“创建用户”逻辑需要自行接入判断是否为新注册依赖userExists这个布尔值。这段代码的执行逻辑是四步在afterCallback中先判断用户是否为新注册!userExists仅对新注册用户读取dub_idcookie 的值作为clickIdcookie 存在时调用dub.track.lead上报 lead 事件同时带上客户的外部 ID、姓名、邮箱、头像上报后把dub_idcookie 置空并设置过期时间new Date(0)即删除它。为什么可以删除 cookieDub 在记录 lead 事件时会把用户存为 customer 并关联其来源点击事件此后用户在你的系统中的唯一 IDcustomerExternalId就是所有后续事件的归属依据不再需要dub_id该机制说明见 NextAuth 指南 中对同一模式的描述。这也是“只在!userExists分支内上报”的原因——老用户再走登录流程时不应重复产生 lead 事件。上报参数与结果判断dub.track.lead的关键参数在 API 的 zod schema 中有明确定义clickIdlead 事件归属的那次点击的唯一 ID即从dub_idcookie 读取的值customerExternalId客户在你系统中的唯一 ID必填后续所有事件都用它来归属到该客户eventNamelead 事件名示例中为Sign Up也可用于后续 sale 事件关联回这次 lead 事件customerName、customerEmail、customerAvatar可选缺省名字时 Dub 会生成一个随机名字。同一 schema 中还定义了mode参数可选值为async默认不阻塞请求、wait阻塞请求直到 lead 事件在 Dub 中完全记录、deferred延迟到后续请求创建。指南示例没有传该参数走的是默认async如果你需要在回调中同步确认事件已写入 Dub可以显式使用wait模式。track lead 请求成功时的响应结构见同文件的trackLeadResponseSchema包含click.id、link含shortLink、url等和customername、email、avatar、externalId可以据此核对事件关联到了正确的点击与客户。若不用 SDK手动上报指南 还给出了等效的 REST 调用向https://api.dub.co/track/lead发送 POSTAuthorization头携带Bearer dub_xxxxxx换成你的 API key请求体字段与 SDK 相同。限制与注意点整条路径依赖客户端脚本先写入dub_id如果用户没经过 Dub 短链接、cookie 不存在afterCallback里直接跳过上报这是预期行为而不是报错。afterCallback中读取 cookie 用的是next/headers的cookies()该写法面向 Next.js 的 App Router 服务端上下文指南本身以 Next.js 项目为示例环境。cookie 删除只影响本次请求的响应clickId一旦上报成功后续事件包括 sale以customerExternalId为准不再依赖 cookie。完成以上配置后通过 Dub 短链接进来并新注册的用户会在 Dub 中留下一条带来源点击信息的 lead 事件未走短链接的用户则不会产生 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考