时间戳

首页 > 解决方案 > dataLayer 变量在 GTM 自定义 HTML 标记内没有动态变化

google-tag-manager - dataLayer 变量在 GTM 自定义 HTML 标记内没有动态变化

问题描述

<script>
   console.log({{bounce_checker}});
   (function(){
   window.addEventListener('beforeunload',checker, false);})();
   function checker(event){
   event.preventDefault();
   console.log(event.type);
   console.log({{bounce_checker}});
   var validator = {{bounce_checker}};
   if(validator == "value_lead")
    {console.log('value_lead');}
   else if(validator == undefined)
    {console.log('bounced_user');}   
   </script>

上面的代码在 DOM 就绪事件中部署为自定义 HTML 标记。在触发 {{bounce_checker}} 时，dataLayer 变量将未定义，但已设置为在用户交互后更改。当 'beforeunload' 事件发生时，如果有任何用户交互，{{bounce_checker}} 将显示 'value_lead' 否则为 'bounced_user'。

但是数据层变量不是动态变化的。它总是像在 DOM 事件期间一样显示为“未定义”。

谁能告诉我为什么会这样？

标签： google-tag-managergoogle-datalayer

解决方案

使用此代码，您可以添加一个侦听器，该侦听器利用 {{bounce checker}} 的值，即创建侦听器的时刻，例如未定义。GTM 不会更新该变量，因为它不是常规的 js 对象，而是计算为某个值的表达式。考虑切换到在“beforeunload”上将某些事件推送到 dataLayer 并在自定义事件触发的自定义 HTML 标记处处理您的 {{bounce checker}} 值，例如：

<!--DOM Ready Custom HTML Tag code -->
<script>
  window.addEventListener('beforeunload',function(e) {dataLayer.push({'event':'beforeunload'})}, false);
</script>

<!--beforeunload Custom Event Custom HTML Tag code -->
<script>
  console.log({{bounce_checker}});
  var validator = {{bounce_checker}};
  if(validator == "value_lead") {
    console.log('value_lead');
    // further processing of {{bounce_checker}} value
    // ...
  }
  else if(validator == undefined) {
    console.log('bounced_user');
    // further processing of {{bounce_checker}} value
    // ...
  }   
</script>

推荐阅读