Tealium标签与React Js集成

Question

我正在尝试将Tealium标签集成到我们基于react.js的项目中；但是，我碰巧没有找到任何关于这个问题的文档？如果有人能为我提供一些文档或例子，告诉我如何做到这一点，我将不胜感激。

Answer 1

Tealium文档提供了适用于React的a section on Single Page Applications。这个答案引用了该文档，并从我的经验中添加了一些。

修改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>

显式处理视图

由于没有页面导航，因此您需要在进行路由的位置以编程方式调用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({ ... }))