タグ・解析

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

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

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

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

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

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

1 設定手順
2 最後に

設定手順

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

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

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）で確認します。