dataLayerへ値を渡す記述を.pushで統一する方法

データレイヤー変数とは

データレイヤー変数というのはGoogleタグマネージャ上で設定できる変数の1種類ですが、その内容をざっくりと説明すると「ページ側からデータを受け渡しするのにGoogleタグマネージャが推奨している変数の種別」です。
ツール側が推奨していることもあり、規定の書式で出力すればGoogleアナリティクスのeコマース計測タグなどで難しい設定をしなくても自動で値を利用してくれたりするなどの特典があります。

GoogleタグマネージャはWebページで動作する際、dataLayerというJavaScript変数内へ様々なデータを一時的に格納し、参照しています。
このdataLayer変数にはGoogleタグマネージャが自動的に追加や取得した変数のデータが格納されますが、意図的にHTML上から「dataLayer変数へ値を渡す」JavaScriptを動作させることで「Googleタグマネージャへデータを渡す」ことができます。そしてその渡されたデータを変数として参照可能にしたものがデータレイヤー変数というわけです。

データレイヤー変数はもっとも「意図的にWebページ側からGoogleタグマネージャへデータを渡したい場合」に使われることの多い変数です。

あるタグやトリガーで利用したいと思ったデータが変数として登録できない場合、何らかの手段でGoogleタグマネージャへデータを渡すためにWebページ側を改修する必要が出てきます。
しかし例えば「URL」変数で参照できるURLはそもそもそう簡単に変えていいものではありませんし、「DOM要素」変数で取得できるbody内要素（divタグやらspanタグやらの特定HTMLパーツ）は基本的にユーザーへ表示させるもののため、Googleタグマネージャへデータを渡すためだけにページ内へブロックなどを追加するのもはばかられます。

そういった際に利用されやすいのが、画面の表示上ではユーザーへ特に影響が出ないデータレイヤー変数なのです。
また、データレイヤー変数であればソースを見たときに一目で「データレイヤー変数である（＝Googleタグマネージャで利用しているソースである）」ということがわかる点もメリットです。

値の渡し方は「=」と「.push」の2種類

具体的にデータレイヤー変数へデータを渡す手段としては、JavaScriptで以下どちらかの処理を行います。
下記を（）内の例で処理した場合、「test」というデータレイヤーの変数へ対して「abc」という値が渡されることになります。

<script>
dataLayer = [{'データレイヤー変数名（例：test）': '渡したい値（例：abc）'}];
</script>

<script>
dataLayer.push({'データレイヤー変数名（例：test）': '渡したい値（例：abc）'});
</script>

さて上記の通り、値を渡すための書式は2種類あります。
それぞれどんな違いがあるのかというと、動作可能なタイミングが異なっています。

ページ内で一番最初にdataLayerをいじる場合は「=」で、二番目以降にいじる場合が「.push」となります。
というのも、JavaScriptのルールとして「『=』は値を『代入』」するためのもの、「『.push』は値を『追加』」するためのもの、という違いがあるからです。

ページ内で一番最初に出てきた場合、まだdataLayerというJS変数は存在していません。
存在していないので「追加」しようとしても追加先が見つからないため、JSエラーになってしまいます。

そして二番目以降に出てきた場合、すでにdataLayerというJS変数は「一番最初に出てきた際に定義されたデータを持って」存在しています。
しかし「代入」してしまった場合、その直前まで持っていたデータを上書きで消してしまうため、Googleタグマネージャが予期せぬ動作をしてしまいます。

そういった理由もあって、前述のように「ページ内で処理される順番」によって書式を使い分けなければなりません。
でもこれって不便ですよね？　記述位置を意識せずにうっかり不適切な書式で記述してしまうだけで、エラーになってしまうのはとても危険です。

ですので、ページ内の最初であっても二番目以降であっても何の問題もなく動作する書式に変えてしまいましょう。

どんな場合でも「.push」で統一するための方法　←本題

以下の書式にすることで、ページ内に出てくる順番を意識する必要がなくなります。
2行目の箇所（色の変わっている行）がポイントです。

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({'データレイヤー変数名（例：test）': '渡したい値（例：abc）'});
</script>

やっていることは簡単で、「すでにdataLayerというJS変数があったらその値を引き継いで、まだなければ値を空の状態で作る」という処理を行っています。
つまりページ内の一番最初で.pushを使ってはいけない理由が「dataLayerが存在していないから」だったのなら、「なければ作って」しまえば何も問題が起きなくなる、という考えですね。これでページ内の記述位置の順番を問わず、上記の書式で統一することができます。

オマケ：iframe内から親frameのdataLayerへ.pushする方法

iframeなどで設置している内部ページについて、PV計測などをさせないためにGoogleタグマネージャのスニペットタグを設置していない場合などもあると思います。
そのようなiframe内のページでdataLayer.pushをしようとしても、iframe内ではdataLayerが存在していないため動作させることができません。そういった場合は自frame内ではなく、iframeを設置している外側の親ページで利用しているdataLayerへ対して、値を渡す必要があります。

親フレームへ値を渡したい場合は、以下の記述で行うことができます。

<script>
window.parent.dataLayer.push({'データレイヤー変数名（例：test）': '渡したい値（例：abc）'});
</script>

そう頻発するケースではありませんが、困った際は上記の書式を思い出してみてください。