Google Tag Managerデータレイヤー変数の更新・リセットについて

はじめに

SPAサイトでGTMのカスタム変数がありえない値になっているものがあり、調査したところオブジェクトや配列の値の更新時に注意点があることが分かりました。

データレイヤー変数とは

Google Tag Manager（GTM）でカスタムのページ変数を定義する方法の1つです。

JavaScript変数などより比較的容易に設定できます。

データレイヤー変数の一般的な設定方法

dataLayer.push()関数を使用して設定します。
※以下、データレイヤーのバージョンは2になります。
例：

				
					dataLayer.push({'Data Layer Name': 'value'}).

データレイヤー変数更新時の注意点

オブジェクト・配列を変更する場合、子要素の値はクリアされずに保持されたままになるため、値のクリアを先に実行する必要があります。

				
					// data1の設定
dataLayer.push({ data1: { a: ‘value1’, b: ‘value2’ } });

上記の設定後にdata1.b を使用せずに、data1.aとdata1.cを使用したい時に、下記のように設定し直した場合、

				
					// data1の更新
dataLayer.push({ data1: { a: ‘value3’, c: ‘value4’ } });

data1の値は、 { a: ‘value3’, b: ‘value2’ , c: ‘value4’ } となり、data1.aの値は上書きされますが、data1.bの値は保持されたままになります。

オブジェクトの一部だけ更新したい場合は重宝しますが、全体を更新したい場合は値のクリアを行う必要があります。

				
					// data1の更新の前にクリア処理を入れる
dataLayer.push({ data1: null }); // data1にnullを設定する
dataLayer.push({ data1: { a: ‘value3’, c: ‘value4’ } });

// data1 => { a: ‘value3’, c: ‘value4’ }

配列も同様で、配列長が短くなる場合に注意が必要です。

クリアを入れない場合

				
					// arr1の設定
dataLayer.push({ arr1: [100, 200, 300] });
// arr1の更新
dataLayer.push({ arr1: [101, 201] });

// arr1 => [101, 201, 300]

クリアを入れた場合

				
					// arr1の設定
dataLayer.push({ arr1: [100, 200, 300] });
dataLayer.push({ arr1: null }); // arr1にnullを設定する
// arr1の更新
dataLayer.push({ arr1: [101, 201] });

// arr1 => [101, 201]