拡張Eコマースを利用するメリット

2014年にGoogleアナリティクスのEコマース関連機能が強化され、拡張Eコマースがリリースされました。拡張Eコマースでは、単純な商品のトランザクションデータだけでなく、その購入のプロセスを詳細に追うことができるようになります。

具体的には、

  • どの商品枠にどの商品が何回表示され、コンバージョンに至っているのか
  • 流入元情報やデバイスなど様々な軸で、商品詳細ページにたどり着いたセッション、カート追加が発生したセッション、チェックアウトプロセスを開始したセッション、トランザクションが発生したセッションを数値化でき、購入プロセスのどのステップで離脱したか、が分かる
  • チェックアウトプロセスをサイトごとに細かく定義することができ、チェックアウトプロセスのどの段階で離脱したか、が分かる
  • 返品(注文のキャンセル)の発生も計測することができる

といったメリットがあります。特に「どの商品枠にどの商品が何回表示され、コンバージョンに至っているのか」については、「表示されている回数は少ないもののコンバージョン率の高い商品」を目立つ商品枠でプロモーションすることで、ECサイトの売上最大化につなげることができます。

ECサイトだけでない、拡張Eコマース活用可能ジャンル

名前からして、Eコマース系の機能はECサイトでしか利用できない、などと思っている方も多いと思います。実はEコマース機能が拡張され、拡張Eコマースとなったことで、ECサイト以外の多くのジャンルのサイトに利用可能になっています。活用可能なWebサイトのジャンルとしては、データベースなどを用いてシステムで情報が構造化管理されているサイトとなります。

例えば、ブログやニュースサイトでは、各記事を商品と見立てて、ECサイトのように扱うことができます。他にも、ソーシャルネットワークサービス(SNS)や投稿サイトにおいても、ユーザーや投稿を商品と見立てることができます。ソーシャルネットワークサービスでは、ユーザーと投稿という全くジャンルの異なる2つの商品が出てきますが、拡張Eコマース機能では、商品カテゴリを使って、区別して扱うことが可能になっています。

拡張Eコマース実装時のベストプラクティス

拡張Eコマースの実装は難しい

高度なアクセス解析が可能になる拡張Eコマースですが、利用可能にするにはトラッキングコードの実装が必要になります。また、この実装ですが、一般的なWebマーケッターが実装できるような単純なものではなく、サービスサイトのシステム側から情報を取得する必要があるため、システムサイドの改修も必要になります。その上でさらにトラッキングコード側の高度なカスタマイズも必要になります。

高度な実装が必要になる上に、さらにそれらを効率的に実装するための情報はほとんど公開されていません。Googleの公式ヘルプに一通りの実装ガイダンスはありますが、ガイダンスに沿って実装しようにも、断片的な情報かつトラッキングコード部分のみで、システム側をどう改修するのが適切か？については触れられていません。

下記は、自分が今まで拡張Eコマース実装に関わってきた中で培ってきた知識をもとに、システム側・トラッキングコード側、さらにGoogleタグマネージャの設定の全てを最適化させる方法をベストプラクティスという形で公開します。

システム側の実装のベストプラクティス

システム側の役割は、トラッキングコード上で送信するべき値を、効率良く取得できるようにすることです。
下記で一覧画面、詳細画面、購買プロセス画面のシステム側の実装を紹介します。もし分かりにくい場合はこのブログのHTMLソースを解析するのもよいかと思います(ところどころ、クラス名などを変えているのでソース解析時は注意が必要です)。

一覧画面(詳細画面へのリンク)の実装

一覧画面では、

  • 各商品掲載場所ごとに、また何番目にどの商品が掲載されているか。
  • どの商品掲載場所のどの商品がクリックされたか。

をトラッキングコードに効率良く渡すことができるようにするべきです。システム側で実装するときには、

  • 商品リンクに対してクラス「product-link」を付与する。
  • 商品リンクを含む商品情報1つをラップする親タグに対してクラス「product-box」を付与する。
  • クラス「product-box」を持つタグにdata属性としてその商品の持つ属性情報(商品IDやカテゴリ, 商品名, など)を設定する。
  • 複数の商品リンクを束ねる商品掲載場所ごと(TOPカルーセルバナー・エリア, レコメンド・エリア, 閲覧履歴エリア, など)に属性「data-list-name」を付与し値として商品掲載場所を表す文字列を設定する。

ことに注意します。具体的には、

<div data-list-name="レコメンドエリア">
  <ul>
    <li>
      <div class="product-box" data-id="1" data-name="商品名1" data-category="商品カテゴリ1" data-price="4500">
        <h1><a href="商品へのリンク" class="product-link">商品名1</a></h1>
        <img src="#" />
        <p class="note"><a href="商品へのリンク" class="product-link">詳細を見る</a></p>
      </div>
    </li>
    <li>
      <div class="product-box" data-id="2" data-name="商品名2" data-category="商品カテゴリ2" data-price="4000">
        <h1><a href="商品へのリンク" class="product-link">商品名2</a></h1>
        <img src="#" />
        <p class="note"><a href="商品へのリンク" class="product-link">詳細を見る</a></p>
      </div>
    </li>
