下記は、第3回セミナーのイベント「purchase」で使用したデータレイヤーです。
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
event: "purchase",
ecommerce: {
transaction_id: "100-02",
affiliation: "GA4 Quick",
value: 10000,
tax: 1000,
shipping: 500,
currency: "JPY",
coupon: "2022_SPRING_SEMINAR",
items: [{
item_name: "2022_SPRING_SEMINAR_04",
item_id: "22ss04",
price: 10000,
item_brand: "and,a",
item_category: "Online_Seminar",
item_variant: "ZOOM",
quantity: 1
}]
}
});
</script>
上記の2行目、
window.dataLayer = window.dataLayer || [];
について解説します。
dataLayerはJavaScriptで「配列」と呼ばれるものになります。
「配列」は中にいろいろな要素をリスト形式で保有することができるもので、
そして「配列」はその要素を追加・削除・検索など行うことが可能です。
dataLayerは「継ぎ足し継ぎ足ししていく」のが本来的な使い方です。
window.dataLayer = window.dataLayer || [];
は、「dataLayerという名前で配列を新規作成する」というものになります。
GTMはページ上にdataLayerという配列が存在したらそちらを利用する形です。
(存在しない場合はGTMが勝手に作成します)
そして、dataLayer.push()
というのは上で触れた「配列に要素を追加する」ものとなり、()
の中身をdataLayerに追加する、という文法になっています。
これによって、「作成した配列に対してpurchase用のデータを追加する」形になります。
これが「継ぎ足し継ぎ足し」できる、という意味になります。追加されるデータに関して、「{ }
で囲んだ範囲」はご存知かと思いますが、「event」パラメータに関しては「データの第一階層に配置する必要がある」形です。
コメント