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 Analytics

    Google Tag Manager上でGoogle AnalyticsのclientIDを取得する…

    この情報は2018年4月当時の情報です。こんにちは、エクスチュ…

  2. Google Analytics

    【GA4】DebugViewの使い方

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

  3. Adobe Analytics

    Adobe AnaltyicsとGoogle Analytics の「生Webビーコン」をBigQu…

    こんにちは、エクスチュアの權泳東(権泳東/コン・ヨンドン)です。…

  4. Google Analytics 4

    【GA4/GTM】dataLayerを使ってカスタムイベントを発生させてみよう

    はじめに以前の記事でdataLayerを使用し、GTMとのデ…

  5. Mouseflow

    mouseflow の フリクションイベント って何?

    Webサイトの訪問者は、様々な理由でコンバージョン[閲覧者による収益…

  6. Google Tag Manager

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

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

カテゴリ
最近の記事
  1. dbt Fusion使ってみた
  2. Manusを使ってみたうえでManusに感想ブログを書かせて…
  3. SquadbaseとStreamlitでお手軽アプリ開発
  4. [Snowflake Summit 2025] Snowfl…
  5. [Snowflake新機能]AI_AGGを試してみた
  1. Web解析

    コラム:Web解析から顧客体験分析(CXA)に
  2. Tableau

    ネストLODで2重のFIXED関数を使ってみる【Tableau】
  3. Tableau

    Tableauの便利な機能
  4. Office365

    エクセルで「テーブル」を使うメリット① 「BIツールで使いやすい」
  5. Amazon Web Services

    【初心者向け】AWSを学ぶ前に確認したい用語
PAGE TOP