今回はEC-CUBE3での拡張eコマース設定をしたのですが、かなりわけわからない感じだったので誰かの助けになればよいと思い書き留めておきます。
お金がある人はEC-CUBE3の有料プラグインで拡張eコマース設定が簡単にできるやつがあるらしいので、それを使うことをお勧めします。
###前提として
ある程度EC-CUBEソースをいじれる人対象です。
よくわからない人はプラグインを購入したほうが間違いないです。
###やること
設定しないといけないことは大きく分けて３つぐらいだと思います。
- Googleアナリティクスでの設定
- EC-CUBEでの設定（テンプレートソースをいじります）
- Googleタグマネージャでの設定
###参考サイト
https://sem-technology.info/ja/google-analytics/enhanced-ecommerce-implements-best-practice
https://support.google.com/tagmanager/answer/6107169?hl=ja&ref_topic=6333310
他にも色々みましたが上記２サイトにだいぶ助けられました。
##1. Googleアナリティクス設定
以下のようにeコマース設定を有効にして、拡張eコマースもオンにします。
チェックアウトのラベルは決済ステップを設定します。
アナリティクスではこれだけ！
##2. EC-CUBEでの設定
dataLayerを使用するための設定です。
(dataLayerっていう変数をjsで用意してそこに商品情報をどんどん追加して、Googleになげるっていうやり方だと解釈してます。）
https://sem-technology.info/ja/google-analytics/enhanced-ecommerce-implements-best-practice
を参考にして、必要な箇所のソースを修正していきます。
参考として自分が設定した商品一覧のソースは以下の通りです。
新商品を表示させるブロック（独自で作成してます。デフォルトではありません。）があり、それをトップページで表示しているのでそこに拡張eコマース設定をしました。
<div class="row new-product" data-list-name="新商品ブロック">
<div class="col-sm-12">
{% for p in Product | slice(0, 4) %}
<div class="col-sm-3 col-xs-6 no-padding">
<div class="pickup_item product-box" data-id="{{ p.getId() }}" data-name="{{ p.name }}" data-price="{{ p.getPrice02Max() }}">
<a href="{{ url('product_detail', {id : p.getId()} ) }}" class="product-link">
<div class="item_photo"><img src="{{ app.config.image_save_urlpath }}/{{p.getMainListImage()}}"></div>
<p class="item_comment text-warning">{{p.note}}</p>
<dl>
<dt class="item_name">{{p.name}}</dt>
<dd class="item_price">¥{{p.getPrice02IncTaxMax()|number_format}}</dd>
</dl>
</a>
</div>
</div>
{% endfor %}
</div>
</div>
あとは、参考URLをもとに商品詳細、カテゴリ検索後の商品一覧、各決済ステップページなどに設定を仕込んでいきます。
2017年2月22日追記
商品購入時のshopping/complete.twigでは商品情報が取得できないと思いますので、Controllerにフックを仕込んで商品情報を取得してあげる必要があります。
記述例としては以下の通りです。
<div id="purchase-data" style="display: none;">
<ul>
{% for detail in Order.OrderDetails %}
<li class="purchase-product" data-name="{{detail.productName}}" data-price="{{detail.price}}" data-quantity="{{detail.quantity}}"> </li>
{% endfor %}
</ul>
<p class="purchase-information" data-step="complete" data-transaction-id="{{orderId}}" />
</div>
##3. Googleタグマネージャ設定
ここがだいぶ謎でしたw
まずはアカウントがなかったのでアカウント作成からやりました。
アカウント作成したらこんな画面になると思います。
隠してある部分は個人情報ですw
####dataLayerへ商品情報追加スクリプトのタグ追加
参考URL(https://sem-technology.info/ja/google-analytics/enhanced-ecommerce-implements-best-practice) にありますdataLayerへ商品情報を追加してくれるスクリプトを追加します。
- 「新しいタグを追加」を選択
- 名前を設定（私は拡張Eコマースデータ取得スクリプトとしました。なんでもいいです。）
- タグの設定をクリックすると右側にメニューが開きます。
- カスタムHTMLを選択
- HTMLの枠にこちらのgithubからスクリプトを取得して貼り付けます。
- トリガーでAllPagesを選択して、保存します。
####eコマースタグ追加
Product Clicked（商品クリックしたとき）, Add to Cart（商品をカートにいれたとき）, Checkout（決済ステップ）, Purchase（購入完了）, Impressions（商品閲覧）, Product Detail（商品詳細閲覧）のトリガーを作成し、タグを設定していきます。
参考URLではclickもpageviewも同じイベントでやっているっぽい？ですが自分は分けて設定してみました。
- 「新しいタグを追加」を選択
- 名前を設定（私はEC-Clickと設定しましたが、なんでもいいです。）
- タグの設定で「ユニバーサルアナリティクス」を選択。トラッキングIDをGoogleAnalyticsからコピーして貼り付けます。
- トラッキングタイプを「イベント」、カテゴリに「Ecommerce」、アクションは「クリック」としました。
- 詳細設定にてeコマース->「拡張eコマースを有効にする」にチェック->「データレイヤーを使用する」にチェック
- トリガーを設定
- 多分、今回初めてタグマネージャ使うよって方はAllPagesぐらいしかないと思いますので＋ボタンから新規追加します。
- トリガーの名前を、Product Clickedと入力します。ここの名前はスクリプトの中で設定されているので、それと同じものを設定しました。
トリガーの種類「クリック - すべての要素」を選択しました。そのままトリガー新規追加でAdd to Cart, Checkout, Purchaseを追加。
2017/2/22追記
- トリガーの種類「クリック - すべての要素」を選択しました。そのままトリガー新規追加でAdd to Cart, Checkoutを追加。
Purchaseをクリックで取得しようと設定していましたが、色々試して取得できなかったのでPageViewのほうにいれました。
全部設定するとこんな画面になると思います。
これでclickの設定は完了です。
次にpageviewです。
- 「新しいタグを追加」を選択
- 名前を設定（私はEC-Pageviewと設定しましたが、なんでもいいです。）
- タグの設定で「ユニバーサルアナリティクス」を選択。トラッキングIDをGoogleAnalyticsからコピーして貼り付けます。
- トラッキングタイプを「ページビュー」に設定。
- 詳細設定にてeコマース->「拡張eコマースを有効にする」にチェック->「データレイヤーを使用する」にチェック
- トリガーを設定
- トリガーの名前を、Impressionsと入力します。
- トリガーの種類「ページビュー」を選択しました。そのままトリガー新規追加でProduct Detailを追加。
設定完了するとこんな画面になると思います。
これで設定完了！
あとは公開して、動作確認です。
お疲れ様でした！
ちなみに、これで設定はいいかなーと思うんですが、いまいちアナリティクスの見方を把握していないのでどこかで設定が間違っているかもしれません。
もしここはこうしたほうがいいなじゃないかとかいう意見があればいつでもコメントください！
####注意点
・eコマースの計測に関してはリアルタイムでは行われません。今日クリックや閲覧したものは明日に反映されます。