Googleアナリティクス活用:拡張eコマースの設定とトラッキングコードをEC-CUBEで実装

拡張eコマースのトラッキングコードと設定

Googleアナリティクスの拡張eコマースは凄い。

こんにちは、Googleアナリティクス大好きカグア!です。

拡張eコマースはページ単位ではなく、トラッキングコードを商品やプロモーション枠に貼るなど、開発案件レベルの高い難易度。そんななか、EC-CUBEで拡張eコマースのプラグインを発見。早速、自腹購入して試してみましたが、実装は1分で済みました。

トラッキングコードも確認してみましたが、プラグインでここまで出来るとは驚きですね。

関連記事
>>Googleアナリティクスの基礎:eコマースの設定とタグ&GTM
>>Googleアナリティクス基礎:トラッキングコードの設置
>>Googleタグマネージャに予め設定しておくと便利な変数12本

拡張eコマースとは

拡張されたeコマース計測

Googleアナリティクスの拡張eコマースとは、ネットショップなどでより詳細な情報をトラッキングできる、まさに「拡張」されたeコマース計測機能です。

  • 商品ごとの露出計測やグルーピングなどが可能
  • 払い戻しデータのインポート
  • 内部プロモーションの計測
  • より多くの商品情報を指定できる
  • クーポンの計測も可能
  • 従来のeコマース(ecommerce.js)プラグインと併用はできない
  • その他

これだけのトラッキングができるようになります。以下に詳しい一覧があります。
>>付録: メソッド、フィールド、レポート データ – アナリティクス ヘルプ

User-IDビューで設定しますと、さらに以下の計測ができるようになります。

  • 関連商品API
  • User-IDごとのトラッキング

そして、商品ごとにアクションを計測できるようになるのです。このあたりが画期的ですよね。

  • クリック(商品や商品リンク)
  • 詳細表示
  • カート追加
  • カートから削除
  • 決裁プロセス開始
  • 決裁プロセスのオプション利用
  • 販売
  • 払い戻し
  • サイト内プロモーションのクリック

>>拡張 e コマース  |  ウェブ向けアナリティクス(analytics.js)  |  Google Developers

ですから、従来のeコマーストラッキングとは、概念からまったく異なる実装となります。開発案件ですねー。

拡張eコマースのトラッキングコード

基本的な設置方法は公式ヘルプに書かれています。エンジニアの方はこちらからどうぞ。
>>拡張 e コマースの概要 – アナリティクス ヘルプ

こちらに、拡張eコマースのトラッキングコードの関連情報が書かれています。
>>拡張 e コマース  |  ウェブ向けアナリティクス(analytics.js)  |  Google Developers

とはいえ従来のトラッキングコードとは、概念から異なります。商品自体をトラッキングする=商品に対しタグを貼り付ける、となりますので、ヘルプを見ましても、設置はなかなかイメージがわかない人も多いかと思います(わたしもそうです(汗))。

商品単位でコード付けする

もう計測の単位が商品ベースということなのですよね。

ですからほら、カスタムディメンションやカスタム指標などでも、スコープに商品ってありますでしょ。あれって、そういうことなんですよね。
拡張eコマース

各データと紐付けるキーとして、もう商品がちゃんと定義されているのですよね。拡張eコマースも定義付けとしては商品単位ということかと。

ネットの広告でも、クリテオとか、もう商品単位のフィードで追っかけてきますよね。あんな感じにGoogleアナリティクスも、商品単位での計測をキャッチアップしてきた、という感じかと。

従来のeコマースからの移行

拡張eコマースの設定

新規にプロパティを作る方法と、既存のプロパティを移行する方法が、公式ヘルプに書かれています。
>>拡張 e コマース  |  ウェブ向けアナリティクス(analytics.js)  |  Google Developers

新規にトラッキングコードを設定してしまうほうが楽そうですが、そのさい、マルチトラッキングの設定を行う必要がありますので注意です。

既存のeコマースから移行するには、コードをすべて書き換え、という対応となります。

なお、公式ヘルプによりますと、過去に取得したeコマースのデータが影響を受けることはないとのことです。

