@aranova/ 跟踪浏览器
Aranova 追踪无法使用 React 或 Next.js 软件包的网站的全局浏览器脚本 .
此软件包用于CDN/script-tag安装,而非应用程序导入.
安装
将脚本放入文档 <head> 在剩余页面运行之前.
<script src="https://cdn.jsdelivr.net/npm/@aranova/tracking-browser@0/dist/browser/aranova-tracking.global.js"></script>
<script>
const ARANOVA_TRACKING_CONFIG = {
businessId: "<business_id>",
environment: "production",
// Optional. Omit for the production CDN; set it to point at another origin
// (e.g. a local object store). There is no bundler here to inline an env var.
// cdnBaseUrl: "http://localhost:9100/aranova-demos",
};
window.AranovaTracking.init({
apiKey: "aranv_pk_...",
endpoint: "https://aranovainternal-production.up.railway.app/tracking",
trackingConfig: ARANOVA_TRACKING_CONFIG,
triggers: {
automatic: {
page_view: {},
time_on_site: { thresholdSeconds: 60 },
specific_page_visit: {
pages: [{ name: "contact_page", pathPattern: /^\/(contact|book|get-started)/ }],
},
},
manual: {
form_submit: {},
phone_click: {},
cta_click: {},
},
},
});
</script>
例如,在可能时将精确的版本用于生产 @aranova/[email protected]。 。 。 .
追踪是默认的(同意v2,选择退出模式)——脚本船没有同意横幅
和旧的 renderConsentBanner 选项是已贬值的无操作。 拨接页脚
“ cookie 偏好” 控制到同意的 API (参见 同意 (见下文)并披露
在网站隐私政策中跟踪+选择退出.
遗留的静态 gtag 标识
gtagId 财务报告和审定财务报表 gtagIds 继续兼容 API。 不为新安装使用 :
静态ID不编辑网站,无法消耗仪表板标记更改或墓碑. 若为
维持一个遗留装置, gtagIds 装入每个条目并优先于 gtagId。 。 。 .
<script>
window.AranovaTracking.init({
apiKey: "aranv_pk_...",
endpoint: "https://aranovainternal-production.up.railway.app/tracking",
environment: "production",
gtagIds: { production: "AW-111111111", test: "AW-222222222" },
triggers: { automatic: { page_view: {} } },
});
</script>
手动事件
浏览器包在运行时验证手动事件. 如果某一事件未登记在以下 triggers.manual,或元数据形状无效,SDK警告并放弃事件.
<form id="lead-form" action="/api/lead">
<select name="service_interest" aria-label="Service interest">
<option value="cleaning">Cleaning</option>
<option value="teeth_whitening">Teeth whitening</option>
</select>
<label>
<input name="is_existing_patient" type="checkbox" />
Existing patient
</label>
<button type="submit">Submit</button>
</form>
<script>
document.getElementById("lead-form").addEventListener("submit", function (event) {
var form = event.currentTarget;
var data = new FormData(form);
window.AranovaTracking.trackEvent("form_submit", {
form: {
id: form.id,
action: form.getAttribute("action"),
fields: [
{
name: "service_interest",
type: "select",
label: "Service interest",
value: String(data.get("service_interest") || ""),
},
{
name: "is_existing_patient",
type: "checkbox",
label: "Existing patient",
value: data.get("is_existing_patient") === "on",
},
],
},
page: { path: window.location.pathname },
});
});
</script>
fields[].value 可以是任意的 JSON 值:字符串,数字,布尔,无效,数组,或对象并被存储为第一当事方 JSONB. 有意提交的牵头字段可能包括生名,电子邮件,电话号码,地址,选取,自由文本消息,以及提交用于第一当事方分析及牵头操作的文件数据. 从提交表单中明确构建数组; SDK 从未刮出任意 DOM 字段 . File编号 :Blob 对象必须转换为 JSON 表示; 单独上传更大的文件并发送其存储引用。 事件元数据上没有执行字节限制——但是在导航冲出之前,一个提交文件已发射 keepalive,它的浏览器在64 KB附近并静静地下降,所以保持内嵌的有效载荷小. 从不发送密码,认证符,付款卡/银行证书,或私人密钥. 适用客户的隐私通知、同意、保留和规范的数据要求。 Google离线匹配使用正常的,服务器侧 SHA-256-hashed标识符——而不是原始的自由文本/文件元数据.
电话点击数 (tel: • 手动或自动抓取
选择到 自动抓取 和每个 tel: 链接被跟踪,没有每个链接代码——添加
autoCapture 页:1 phone_click 在 init()数字 :
manual: {
phone_click: { autoCapture: {} }, // default selector: a[href^="tel:"]
// or narrow it: { autoCapture: { selector: "a.call" } }
},
然后使用普通的电话链接——其他的都是由一个授权的听众操作的:
<a href="tel:+14165550199" data-aranova-section="header">(416) 555-0199</a>
数字是从 href (已正式改为E.164); section 来源于可选
data-aranova-section。 。 。 . 与 cta_click页:1 phone_click 还炒了Google广告
转换 联系电话目标(a) CLICK_TO_CALL ——自动点火
窃听器被捕获了,所以你从不打电话 trackConversion. (消防需要) trackingConfig 有线;见
页:1
喜欢用仪器连接自己吗? 以每个元件进行射击 —— 将转换 同样的方式:
<a
href="tel:+14165550199"
onclick="window.AranovaTracking.trackEvent('phone_click', {
phone_number: '+14165550199',
page: { path: window.location.pathname },
section: 'header'
})"
>(416) 555-0199</a
>
CTA 点击- 手动或自动抓取
开火 cta_click 每个有内置处理器的元素,或选择使用 自动抓取 跳过
处理者完全。 添加 autoCapture 页:1 cta_click 在 init()数字 :
manual: {
cta_click: { autoCapture: {} }, // default selector: [data-aranova-cta]
// or target existing classes: { autoCapture: { selector: "a.cta, .btn-primary" } }
},
然后标记您带有数据属性的 CTA —— 其余部分由单个授权的听器执行 :
<a href="/booking" data-aranova-cta="Book now" data-aranova-section="hero">Book now</a>
<button data-aranova-cta="Get a quote">Get a quote</button>
cta_name 决定: data-aranova-cta 值, 否则元素的修剪文本
(封顶120个字符),其他 tag#id。 。 。 . section 来源于可选 data-aranova-section· ;
href编号 :destination_url 和一个短 element 描述器是自动捕获的。 点
真实的 CTAs 选择器( 一个明确的属性是安全默认) — 每次匹配点击
计数,包括后面的 stopPropagation。 。 。 .
自动居中+退出( E)page_exit(中文(简体) )
page_exit 自动捕获——没有注册。 导航、标签隐藏和页面
卸下记录 活动 在页面上花费的时间加上最大卷轴深度
到达,通过一个恒定信标交付 所以最后一页仍然算数。 这种权力每页
在“仪表盘分析”标签中停留和卸下;没有配置.
全球API
window.AranovaTracking.init(config);
window.AranovaTracking.trackEvent(eventType, metadata);
window.AranovaTracking.captureTrackingParams();
window.AranovaTracking.getTrackingParams();
window.AranovaTracking.sales().record({ ... }); // record a sale / conversion
同意(v2——选择退出模式)
默认跟踪; 仅存储一个未过期的已忽略的已忽略块 gtag Meta Pixel, 和转换射击。 降级是值得的 90天时间; 赠款从未 过期。 将页脚控制线连接到 :
window.AranovaTracking.optOut(); // explicit decline (90 days)
window.AranovaTracking.optIn(); // explicit grant (never expires)
window.AranovaTracking.resetConsent(); // clear the choice → back to default-granted
window.AranovaTracking.getConsentChoice(); // { state, source, updatedAt, expiresAt }
window.AranovaTracking.getConsentState(); // effective "granted" | "denied"
<button onclick="window.AranovaTracking.optOut()">Opt out of ad measurement</button>
setConsentState('granted' | 'denied') 用于兼容性.
sales() 返回绑定到 公开 键和终点
init(),所以只能这样 写入 改划(record) (中文(简体) ). 所有内容——列表, summary
电话键 customers.* 名册, business.config(),更新,
删除 - 要求a 隐藏 键aranv_sk_…),并且必须通过 React/Next 运行服务器侧
软件包。 见
销售跟踪指南。 。 。 .
现场转换射击
通过生成 ARANOVA_TRACKING_CONFIG 参考文献 init()。浏览器 SDK 共享一个
R2运行时间用于Google标签加载,页面查看,自动目标,以及
AranovaTracking.sales() 开火 它在Google命令之前确认当前对象;
仪表板标签更改、目标再映射和更高版本的已禁用墓碑
public, max-age=60, must-revalidate 没有运行或站点重新部署.
<script>
const ARANOVA_TRACKING_CONFIG = {
businessId: "<business_id>",
environment: "production",
// Optional. Omit for the production CDN; set it to point at another origin
// (e.g. a local object store). There is no bundler here to inline an env var.
// cdnBaseUrl: "http://localhost:9100/aranova-demos",
};
window.AranovaTracking.init({
apiKey: "aranv_pk_...",
endpoint: "https://api.example.com/tracking",
triggers: {
automatic: { page_view: {}, scroll_depth: { thresholds: [50] } },
manual: { phone_click: {} },
},
trackingConfig: ARANOVA_TRACKING_CONFIG,
});
// Automatic event-goals (scroll/time/page-view/…) fire THEMSELVES — no code.
// init() also binds the sales client to the config, so these fire too:
window.AranovaTracking.sales().recordSale({
currency: "CAD",
amount_total_cents: 25000,
service: "tires",
}); // records + fires
window.AranovaTracking.sales().trackConversion("phone_click"); // fires a manual event-goal only
</script>
射击是经同意的,由 transaction_id。重新绘制现有密钥不需要
代码源。 A 类 新手动目标键 仍然需要 tracking-cli gen 以刷新生成
调用密钥列表和站点代码 trackConversion(key)。 。 。 . conversionConfig: { cdnUrl } 财务报告和审定财务报表
生成 ARANOVA_CONFIG_URL 仍然是遗留的相容性 API; 不要用于新建
安装。 见
转换-配置-schema.md。 。 。 .
自动事件
配置自动事件由 SDK 发射:
page_viewtime_on_sitespecific_page_visitscroll_depthmulti_page_sessionform_start