</div>

のようなマークアップになります。これを全ての商品リンクに対して実装していきます。

詳細画面の実装

詳細画面では、

  • どの商品が閲覧されているか
  • どの商品掲載場所から、その商品に辿り着いたか
  • 「買い物かごに追加」ボタンが押されたかどうか

をトラッキングコードに効率良く渡すことができるようにするべきです。具体的にシステム側で実装するときは、

  • 商品情報をラップする親タグに対してクラス「product-detail」を付与する。
  • クラス「product-detail」を持つタグにdata属性としてその商品の持つ属性情報(商品IDやカテゴリ, 商品名, など)を設定する。
  • 「買い物かごに追加」ボタンに対してクラス「add-to-cart」を付与する。

の3点に注意します。ソースコードで説明すると、

<div class="product-detail" data-id="1" data-name="商品名" data-category="商品カテゴリ" data-price="4500">
  <h1>商品名</h1>
  <img src="#" />
  <p>商品詳細</p>
  <a class="add-to-cart" href="#">買い物かごに追加</a>
</div>

のようなマークアップになります。

購買プロセス画面の実装

購買プロセス中の画面においては、

  • 該当の購買プロセスにおいて、対象となっている商品のリストと、それぞれの個数
  • 現在の購入プロセス上のステップと、そのプロセスにおけるオプション情報
  • 購入完了時のトランザクション情報

をトラッキングコードに効率良く渡すことができるようにするべきです。具体的には、

  • 購買対象となっている商品それぞれに対して、クラス「purchase-product」を付与する
  • クラス「purchase-product」を持つタグにdata属性として、その商品の持つ属性情報(製品IDやカテゴリ, 商品名, 価格, など)と、購入数を設定する
  • 購入プロセスに関する情報やトランザクション情報は, クラス「purchase-information」を付与したタグを作成し、data属性としてその購入プロセスやトランザクションに関する情報を設定する
  • 必要に応じて、クラス「purchase-product」「purchase-information」はCSSを用いて、画面上は非表示にする

といった点に注意します。ソースコードで説明すると、

<div id="purchase-data" style="display: none;">
  <ul>
    <li class="purchase-product" data-id="1" data-category="カテゴリ" data-name="商品名" data-price="4500" data-quantity="3">&nbsp;</li>
    <li class="purchase-product" data-id="1" data-category="カテゴリ" data-name="商品名" data-price="4500" data-quantity="3">&nbsp;</li>
  </ul>
  <p class="purchase-information" data-step="1" data-option="New Register" />
  <!-- ステップに合わせて出し分ける
  <p class="purchase-information" data-step="2" data-option="Visa" />
  <p class="purchase-information" data-step="complete" data-transaction-id="T-0001_0001" />
  -->
</div>

のようなマークアップになります。

トラッキングコード実装のベストプラクティス

ここまでできてしまえば、JavaScriptを利用して必要なデータには全てアクセス可能なので、JavaScriptでGoogleアナリティクス用のトラッキングコードを実装していくだけになります。

ここは、約200行のJavaScriptコードになり量が多いことから、Githubにソースコードをアップロードしておりますので、Githubを参照してもらえればと思います。上記のようにウェブサイト側のHTMLが実装されていれば、トラッキングコード部分はほぼ変更は要らない予定です。

GithubのGistからJavaScriptコードをダウンロードしてきて、Googleタグマネージャーなどで全ページに配信してください。

Gist: 拡張Eコマースを実装するときのベストプラクティス（トラッキングコード実装）

Googleタグマネージャー設定のベストプラクティス

ここまで実装されれば、GoogleタグマネージャのdataLayer変数に必要なタイミングで必要な値が設定されている状態になっており、さらに各データを送信したいタイミングで、Googleタグマネージャのイベントが設定されるようになっています。

あとは、Googleタグマネージャで下記6種類のイベント名で6つのトリガーを作成します。

  • Impressions
  • Product Clicked
  • Product Detail
  • Purchase
  • Add to Cart
  • Checkout

最後にGoogleタグマネージャでユニバーサルアナリティクスの拡張Eコマースタグの実行です。ここで実行するタグは、トラッキングタイプが「イベント」で拡張eコマース機能を有効にしたタグ1つのみ作成すれば十分で、配信するトリガー設定に上記6種類のトリガーを指定すれば、必要なタイミングで必要なタグが配信されます。本来であれば、Product DetailやImpressionsは、ページビューと一緒に送信しましょう、とヘルプに書いてありますが、このようにイベントと一緒に送信しても問題ありません。設定画面をキャプチャにしてみましたので、合わせて確認ください。

まとめ

拡張eコマース機能がリリースされて、1年ちょっとが経ちましたが、Web上の情報を元に実装しようとしても、断片的な情報しかなかったり、開発側の人間がGoogleアナリティクスやタグマネージャを理解しておらず適切に実装できなかったりという状態が続いており、未だ拡張eコマースの実装率は低い状態と言えます。

まずは、この記事を参考に「拡張eコマースの実装をしてみよう」という人が増えればと思います。