GTMのデータレイヤーで使用するとJavaScriptの変数が未定義

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変数は、それが利用可能でないとundefinedとして示すGTM dataLayerのに使用されています。 データ層は以下のように定義される：タグマネージャスクリプトブロックを定義する、

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変数にアクセスしようとしたとき、私は同じ1つのブラウザコンソールにアクセスしようとすると、それが正しい値を表示するのに対し、それは、未定義を示しています。

Answer 1

これは2回試みた後に解決されました。

最初にいくつかの検索を行った後、これはJavascriptの非同期問題であるという事実を知りました。応答が受信される前にdataLayerが変数をフェッチしていたため、変数はdataLayer（時間の前に取得）これをソートするためthat.Inページのポストで利用できた、dataLayerが正常に応答

AUI().ready('aui-base', function(A){ 
Liferay.Service(
     '/user/get-user-by-id', 
     { 
     userId: Liferay.ThemeDisplay.getUserId() 
     }, 
     function(obj) { 
      callback(obj.openId); 
     } 
       ); 
    }); 

を受けた後、成功しresponse.Henceを受けた後、callback機能がdataLayerを含む、と呼ばれた、構築されなければなりませんでしたしかし、別の問題が発生しました.GTMスクリプトブロックは、ページロード時に実行されていましたAPIレスポンス、したがって他のすべての変数はundefinedになりました。これは、RESTコールからの応答の前に、GTMスクリプトでdatalayerを使用できなかったためです。

これを並べ替えるには、dataLayerとGTMの両方のスクリプトブロックをコールバック関数の一部にして、応答が正常に受信された後に呼び出さなければなりません。

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'); 
}