EC-CUBEの検証サイト

ステージングのテスト環境して、EC-CUBE 2.13.3 をインストール。

こちらにEC-CUBEを設置してみました。
>>検証本舗

テストユーザーのログインIDも書いてありますの、よろしければお試しください。クーポンコードを利用される場合は「hogehoge」です。

EC-CUBEって、目標到達プロセスのURLって、どういう命名ルールだったけなあ、と調べたいときにもどうぞ。

なお、EC-CUBE公式のデモサイトはこちらです。超きれい。ver3 です。
>>EC-CUBE3 DEMO SHOP / TOPページ

EC-CUBEに拡張eコマースを設定する

それでは、拡張eコマースの設定や実装、トラッキングコードを、EC-CUBEのネットショップを例に見ていきましょう。

ただ、前述のように、従来のeコマーストラッキングとは併存ができませんので、トラッキングコードの実装の際には慎重な計画のもとに、どうぞ。

EC-CUBEのプラグインを購入

拡張eコマース

拡張eコマースの設定はとても面倒。これまでのGoogleアナリティクスのeコマース設定が、トランザクションページにだけ行えば良かったところが、そうではありません。そこでプラグインを利用します。EC-CUBEでは、プラグインでさまざまな機能追加ができます。

EC-CUBEにログインし、現在利用中のバージョンを確認します。

次に、EC-CBUEオーナーズストアに会員登録して、プラグインを探します。
>>オーナーズストア「ECオープンプラットフォームEC-CUBE」

ECCBUEオーナーズストアとは、EC-CUBEのプラグインなどをダウンロードできるサポートサイトです。EC-CUBEの管理画面のメニューからもいけます。

そこで、自分のEC-CUBEのバージョンにあったプラグインを購入します。

>>【EC-CUBE3対応】Google Analytics eコマース/拡張eコマース対応プラグイン
>>【EC-CUBE2対応】UA向け Google Analytics eコマース/拡張eコマース対応プラグイン

EC-CUBEプラグインのダウンロード

購入したプラグインをダウンロードします。

EC-CUBEオーナーズサイトのマイページから、購入リストがありますので、そこからダウンロードします。
購入履歴

ダウンロードしたプラグインは圧縮されています。
拡張eコマースアイコン

EC-CUBEへインストール

EC-CUBEの管理画面にログインします。

トップメニューの オーナーズストア>プラグイン管理>プラグイン管理 を選びます。
プラグイン管理

ダウンロードしたプラグインを選び、「インストール」をクリックすればOKです。たったこれだけです、簡単ですね。

拡張eコマースの設定(プラグイン)

EC-CUBEのGoogleアナリティクス拡張eコマースプラグインを使った設定はとても簡単です。

あらかじめ、Googleアナリティクスにログインし、アナリティクス設定>プロパティ>プロパティ設定 から、トラッキングコードに含まれるIDを調べておきます。
プロパティ

前述のプロパティIDを、設定画面に入力します。基本的にはこれだけでOKです。
設定

ネットショップでもともとUser-ID ビューを使っているときは、ユーザーIDトラッキングのレポートを有効化にしましょう。

拡張eコマースの設定(Googleアナリティクス)

通常ビューの拡張eコマース設定

User-IDビューでない通常のビューでは、1箇所オンにするだけです。

アナリティクス設定>ビュー>eコマースの設定
拡張eコマース

なお、通常の拡張eコマース設定ですと、残念ながら関連商品APIが選べません(今後変わるかもしれませんが)。

User-ID機能の有効化

EC-CUBEの拡張eコマースプラグインでは、User-ID機能が使えます。クロスデバイスでUser-ID単位で追跡できる便利な機能なので利用したいですね。

Googleアナリティクスでは、User-ID専用のビューを作成しておきます。アナリティクス設定>プロパティ>トラッキング情報>User-ID で画面にしたがってビューを作成してください。
ユーザーID

作成したビューは、複製というよりはゼロから専用に作られたもの。ビューの設定や目標設定などは、最初から行ってください。いっぽう、ビューの複製ですので、トラッキングコードを新たに取得などはせずとも大丈夫です。

