マイティーBlog|リスティング広告やWEBマーケティング情報

トップページ ブログ > Googleアナリティクス > GTMでeコマーストラッキングをEC-CUBE系のカートに実装した例

Mighty Ace Blog

マイティーBlog

Googleアナリティクス

2017.05.31

GTMでeコマーストラッキングをEC-CUBE系のカートに実装した例

※当記事はECサイト構築システム PRECSにより制作されたLP・カート向けを対象にした事例です。ファイルの場所・変数等が異なる可能性があります。

 

通販サイトであれば、Googleアナリティクスのeコマーストラッキングは改善に繋がる非常に有効なデータが取得できるため、是非設定したいところですよね。ところが、いざ設定方法をWebで調べても「基本はこうやってタグを貼る。後はカートに応じてカスタマイズ」「うまく動くようプログラム組んでね」という風に、すぐにそのまま使える記事がなかなか見つかりませんでした。

そこで、EC-CUBE系のカートで、具体的にeコマーストラッキングの設定を行った事例を書いてみます。

「プログラムは詳しくないけどGoogleアナリティクスのeコマーストラッキングをどうにか実装したい!」という方で、Googleタグマネージャを使用されている方の参考になれば幸いです。

 

今回実装したタグは、こちらのGoogleアナリティクス公式コミュニティのスレッドを参考に「拡張eコマースにも対応した形式」のものを使用しています。

 

設定手順

具体的には、以下の手順で進めました。

  1. Googleアナリティクス:ビューのeコマース設定
  2. Webサイト:datalayerにデータをpushするタグを設置
  3. GTM:eコマーストラッキング用のGoogleアナリティクスタグを新設
  4. データ計測確認

 

1.Googleアナリティクス:ビューのeコマース設定

まずはGoogleアナリティクス側の設定です。 Googleアナリティクスにログインし、左下の歯車アイコンから管理画面へ移動。設定するビューの「eコマースの設定」をクリック。

 

eコマースの「ステータス」をオンに変更。「関連商品の有効化」は、データを参照するにはAPIの利用が必要なようです。使用する際には過去30日分のデータ蓄積が必要だそうなので、先々を見据えてこちらもオンにしておいても良いと思います。

 

拡張eコマースの設定の「拡張eコマースのレポートを有効化」について、今回は拡張eコマースにも対応したタグを実装したためオンに設定。 サンクスページのみにタグを設置するため、目標到達プロセスは空欄のまま「送信」をクリックします。 この作業を、eコマーストラッキングを有効化するビュー全てで行います。

これで、Googleアナリティクス側の設定は完了です。ここは特に迷わず全部オンにしておく!でOKです。

 

2.Webサイト:datalayerにデータをpushするタグを設置

次に、GTMでeコマーストラッキングに必要なデータを取得できるよう、datalayerにデータを飛ばすためのタグをWebサイトのサンクスページに設置します。 技術的な細かい話は抜きとして、こうしたら動いたという一例と思ってもらえたら…(笑)

PCサイトは、以下のファイルを開き、タグを記述します。

/templates/default/shopping/complete.tpl

<!--{if $smarty.server.PHP_SELF == "`$smarty.const.URL_DIR`shopping/complete.php" && $arrGAOrder && $arrGAOrderDetail}-->
<script type="text/javascript">
        var dataLayer = dataLayer || [];
        dataLayer.push({
            'ecommerce': {
                'purchase': {
                    'actionField': {
                        'id': '<!--{$arrGAOrder.order_id}-->',
                        'affiliation': '<!--{$arrGAOrder.shop_name}-->',
                        'revenue': '<!--{$arrGAOrder.total_without_tax_shipping - }-->',
                        'tax': '<!--{$arrGAOrder.tax}-->',
                        'shipping': '<!--{$arrGAOrder.shipping_total}-->',
                    },
                    <!--{section name=cnt loop=$arrGAOrderDetail}-->
                    'products': [{
                        'id': '<!--{$arrGAOrderDetail[cnt].product_code}-->',
                        'name': '<!--{$arrGAOrderDetail[cnt].product_name}-->',
                        'price': '<!--{$arrGAOrderDetail[cnt].tax_added_price}-->',
                        'category': '<!--{$arrGAOrderDetail[cnt].category_name}-->',
                        'quantity': '<!--{$arrGAOrderDetail[cnt].quantity}-->',
                    }]
                }
            }
        });
        <!--{/section}-->
    </script>
<!--{/if}-->

 

 

スマホサイトは以下のファイルに、タグを記述します。

/smp/templates/default/shopping/complete.tpl

<!--{if $smarty.server.PHP_SELF == "`$smarty.const.URL_DIR`smp/shopping/complete.php" && $arrGAOrder && $arrGAOrderDetail}-->
<script type="text/javascript">
        var dataLayer = dataLayer || [];
        dataLayer.push({
            'ecommerce': {
                'purchase': {
                    'actionField': {
                        'id': '<!--{$arrGAOrder.order_id}-->',
                        'affiliation': '<!--{$arrGAOrder.shop_name}-->',
                        'revenue': '<!--{$arrGAOrder.total_without_tax_shipping - }-->',
                        'tax': '<!--{$arrGAOrder.tax}-->',
                        'shipping': '<!--{$arrGAOrder.shipping_total}-->',
                    },
                    <!--{section name=cnt loop=$arrGAOrderDetail}-->
                    'products': [{
                        'name': '<!--{$arrGAOrderDetail[cnt].product_name}-->',
                        'id': '<!--{$arrGAOrderDetail[cnt].product_code}-->',
                        'price': '<!--{$arrGAOrderDetail[cnt].tax_added_price}-->',
                        'category': '<!--{$arrGAOrderDetail[cnt].category_name}-->',
                        'quantity': '<!--{$arrGAOrderDetail[cnt].quantity}-->',
                    }]
                    <!--{/section}-->
                }
            }
        });
    </script>
