在网站中添加 Zalify Pixel
通过脚本安装 Zalify Pixel,保留预加载队列,避免单页应用加载期间的调用丢失。
通用安装方式是在网站的 <head> 中加入两个 <script> 标签。Shopify 店铺请使用Shopify 安装方式,其中会自动处理平台授权状态。
开始前
从 Zalify 控制台获取工作区 ID(wid)。如果还不熟悉像素用途,先阅读Zalify Pixel 的作用。
安装步骤
1
复制代码
第一段脚本建立调用队列,第二段加载像素:
<script>
window.zalify = window.zalify || function(){(zalify.q=zalify.q||[]).push(arguments)};
</script>
<script src="https://cdn.zalify.com/pixel.js?wid=YOUR_WORKSPACE_ID" defer></script>
2
替换工作区 ID
将 YOUR_WORKSPACE_ID 替换为控制台中的 wid。
3
加入网站 head
在需要追踪的页面 <head> 中放入代码。通常添加到共用布局或模板,即可全站加载。
4
发布并刷新
部署后打开网站。像素启动、获取工作区配置,并自动记录页面浏览。
保留预加载队列
单页应用应保留第一段 window.zalify 队列代码。它会暂存 pixel.js 加载完成前的调用,避免页面 hydration 期间的事件丢失。不要只加载第二段脚本。
单页应用与框架
像素会自动追踪路由变化,无需在 SPA 内部导航时另发页面浏览事件。可用于 Next.js、Remix、Vue、Svelte 和 Astro。
App Router 与 Pages Router 的具体方式见 Next.js 集成指南。
验证安装
通过预览模式实时观察事件。