拡張eコマースの設定

作りましたUser-IDビューで、拡張eコマース用の設定をします。User-IDビューでは、なんと利用できる設定が変わります。関連商品の有効化など興味深いですね。

Googleアナリティクス側でも、拡張eコマース関連の設定をすべてオンにしましょう。
Googleアナリティクス拡張eコマースの設定

これで、設定は完了です。拡張eコマースで計測できるようになります。お疲れ様でした。

拡張eコマースのトラッキングコード

以下のようなコードが出力されてました。すばらしい。商品単位でしっかりコードが書きだされてるのに感動です。

商品ごとに表示(インプレッション)など、トラッキングコードに細かくアクションが出力させるところがポイントですね。

便宜上の商品名やIDなどが入っていますので、適宜読み換えてください。

商品詳細ページ

 ga('create', 'UA-xxxxxxxx-1', {
    'userId': 'aaaaaaaa-wwww-xxxx-yyyy-zzzzzzzzzz',
    'name': 'plg_uagaeec',
    'cookieDomain': 'auto'
  });
  ga('plg_uagaeec.require', 'displayfeatures');
  ga('plg_uagaeec.require', 'ec');
  ga('plg_uagaeec.ec:addImpression', {
    'id': '1',
    'name': 'アイスクリーム',
    'list': 'Item Detail',
    'price': '933',
    'position': 1
  });
  ga('plg_uagaeec.ec:addProduct', {
    'id': '2',
    'name': 'おなべ',
    'price': '1650',
    'position': 1
  });
  ga('plg_uagaeec.ec:setAction', 'detail');
  ga('plg_uagaeec.ec:setAction', 'click', {'list': 'Internal Site'});
  ga('plg_uagaeec.send', 'pageview');

商品リスト(カテゴリーページ)

  ga('create', 'UA-xxxxxxxx-1', {
    'userId': 'aaaaaaaa-wwww-xxxx-yyyy-zzzzzzzzzz',
    'name': 'plg_uagaeec',
    'cookieDomain': 'auto'
  });
  ga('plg_uagaeec.require', 'displayfeatures');
  ga('plg_uagaeec.require', 'ec');
  ga('plg_uagaeec.ec:addImpression', {
    'id': '2',
    'name': 'おなべ',
    'list': 'Category List',
    'category': '食品',
    'price': '1650',
    'position': 1
  });
  ga('plg_uagaeec.ec:addImpression', {
    'id': '3',
    'name': 'おなべレシピ',
    'list': 'Category List',
    'category': '食品',
    'price': '100',
    'position': 2
  });
  ga('plg_uagaeec.ec:addImpression', {
    'id': '1',
    'name': 'アイスクリーム',
    'list': 'Category List',
    'category': '食品',
    'price': '933',
    'position': 3
  });
  ga('plg_uagaeec.send', 'pageview');

カート画面

  ga('create', 'UA-xxxxxxxx-1', {
    'userId': 'aaaaaaaa-wwww-xxxx-yyyy-zzzzzzzzzz',
    'name': 'plg_uagaeec',
    'cookieDomain': 'auto'
  });
  ga('plg_uagaeec.require', 'displayfeatures');
  ga('plg_uagaeec.require', 'ec');
  ga('plg_uagaeec.ec:addProduct', {
    'id': '1',
    'name': 'アイスクリーム',
    'variant': '抹茶/L',
    'price': '933',
    'quantity': 1,
    'position': 1
  });
  ga('plg_uagaeec.ec:setAction', 'add');
  ga('plg_uagaeec.send', 'pageview');

購入確認画面

  ga('create', 'UA-xxxxxxxx-1', {
    'userId': 'aaaaaaaa-wwww-xxxx-yyyy-zzzzzzzzzz',
    'name': 'plg_uagaeec',
    'cookieDomain': 'auto'
  });
  ga('plg_uagaeec.require', 'displayfeatures');
  ga('plg_uagaeec.require', 'ec');
  ga('plg_uagaeec.ec:addProduct', {
    'id': '1',
    'name': 'アイスクリーム',
    'variant': '抹茶/L',
    'price': '933',
    'quantity': 1,
    'position': 1
  });
  ga('plg_uagaeec.ec:setAction', 'checkout', {'step': 4, 'option': '代金引換'});
  ga('plg_uagaeec.send', 'pageview');