<!--{/if}-->

 

 

コードの各部位は、それぞれ以下のようになっています。

①eコマーストラッキングの設定をしたいサンクスページ(/shopping/complete.php・/smp/shopping/complete.php)に、計測したい変数を呼び出す


<!--{if $smarty.server.PHP_SELF == "`$smarty.const.URL_DIR`shopping/complete.php" && $arrGAOrder && $arrGAOrderDetail}-->
<!--{/if}-->

 

<!–{$arrGAOrderxxxxxx}–>が、ASPで定義された各データの変数です。ここが「@@id@@」とか「__ID__」とか、カートシステムにより変わります。

 

スマホの場合


<!--{if $smarty.server.PHP_SELF == "`$smarty.const.URL_DIR`smp/shopping/complete.php" && $arrGAOrder && $arrGAOrderDetail}-->
<!--{/if}-->

 

②datalayerに飛ばす値を定義する


        // <![CDATA[
        var dataLayer = dataLayer || [];
        dataLayer.push({
            'ecommerce': {
                'purchase': {
                    'actionField': {
                        'id': '<!--{$arrGAOrder.order_id}-->',
                        'affiliation': '<!--{$arrGAOrder.shop_name}-->',
                        'revenue': '<!--{$arrGAOrder.total_without_tax_shipping - }-->',
                        'tax': '<!--{$arrGAOrder.tax}-->',
                        'shipping': '<!--{$arrGAOrder.shipping_total}-->',
                    },
                    'products': [{
                        'id': '<!--{$arrGAOrderDetail[cnt].product_code}-->',
                        'name': '<!--{$arrGAOrderDetail[cnt].product_name}-->',
                        'price': '<!--{$arrGAOrderDetail[cnt].tax_added_price}-->',
                        'category': '<!--{$arrGAOrderDetail[cnt].category_name}-->',
                        'quantity': '<!--{$arrGAOrderDetail[cnt].quantity}-->',
                    }]
                }
            }
        });

actionFieldとproductsそれぞれに’id’とありますが、actionFieldのidには「注文ID(トランザクションID)」、productsのidには「商品ID(SKU等)」が入るように変数を設定します。 eコマーストラッキングのコードの場合、アイテムデータに’sku’というキーを設定できますが、拡張eコマーストラッキング対応のコードの場合、’sku’キーを記述してもGoogleアナリティクス側が取得してくれないようです…。

 

③複数商品が購入された際にループするように記述する


            <!--{section name=cnt loop=$arrGAOrderDetail}-->
            <!--{/section}-->

ループするように記述することで、 複数の商品が購入された際にそれぞれのデータが計測できるようになります。

 

3. GTM: eコマーストラッキング用のGoogleアナリティクスタグを新設

datalayerに飛ばしたデータをGoogleアナリティクスで計測できるよう、 eコマーストラッキング用のGoogleアナリティクスタグを追加します。

今回は既に「 全ページ」 を対象にGoogleアナリティクスタグを発火させていたため、 以下のように「 サンクスページだけeコマーストラッキング用のGoogleアナリティクスタグを発火させる」 という設定に変更しました。

※ 別途、 カスタムイベントで飛ばす方法もあります。

 

既存のGoogleアナリティクスタグ: トリガーに「 サンクスページ除外」 を設定

 

eコマーストラッキング用のGoogleアナリティクスタグ: トリガーに「 サンクスページ」 を設定

図のように「トラッキングタイプ: ページビュー」 を選択し、「 拡張eコマース機能を有効にする」 を真に、「 データレイヤーを使用する」 にチェックを入れます。

また、 データレイヤーに変数が上手く反映されないことがあったため、 トリガーのサンクスページを「 ページビュー」 ではなく「DOM Ready」で指定しています。

 

4. データ計測確認

最後に、 テストコンバージョンを行いGoogleアナリティクスで正しくeコマーストラッキングができているかを確認します。 eコマーストラッキングのデータは、 通常のコンバージョンのようにリアルタイムレポートでは確認ができないため、 Chromeの拡張機能であるGA Debugを使用し、 Chromeの開発者ツール( F12)で確認します。

 

設定したidやrevenue、 productの値が正しく計測できていればOKです!お疲れさまでした。

翌日にでも、Googleアナリティクスにも正しくデータ反映されているかを確認しておきましょう。

 

最後に

eコマーストラッキングをASPカートに設定する上で悩むのは、 タグの記述方式よりも 「設置する場所探し」 と「 変数探し」でした。。。

各ASPのヘルプで「 eコマーストラッキング」 と検索すると見つかりやすいので、 睨めっこしながら頑張ってみてください!

この記事に関連するタグ

正しい効果測定は、正しい計測設定から!Googleアナリティクス設定項目チェックシート(無料)

正しい効果測定は、正しい計測設定から!Googleアナリティクス設定項目チェックシート(無料)

Googleアナリティクスは、適切な初期設定を行って初めて、解析に役立つデータを計測できます。 正しい効果測定を行う上で、必要な設定項目のチェックシートをご用意しました。

Googleアナリティクス,アクセス解析でWeb集客分析・改善なら福岡のマイティーエース

リスティング・Googleアナリティクス・ホームページ・ランディングページなど
Webマーケティングのことなら何でもご相談ください

株式会社マイティーエースでは、様々なWeb広告・Webマーケティングなど
お客様に合ったご提案しています。
興味をお持ちいただけた方は、まずは気軽にご相談ください。

あわせて読みたい人気の記事

最新記事

BLOG MENU

株式会社マイティーエースのSNSもチェックしてみてください

Copyright (c)2014-2018 MightyAce, inc. All Right Reserved.