[英]Javascript variable undefined when used in data layer in GTM
我在GTM数据层中使用了一个变量,该变量从Liferay rest API调用中检索其值。
var openId;
AUI().ready('aui-base', function(A){
Liferay.Service(
'/user/get-user-by-id',
{
userId: Liferay.ThemeDisplay.getUserId()
},
function(obj) {
openId=obj.openId;
}
);
});
这里的openId
变量在GTM dataLayer中使用,该变量不可用并且显示为undefined
。 数据层定义如下:
dataLayer = [{
"page" : Liferay.currentURL
,"pageType" : instrDetail
,"user" : {
"type" : userType
,"accountId" : openId
}
}];
最后,我们有GTM块,定义了标签管理器脚本块。
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');
现在,当我尝试访问dataLayer中的openId
变量时,它显示为undefined,而当我尝试访问相同的一个浏览器控制台时,它将显示正确的值。
尝试两次后解决了该问题。
首先经过一番搜索之后,我发现这是一个Javascript异步问题。dataLayer在收到Rest call
响应之前正在获取变量,因此该变量在dataLayer中不可用(可以在时间之前检索到),并且在为了对此进行分类,必须在成功接收到响应之后构造dataLayer。因此,在成功接收到响应之后,将callback
包含dataLayer
的callback
函数
AUI().ready('aui-base', function(A){
Liferay.Service(
'/user/get-user-by-id',
{
userId: Liferay.ThemeDisplay.getUserId()
},
function(obj) {
callback(obj.openId);
}
);
});
但是接着又出现了另一个问题,现在GTM脚本块是在页面加载时执行的,在其余API响应之前,因此所有其他变量都变得undefined
。这是由于以下事实:现在,数据层对于GTM脚本不可用,在响应之前REST调用。
为了解决这个问题,dataLayer和GTM脚本块都必须是callBack函数的一部分,并在成功接收到响应后调用。这最终解决了该问题。
function callback(openId)
{
dataLayer = [{
"page" : Liferay.currentURL
,"pageType" : instrDetail
,"user" : {
"type" : userType
,"accountId" : openId
}
}];
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-PGLDG7W');
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.