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コマースも定義付けとしては商品単位ということかと。
ネットの広告でも、クリテオとか、もう商品単位のフィードで追っかけてきますよね。あんな感じにGoogleアナリティクスも、商品単位での計測をキャッチアップしてきた、という感じかと。
従来の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コマースの設定はとても面倒。これまでの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オーナーズサイトのマイページから、購入リストがありますので、そこからダウンロードします。
ダウンロードしたプラグインは圧縮されています。
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コマース設定ですと、残念ながら関連商品APIが選べません(今後変わるかもしれませんが)。
User-ID機能の有効化
EC-CUBEの拡張eコマースプラグインでは、User-ID機能が使えます。クロスデバイスでUser-ID単位で追跡できる便利な機能なので利用したいですね。
Googleアナリティクスでは、User-ID専用のビューを作成しておきます。アナリティクス設定>プロパティ>トラッキング情報>User-ID で画面にしたがってビューを作成してください。
作成したビューは、複製というよりはゼロから専用に作られたもの。ビューの設定や目標設定などは、最初から行ってください。いっぽう、ビューの複製ですので、トラッキングコードを新たに取得などはせずとも大丈夫です。
拡張eコマースの設定
作りましたUser-IDビューで、拡張eコマース用の設定をします。User-IDビューでは、なんと利用できる設定が変わります。関連商品の有効化など興味深いですね。
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コマースのトラッキングコードを設定してみてください。
・ ・ ・ ・ ・
>>安っ!アマゾンで半額以下になっている食品タイムセール
セール特設ページを見る
↓↓↓無料のニュースレターを配信中です