Javascript 在 GTM 的数据层中使用时变量未定义
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');
现在,当我尝试访问数据层中的 openId
变量时,它显示为未定义,而当我尝试访问同一个浏览器控制台时,它显示正确的值。
尝试两次后解决。
首先经过一番搜索,我发现这是一个 Javascript 异步 issue.The dataLayer 在收到 Rest call
响应之前获取变量,因此获取变量在 dataLayer 中不可用(在时间之前检索)并且在页面 post that.In 中可用为了对此进行排序,必须构建 dataLayer,在成功接收 response.Hence 后,a callback
函数被调用,包含dataLayer
,成功收到响应后
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
。这是由于事实,在 REST 调用响应之前,现在数据层对 GTM 脚本不可用。
为了解决这个问题,dataLayer 和 GTM 脚本块都必须是回调函数的一部分,并在响应成功后调用 received.This 最终解决了这个问题。
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');
}
我在 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');
现在,当我尝试访问数据层中的 openId
变量时,它显示为未定义,而当我尝试访问同一个浏览器控制台时,它显示正确的值。
尝试两次后解决。
首先经过一番搜索,我发现这是一个 Javascript 异步 issue.The dataLayer 在收到 Rest call
响应之前获取变量,因此获取变量在 dataLayer 中不可用(在时间之前检索)并且在页面 post that.In 中可用为了对此进行排序,必须构建 dataLayer,在成功接收 response.Hence 后,a callback
函数被调用,包含dataLayer
,成功收到响应后
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
。这是由于事实,在 REST 调用响应之前,现在数据层对 GTM 脚本不可用。
为了解决这个问题,dataLayer 和 GTM 脚本块都必须是回调函数的一部分,并在响应成功后调用 received.This 最终解决了这个问题。
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');
}