javascript - 如何在网页中直接添加 GTM 代码?
问题描述
在我正在开发的网站之一中,我需要将 Google 标签管理器代码直接集成到网页中。该代码用于跟踪音频事件。我已将代码添加到网页中,但它没有发送一些变量 correc
以下是跟踪事件的代码
(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 语句中的跟踪函数没有被调用
解决方案
导致问题的 GTM 中的变量名有错误。现在它工作正常。谢谢 :)
推荐阅读
- elasticsearch - Canvas 中的 Elasticsearch SQL 查询:它不像 SQL 那样工作?
- elasticsearch - 无法在弹性搜索中完全创建索引
- java - Android AudioTrack 替代品
- python - pandas(Python)中箱线图的数据限制和最大距离
- python - KNN 算法:“int”对象不可下标
- powershell - Powershell通过Thumbprint检索证书作为字符串与字符串变量
- javascript - 列出内存中的所有 Blob 以便在 javascript 中进行调试
- python - 开始函数 - 不正确的论点 - 不抛出错误
- json - 使用 fromGroup 生成角度动态 formControlName
- php - 如果输入值存在于回显中,如何从输入值中发布数据