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を活用し、今より高度な計測を行なっていきましょう!

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

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

ピックアップ記事

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

関連記事

  1. 未分類

    BigQueryで高額課金が発生しているクエリの呼び出し元を特定する

    こんにちは突然ですが、BigQueryで負の遺産を大…

  2. KARTE

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

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

  3. Adobe Analytics

    GTMのdataLayerをAdobeAnalyticsの「s」オブジェクトにコピーする

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

  4. Google Analytics 4

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

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

  5. Google Tag Manager

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

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

  6. Office365

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

    データを扱ういろんな環境、ツールがありますが、今も現場で出番の多いエ…

最近の記事

  1. 回帰分析はかく語りき Part3 ロジスティック回帰
  2. GCSへのSnowflake Open Catalogによる…
  3. VPC Service Controlsで「NO_MATCH…
  4. モダンデータスタックなワークフローオーケストレーションツール…
  5. Streamlit in Snowflakeによるダッシュボ…
  1. GA 360 Suite

    GoogleDataStudio:複数のデータソースにフィルターを適用する
  2. Google Cloud Platform

    Google Compute Engine のLinuxVMにVNC接続する
  3. IT用語集

    コンテナ(Container)って何?
  4. Mouseflow

    Mouseflowのフィルター機能が変わりました!
  5. IT用語集

    ビッグクエリ(Big Query)って何?
PAGE TOP