Переменная dataLayer не изменяется динамически внутри пользовательского HTML-тега GTM

Question

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

Приведенный выше код развернут как пользовательский тег HTML в событии DOM ready. В момент запуска {{bounce_checker}} переменная dataLayer будет неопределенной, но ее настройки будут меняться после взаимодействия с пользователем. Когда происходит событие beforeunload, {{bounce_checker}} должен отображать 'value_lead', если было какое-либо взаимодействие с пользователем, кроме 'bounce_user'.

Но переменная уровня данных не изменяется динамически. он всегда отображается как "неопределенный", как во время события DOM.

Может кто-нибудь сказать, пожалуйста, почему это происходит?

Answer 1

Спасибо @Дмитро Булах. В этом есть смысл. У меня также были другие обходные пути, которые решили мою проблему, такие как ручной анализ через dataLayer, используя цикл for... или цикл forEach.

(function(){
window.addEventListener('beforeunload',checker, false);})();
function checker(event){
console.log(event.type);
console.log({{bounce_checker}});
var i;
var arr = window.dataLayer;
for(i=0; i<=arr.length; i++)
{ if(typeof(arr[i]) === 'undefined'){console.log('caught error')}
else if(arr[i].bounced_user){
var validator = arr[i].bounced_user;}else{}
};
console.log({{bounce_checker}});
console.log(validator);
if(validator == "value_lead"){console.log('value_lead');}
else if(validator == undefined){console.log('bounced_user');}   
console.log('testing success');}
</script>

Кроме того, на форумах сообщества GTM Симо Ахава предложил мне использовать

var validator = window.google_tag_manager[{{container_ID}}].dataLayer.get('bounce_checker');

Answer 2

С помощью этого кода вы добавляете слушателя, который использует значение {{bounce checker}} в тот момент, когда слушатель был создан, например, undefined. GTM не будет обновлять эту переменную, поскольку это не обычный объект js, а выражение, которое оценивает какое-то значение. Попробуйте переключиться на передачу какого-либо события в dataLayer в 'beforeunload' и обработать значение {{bounce checker}} в пользовательском теге HTML, инициированном пользовательским событием, например:

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