gpt4 book ai didi

reactjs - Tealium 标签与 React Js 的集成

转载 作者:行者123 更新时间:2023-12-04 13:01:15 26 4
gpt4 key购买 nike

我正在尝试将 Tealium 标签与我们基于 react.js 的项目集成;但是,我没有找到有关此事的任何文件?如果有人可以向我提供一些文档或示例来说明如何做到这一点,我将不胜感激?

最佳答案

Tealium 文档有 a section on Single Page Applications这适用于 React。这个答案引用了该文档并从我的经验中添加了一些内容。
修改Tealium脚本
首先,您需要使用以下两行稍微修改其全局脚本:

window.utag_cfg_ovrd = window.utag_cfg_ovrd || {};
window.utag_cfg_ovrd.noview = true;
这会覆盖自动页面跟踪(因为 SPA 中没有页面导航)。完整的脚本应该如下所示(修改 installation guide 中的代码):
<!-- Tealium Universal Data Object -->
<script type="text/javascript">
var utag_data={
"page_type" : "section",
"site_section" : "men",
"page_name" : "Men's Fashion | Acme Inc.",
"country_code" : "US",
"currency_code" : "USD"};
window.utag_cfg_ovrd = window.utag_cfg_ovrd || {};
window.utag_cfg_ovrd.noview = true
</script>

<!-- Tealium Universal Tag -->
<script type="text/javascript">
(function(a,b,c,d) {
a='//tags.tiqcdn.com/utag/ACCOUNT/PROFILE/ENVIRONMENT/utag.js';
b=document;c='script';d=b.createElement(c);d.src=a;
d.type='text/java'+c;d.async=true;
a=b.getElementsByTagName(c)[0];a.parentNode.insertBefore(d,a)})();
</script>
显式处理 View
由于没有页面导航,您需要以编程方式调用 utag.view()在您进行路由的地方:
window.utag.view({ variable1:"VARIABLE1 VALUE", variable2:"VARIABLE2 VALUE", variable3:"VARIABLE3 VALUE" });
处理 Utag 的异步负载
如果你使用默认模式,utag 对象是异步加载的,你的 React 代码可能会在加载完成之前尝试调用它。在 utag 正确加载之前,您应该有一些逻辑保护访问。下面是一些示例代码:
提供默认 Utag
// If you aren't worried about calling utag before it has loaded (e.g. user interactions)
// This will try to call Tealium but will just drop the event if utag is not loaded

export const utag = window.utag || { link: () => {}, view: () => {} };

// Usage: just use the exported utag, don't use the utag on window
utag.link({ ... })
在 Promise 中包装 Utag 调用
// If the utag call could possibly happen before utag has loaded (e.g. page load)
// This will make the call as soon as utag has loaded (it still drops it if utag doesn't load in a certain amount of time)

export const withUtag = async () => {
if (window.utag) return window.utag;
let i = 0;
while (i < 50) {
await new Promise(resolve => setTimeout(resolve, 200));
if (window.utag) return window.utag;
i = i + 1;
}
return { link: () => {}, view: () => {} };
}

// Usage: Use the resolved utag object from the Promise
withUtag().then(utag => utag.view({ ... }))

关于reactjs - Tealium 标签与 React Js 的集成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56691221/

26 4 0