Google Tag Manager

【GA4/GTM】dataLayerを活用しよう

はじめに

こんにちは、エクスチュアの岩川です。

GA4のdataLayer、活用していますか?

dataLayerを上手く使うことでGA4での計測がもっと楽になったり今以上に便利になります。

今回はdataLayerがどういうものなのかを簡単に解説していきます。

dataLayerとは?

dataLayerとはGTMとWebページで情報を受け渡すための”箱”です。プログラム的に言うと「配列(変数が複数くっついたもの)」です。

dataLayerという名前だけ聞くと特殊なものに聞こえますが、ただの「dataLayerという名前の配列」なのです。

Webページ上の情報をdataLayerという配列の中に入れるとGTM側がそれを受け取ることができ、GA4などにデータを送信することができます。

GTMでは元々自動で複数情報を取得していますが(Page URLなど)これもdataLayerに格納されています。つまりGTMはdataLayerの情報を読み取っているだけなのです。

これを利用して、必要なデータを自分でdataLayerに格納することでGTMで自動取得されないデータも計測できるようにできます。

dataLayerの書き方

まず、dataLayerの基本形は以下のようになります。

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({‘データ名‘: ‘渡したい値‘});
</script>

まず

window.dataLayer = window.dataLayer || [];

の部分ですが、これは「dataLayer変数が存在している場合は値はそのままを保持し、なければ新しくdataLayer変数を作成する」という一文になっています。

この一文が存在していない状態でdataLayer.push(意味は後述)を使用するとdataLayerが存在しない場合にエラーになってしまいますので不安であれば最初はつけておきましょう。

次に先ほど少し話に出てきた

dataLayer.push({‘データ名‘: ‘渡したい値‘});

ですが、これは元々あるdataLayer変数の配列の一番最後に()内に記述したデータを追加する、という一文になっています。

ここで注意してほしいのが「代入(=)でdataLayerにデータを格納してはいけない」ということです。

記述的に言うと

❌ dataLayer = [{‘データ名‘: ‘渡したい値‘}];

のように書いてはいけません。

前述の通り、dataLayerにはGTMで使用される様々なデータが格納されています。

代入をしてしまうと変数の中身をまるっと上書きしてしまうため、GTMが正常に動作するのに必要なデータまで上書きしてしまいます。気をつけましょう。

また、データを一度に複数格納したい場合はコンマ(,)で区切りましょう。

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({‘データ名1‘: ‘渡したい値1‘ , ‘データ名2‘: ‘渡したい値2‘});
</script>

GTMでのdataLayerの利用方法

では設定したdataLayerをGTMのプレビューモードで確認してみましょう。

プレビューモードでの確認方法は以下の記事にありますのでぜひご覧ください。

dataLayerに値が格納されていることを確認できたらGTMで実際にdataLayerを使用してみましょう。

まずGTMコンテナを開き、[変数]項目からユーザー定義変数の[新規]をクリックしましょう。

[変数の設定]をクリックし、[データレイヤーの変数]を選択します。

[データレイヤーの変数名]のところにdataLayerで記述したデータレイヤー名を入力し、「無題の変数」部分に任意の名前を設定し保存しましょう。今回は「テストデータレイヤー変数」という名前をつけました。

すると以下のようにユーザー定義変数に追加されます。

これで任意の箇所(タグやトリガー)の部分で使用することができるようになります。

GTMで設定した変数は{{ }}で囲うことで変数名を指定できます。

今回は「テストデータレイヤー変数」という名称にしたため、

{{テストデータレイヤー変数}}

と任意の箇所に入力することでそのときのデータレイヤー変数の値が入ります。

また、以下の画像の赤枠部分をクリックすることでそのGTMコンテナ内で設定されている変数の一覧を見ることも可能ですのでこちらから選択することもできます。

これでdataLayerの書き出しとGTMでの設定ができるようになりましたね!


dataLayerと聞くととっつきにくい感じがありますが構造を知ると意外と単純だった!と思った方もいるのではないでしょうか?

自由にdataLayerを活用し、今より高度な計測を行なっていきましょう!

またエクスチュアでは企業様の様々なお悩みに真摯に対応いたします。

是非お気軽に、お問合せください。

ジャーニーマップをデジタルマーケティングの視点で前のページ

KARTE を使ってサイト外でも接客を次のページ

ピックアップ記事

  1. 最速で理解したい人のためのIT用語集

関連記事

  1. Google Tag Manager

    GTMで任意のリンクをクリックしてn秒後トリガーを動作させる方法

    こんにちは、エクスチュアの岩川です。GTMで用意され…

  2. Data Clean Room

    PostgreSQLによるデータクリーンルームの可能性について

    こんにちは、喜田です。本投稿は PostgreSQL Adv…

  3. Google Tag Manager

    同一サイトにGTMを複数導入する危険性について

    こんにちは。エクスチュアの岩川です。今回は何度か質問をいただ…

  4. KARTE

    KARTE 成果の出るアイデアを考える_ツールを活用できていないと感じたら

    エクスチュアの林です。今回はKARTEを活用していらっしゃる…

  5. Google Tag Manager

    GTMで複数のコンテナに同じ実装をしたい

    こんにちは。エクスチュアの岩川です。GTMで複数のコンテナに…

  6. データサイエンス

    回帰分析はかく語りき Part3 ロジスティック回帰

    こんにちは、小郷です。昨今は社会が複雑化したために、Yes…

カテゴリ
最近の記事
  1. 真打ち登場LOD ~TableauのEXCLUDE関数を知ろ…
  2. DataformでactAs権限に適合する設定をする
  3. 真打ち登場LOD ~TableauのINCLUDE関数を知ろ…
  4. 真打ち登場LOD ~TableauのFIXED関数を知ろう~…
  5. 真打ち登場LOD ~Tableauで苦戦するアイツを知ろう~…
  1. Google Cloud Platform

    Google Compute Engine のLinuxVMにVNC接続する
  2. ブログ

    サーバーがアクセス情報を取得する仕組み
  3. Adobe Experience Cloud

    Adobe Marketing Cloud:サインインで問題が起きたときの対処法…
  4. ヒートマップ

    ムーブメント・ヒートマップ
  5. Mouseflow

    mouseflowのプライバシー設定はシンプルで直感的なVisual Priva…
PAGE TOP