データレイヤーとGTM(Google タグマネージャー)でWEB広告経由の売上を計測する方法

ECサイトのWEB広告を運用する上で、費用対効果を測る指標となるROAS(Return On Advertising Spend)は、「WEB広告経由の売上÷広告費用×100」で算出をしますが、売上(コンバージョン値)をWEB広告側で計測できるようにしないことには算出することができません。
また、売上を計測するには広告運用だけでなく、ちょっとした技術的な知識が必要となり、苦手意識を持たれている方も多いはず!
(私も以前は、めちゃくちゃ苦手意識ありました!)

本記事ではそんな苦手意識を持たれている方向けに、データレイヤーとGTM(Google タグマネージャ)で売上(コンバージョン値)を計測する方法をご紹介いたします。

※なんとなくの理解で本実装を完了できるよう、一部感覚的な表現にしております。
※本ブログでご紹介している方法はあくまでも1つの方法であり、WEBサイトの仕様などによっては売上(コンバージョン値)の計測ができないケースもございます。

注意点

前提として、コンバージョンタグをGTMで設定していることが条件となります。

※GTMの初期設定、Google広告、Yahoo!広告のタグをGTMで設定する方法は下記それぞれのページでご紹介しております。

GTM(Google タグマネージャー)のアカウント作成と初期設定

GTM(Google タグマネージャー)でGoogle 広告のタグを設定する方法

GTM(Google タグマネージャー)でYahoo!広告のタグを設定する方法

売上(コンバージョン値)を計測する上で必要な3つのステップ

1.データレイヤーをWEBサイトへ設置する

売上(コンバージョン値)の数値をWEBサイトから取得し、GTMに送る役割を担います。

2.GTMで変数を設定する

データレイヤータグで取得した売上(コンバージョン値)の数値をGTMで受け取り、タグの中に売上としてに反映する役割を担います。

3.WEB広告のコンバージョンタグに変数を設定する

WEB広告のコンバージョンタグで売上(コンバージョン値)を取得できるようタグに変数を設定します。
設定したタグを公開後、対象のWEB広告で売上(コンバージョン値)が取得できるようになります。

データレイヤーをWEBサイトへ設置する

1.データレイヤーを作成する

一般的にECサイトでの購入が完了すると、購入完了ページというページがユーザーに表示され、そのページの裏側で購入した商品の売上金額をデータとして保有しています。(HTML上に記述されている場合もあります。)

その売上データをデータレイヤーというJavaScript オブジェクトを利用して取得し、GTMに送るようにします。

下記が売上(コンバージョン値)を取得するためのデーターレイヤー例です。

■データレイヤー例
<script>
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({
    value: "値",
  });
</script>
注意点

売上(コンバージョン値)を取得するための変数名(データの名前)として、仮に「value」と入れていますが、ここは任意に決めていただいてOKです。(そのまま「value」でも問題ありません。)

ただし変数名は日本語ではなく、英数字が推奨で先頭に数字が使うことができないため、注意が必要です。

“値”の部分には売上(コンバージョン値)を動的に取得できるよう、各ECサイトの仕様に従って記述してください。

カートASPを利用している方は、売上(コンバージョン)を動的に取得できる記述が各社のヘルプページに記載されていると思いますので、そちらをご参照ください。
(「タグ」「変数」など呼び名が各社によって違いますので、わからない場合は各社ご担当者様にお問い合わせください。)

2.購入完了ページにデータレイヤーを設置する。

作成したデータレイヤーを購入完了ページに設置します。

■データレイヤー実装例
<script>
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({
    value: "値",
  });
</script>

<!-- Google Tag Manager -->
...
<!-- End Google Tag Manager -->
注意点

必ずGTMコンテナより上部に実装をしてください。
※稀に上部に実装しても値が取得できないケースがあります。
※カートASPの仕様によっては、直接購入完了ページを編集できない場合がございますので、その場合は各社ヘルプデスクにご相談ください。

GTMで変数を設定する

続いて、データレイヤーで取得した値をGTM側で受け取る設定を行います。

①GTMの画面の左メニューから「変数」を選択し、ユーザー定義変数の「新規」をクリック。

「変数タイプを選択して…」をクリックし、③「データレイヤーの変数」を選択。

「データレイヤーの変数名」にデータレイヤー内の変数名(例ではvalueという変数名)を記入し、⑤「保存」をクリック。

WEB広告のコンバージョンタグに変数を設定する

次にコンバージョンタグに変数を設定します。
ここではGoogle広告のコンバージョンタグを例として、設定の手順をご紹介いたします。

①Google広告コンバージョンタグの「コンバージョン値」を入力する箇所の右側にあるアイコンをクリック。

②先ほど作成した売上(コンバージョン値)を取得するデータレイヤー変数を選択。

「コンバージョン値」に選択したデータレイヤー変数が{{}}に囲まれて入力されていれば完了。「保存」をクリック。

以上でコンバージョンタグの設定は完了です。公開をすれば売上が計測できるようになります。

注意点

カスタムHTMLでタグを記述している場合は、売上(コンバージョン値)を取得する箇所に{{変数名}}を直接記載してください。

{{を入力すると選択できる変数が出てきます。

念のためGTMのプレビューモードでタグの発火と売上の取得ができているか、確認することをおすすめいたします!

(※別の記事で近日ご紹介予定です。)

まとめ

本記事では、データレイヤーとGTM(Google タグマネージャ)でWEB広告経由の売上(コンバージョン値)を計測する方法をご紹介しました。
JavaScriptなど技術的な要素が絡んでくると、広告運用だけやってきた自分の知識だけでは難しいと感じる方も多いと思います。すべてを理解しようとせず、ざっくり・なんとなくでも良いので理解をしていれば、わりとできるようになることも多いので、ぜひチャレンジしてみてください!

GLASSのタグマネジメントサービス
カテゴリー: GTM / WEB広告
GLASSで一緒に働いてみませんか?