Tealium 标签与 React Js 集成

Question

我正在尝试将 Tealium 标签与我们基于 React.js 的项目集成；但是，我没有找到任何有关此事的文档？如果有人能为我提供一些文档或示例来说明如何做到这一点，我将不胜感激？

Answer 1

2023 年 10 月更新：

我整理了一个Next.js 示例存储库，演示了将 Tealium 集成到 React 应用程序中的一种方法。其显着特点是：

将 Tealium 帐户信息存储在公共环境变量中

Tealium 帐户信息位于供应商脚本 URL 中，因此它是公共信息。通过公共环境变量，它可以内联到发送到浏览器的 JavaScript 中。

加载 Tealium 脚本

Tealium 脚本在页面末尾的页面级别加载。

window.utag在上下文中存储引用

用于轮询窗口上的 utag 对象的 useState 和 useEffect 方法可能需要改进。无论如何，最终结果是值从EmptyUtag对象（丢弃调用）更改为对全局对象的引用window.utag。

<UtagContext.Provider value={utag}>{children}</UtagContext.Provider>

使用上下文提供程序包装 App 组件

App 组件被包装起来，UtagProvider以便各个页面可以在其逻辑中使用 utag 值。

const MyApp: AppType = ({ Component, pageProps }) => {
  return (
    <UtagProvider>
      <Component {...pageProps} />
    </UtagProvider>
  );
};

显式处理页面视图

页面视图在页面级组件 useEffect 中显式处理

useEffect(() => {
  // Explicitly handle page views
  utag.view({ page_name: "Mens Fashion: View Page" });
}, [utag]);

跟踪组件级别的事件

<input
  name="shirts"
  type="range"
  min="0"
  max="100"
  step="1"
  onChange={(e) => {
    utag.link({
      tealium_event: "Change Quantity",
      product_id: ["12345"],
      product_name: ["Lucky Shirt"],
      product_quantity: [e.target.value],
      product_price: ["12.99"],
    });
  }}
/>

2021 年的原始答案

Tealium 文档中有一个关于适用于 React 的单页应用程序的部分。这个答案引用了该文档并添加了一些我的经验。

修改Tealium脚本

首先，您需要使用以下两行稍微修改其全局脚本：

window.utag_cfg_ovrd = window.utag_cfg_ovrd || {};
window.utag_cfg_ovrd.noview = true;

这会覆盖自动页面跟踪（因为 SPA 中没有发生页面导航）。完整的脚本应该如下所示（修改安装指南中的代码）：

<!-- 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>

显式处理视图

由于没有页面导航，因此您需要以编程方式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({ ... })

将 Utag 调用封装在 Promise 中

// 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({ ... }))