購入完了画面

こちらは現在調査中。気になる方は、ぜひ以下からプラグインを購入してみてください。

>>【EC-CUBE3対応】Google Analytics eコマース/拡張eコマース対応プラグイン
>>【EC-CUBE2対応】UA向け Google Analytics eコマース/拡張eコマース対応プラグイン

タグマネージャでの実装

拡張eコマースを、Googleタグマネージャ(GTM)で実装するには、データレイヤー(datalayer)に、上記の値を書き出せばOKです。

>>Googleアナリティクスの基礎:eコマースの設定とタグ&GTM

しかし、これだけのコードをさくっと出力してくれるのはほんと感動ですね。通常のeコマーストラッキングにも対応していますので、EC-CUBEユーザーはほんとおすすめです。

値段も安いので、コンサルティングを検討する前にとりあえず良いかもです。

関連情報リンク

まずはこちらの記事で、ざっくり拡張eコマースについて理解しましょう。国内公認パートナーのイー・エージェンシーさんの記事。
>>Google アナリティクスで強化された「拡張eコマース」機能がサクッとわかる6つの特徴 | Web担当者Forum

日本のトップコントリビューターである山田さんの詳しい解説。Googleタグマネージャ(GTM)への実装も解説されています。
>>拡張Eコマースを実装するためのベストプラクティス | SEM Technology

アンギュラーでも拡張eコマース。
>>AngularJS で Google Universal Analytics のeコマース機能を使用する – Qiita

カートASPでGoogleアナリティクスを設置する方法。運営堂森野さんの連載。
>>制作会社のためのGoogle アナリティクス設定術|ECzine(イーシージン)

アプリにももちろん、拡張eコマースは実装できます。
>>拡張 e コマース トラッキング – Android SDK v4  |  Android 向けアナリティクス  |  Google Developers

商品情報ってほんとこれからはいかにフィードに載せるかって感じですよね。
>>Googleショッピング広告、効果を上げるためのデータフィード構築・改善のポイント|ECzine(イーシージン)

拡張eコマースを積極活用されていますプリンシプル木田さんのインタビュー記事。
>>月商10億円家電ECのGoogle アナリティクス活用法 プリンシプル木田さんと語る|ECzine(イーシージン)

a2iさんのGoogleアナリティクスアドバンス活用セミナー。再演してほしいなあ。
>>【活動報告】セミナー「Google アナリティクス アドバンスド ~メジャメント プロトコルからデータ連携まで~」(2015/11/26)|アナリティクス アソシエーション (a2i.jp)

EC-CUBEでステージングを構築したい人向け。
>>EC-CUBE3をインストールしてみよう(windows+xampp編) – Qiita

アプリ解析。気になる。
>>Firebase Analytics、実際触ってみた。 – Qiita

キータのGoogleアナリティクスタグ。フォローしておこう。
>>analyticsに関する89件の投稿 – Qiita

まとめ

EC-CUBEのプラグインを使いますと、簡単に拡張eコマースを実装できます。

ただ、従来のGoogleアナリティクスのeコマースを使っている人はどう移行させるかを、慎重に検討することになるでしょう。

ページごとに、表示されている商品やプロモーション枠などをしっかりアクションとともに出力する、というポイントを抑えれば問題ないかと思います。

ぜひ、みなさんも拡張eコマースのトラッキングコードを設定してみてください。

・ ・ ・ ・ ・

>>安っ!アマゾンで半額以下になっている食品タイムセール
セール特設ページを見る

↓↓↓無料のニュースレターを配信中です

拡張eコマースぅ。


プロが教えるいちばん詳しいGoogle アナリティクス 4 | NRIネットコム株式会社, 神崎健太