當在GTM中的數據層中使用時，Javascript變量undefined

Question

我在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數據層，它是不可用，並示出了如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變量，它顯示爲不確定的，而當我嘗試訪問的同一個瀏覽器控制檯，它會顯示正確的值。

Answer 1

這是試圖兩次後解決。

首先，經過一些搜索後，我發現這是一個Javascript異步問題。dataLayer在接收到Rest call響應之前獲取變量，因此該變量在dataLayer中不可用（在時間之前被檢索到）以及在頁面後可that.In順序排序這件事，數據層必須構建，成功接收後response.Hence，一個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。這是由於事實，現在數據層不能用於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'); 
}