首页 > 解决方案 > 如何在网页中直接添加 GTM 代码?

问题描述

在我正在开发的网站之一中,我需要将 Google 标签管理器代码直接集成到网页中。该代码用于跟踪音频事件。我已将代码添加到网页中,但它没有发送一些变量 correc

在此处输入图像描述tly。

以下是跟踪事件的代码

(function() {
console.log("function called");
    var divisor = 25;
    var audios_status = {};
    var video_name_array=[];
    function eventHandler(e) {
console.log("called");
        var video_name=(decodeURIComponent(e.target.currentSrc.split('/')[e.target.currentSrc.split('/').length - 1]));
        switch (e.type) {

        case 'timeupdate':
            console.log("timedupdate");
            audios_status[e.target.id].current = Math.round(e.target.currentTime);
            var pct = Math.floor(100 * audios_status[e.target.id].current / e.target.duration);
            for (var j in audios_status[e.target.id]._progress_markers) {
                if (pct >= j && j > audios_status[e.target.id].greatest_marker) {
                    audios_status[e.target.id].greatest_marker = j;
                }
            }

            if (audios_status[e.target.id].greatest_marker && !audios_status[e.target.id]._progress_markers[audios_status[e.target.id].greatest_marker]) {
                audios_status[e.target.id]._progress_markers[audios_status[e.target.id].greatest_marker] = true;
                dataLayer.push({
                    'event': 'audio',
                    'audioplayeraction': audios_status[e.target.id].greatest_marker ,
                    'audioplayerlabel': decodeURIComponent(e.target.currentSrc.split('/')[e.target.currentSrc.split('/').length - 1])
                });
            }
            break;

        case 'play':
        console.log("play");
              if(!video_name_array.includes(video_name))
              {   console.log("in play new");
                video_name_array.push(video_name);
                dataLayer.push({
                    'event': 'audio1',
                    'action': 'audio begin',
                    'label': decodeURIComponent(e.target.currentSrc.split('/')[e.target.currentSrc.split('/').length - 1])
                });
              } else {
                dataLayer.push({
                    'event': 'audio2',
                    'audioplayeraction': 'audio play',
                    'audioplayerlabel': decodeURIComponent(e.target.currentSrc.split('/')[e.target.currentSrc.split('/').length - 1])
                });               
              }     

            break;

        case 'pause':
   console.log("pause");
             if(video_name_array.includes(video_name))
              {
    console.log("in pause");
                dataLayer.push({
                    'event': 'audio3',
                    'audioplayeraction': 'audio pause',
                    'audioplayerlabel': decodeURIComponent(e.target.currentSrc.split('/')[e.target.currentSrc.split('/').length - 1]),
                    'audioValue': audios_status[e.target.id].current
                });
              }
            break;

        case 'ended':
            if(video_name_array.includes(video_name))
              {
              dataLayer.push({
                  'event': 'audio4',
                  'audioplayeraction': 'audio complete',
                  'audioplayerlabel': decodeURIComponent(e.target.currentSrc.split('/')[e.target.currentSrc.split('/').length - 1])
              });
              }
            break;
        default:
            break;
        }
    }

    var audios = document.getElementsByTagName('audio');
console.log(audios );
    for (var i = 0; i < audios.length; i++) {
        var audioTagId;
        if (!audios[i].getAttribute('id')) {
            audioTagId = 'html5_audio_' + Math.random().toString(36).slice(2);
            audios[i].setAttribute('id', audioTagId);
        }
        else {
            audioTagId = audios[i].getAttribute('id');
        }

        audios_status[audioTagId] = {};

        audios_status[audioTagId].greatest_marker = 0;

        audios_status[audioTagId]._progress_markers = {};
        for (j = 0; j < 100; j++) {
            audios_status[audioTagId].progress_point = divisor * Math.floor(j / divisor);
            audios_status[audioTagId]._progress_markers[audios_status[audioTagId].progress_point] = false;
        }

        audios_status[audioTagId].current = 0;

        audios[i].addEventListener("play", eventHandler, false);
        audios[i].addEventListener("pause", eventHandler, false);
        audios[i].addEventListener("ended", eventHandler, false);
        audios[i].addEventListener("timeupdate", eventHandler, false);
    }
})();

我试图记录被调用的函数,但 switch 语句中的跟踪函数没有被调用

标签: javascriptgoogle-analyticsevent-handlinggoogle-tag-manager

解决方案


导致问题的 GTM 中的变量名有错误。现在它工作正常。谢谢 :)


推荐阅读