特定のアクションの後にGTMデータレイヤーに変数を渡します。

Question

アクションが実行された後、変数にGTMデータレイヤーを渡す必要があります。 具体的には、datepickerで日付を選択した後、GTMレイヤーにツアー日を渡したいと思います。

私はそれを行う正しい方法がわかりません。

<script > 
    var dataLayer = [({ 
     "customerLoggedIn": 0, 
     "customerId": 0, 
     "customerGroupId": "1", 
     "customerGroupCode": "GENERAL", 
     "productId": "6", 
     "productName": "Big Loop Boat Tour", 
     "productSku": "boat-tour", 
     "productPrice": "0.00", 
     "productPriceExcludingTax": "0.00", 
     "productTax": "0.00", 
     "productTaxRate": 0, 
     "productGender": false, 
     "pageType": "catalog\/product\/view" 
    })]; 
    dataLayer.push({ 
     'ecommerce': { 
      "detail": [{ 
       "id": "6", 
       "name": "Big Loop Boat Tour", 
       "sku": "boat-tour", 
       "price": 0, 
       "priceexcludingtax": "0.00", 
       "tax": "0.00", 
       "taxrate": 0, 
       "brand": "", 
       "gender": false, 
       "category": null, 
       "children": [] 
      }] 
     } 
    }); 
    (function(w, d, s, l, i) { 
     if (i == '') { 
      return console.log('No GTM ID provided'); 
     } 
     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', 'XXXXXXXX'); 
</script> 

私はdataLayer配列に追加の変数を追加する必要があります。今、私は、次のデータレイヤスクリプトがありますか？ selectedDateと言うと、ページの読み込み時には定義されません。

var dataLayer = [({ 
     "customerLoggedIn": 0, 
     "customerId": 0, 
     "customerGroupId": "1", 
     "customerGroupCode": "GENERAL", 
     "productId": "6", 
     "productName": "Big Loop Boat Tour", 
     "productSku": "boat-tour", 
     "productPrice": "0.00", 
     "productPriceExcludingTax": "0.00", 
     "productTax": "0.00", 
     "productTaxRate": 0, 
     "productGender": false, 
     "pageType": "catalog\/product\/view" 
     "selectedDate" : "" 
    })]; 

選択した日付を取得し、それを変数$date.selectedに言わせて書くためにページにJavaScript関数を追加します。

そして、このカスタムスクリプト

<script> 
    dataLayer.push({"selectedDate": $date.selected});  
</script> 

で、DatePickerのクリックによってトリガーさGTMでカスタムタグを作成し、これは右のように見えるのか？

また、このようなメインデータレイヤースクリプトで変数を渡すことはできますか？

<script > 
    var dataLayer = [({ 
     "customerLoggedIn": 0, 
     "customerId": 0, 
     "customerGroupId": "1", 
     "customerGroupCode": "GENERAL", 
     "productId": "6", 
     "productName": "Big Loop Boat Tour", 
     "productSku": "boat-tour", 
     "productPrice": "0.00", 
     "productPriceExcludingTax": "0.00", 
     "productTax": "0.00", 
     "productTaxRate": 0, 
     "productGender": false, 
     "pageType": "catalog\/product\/view", 
     "selectedDate": $date.selected 
    })]; 
    dataLayer.push({ 
     'ecommerce': { 
      "detail": [{ 
       "id": "6", 
       "name": "Big Loop Boat Tour", 
       "sku": "boat-tour", 
       "price": 0, 
       "priceexcludingtax": "0.00", 
       "tax": "0.00", 
       "taxrate": 0, 
       "brand": "", 
       "gender": false, 
       "category": null, 
       "children": [] 
      }] 
     } 
    }); 
    (function(w, d, s, l, i) { 
     if (i == '') { 
      return console.log('No GTM ID provided'); 
     } 
     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', 'XXXXXXXX'); 
</script> 

Answer 1

変数を最初に未定義（または空の文字列）として定義する必要はありません。あなたの行動が完了したら、あなたが望む値をdataLayerに押してください。あなたのケースでは、ユーザーが気を変えて、日付ピッカー値を再び変更する可能性があるので、新しい日付がdataLayerに複数回プッシュされる可能性があります。

dataLayerに何かを追加するたびに、新しい「メッセージ」がプッシュされます。 dataLayerは、プッシュしたすべてのメッセージを含む配列と考えてください。

ページの読み込み時に初期化すると、値のない変数のエントリがもう1つ追加されます。