こんにちは、エクスチュアの權泳東(権泳東/コン・ヨンドン)です。
最近弊社でもGoogle Analyticsの「App+Webプロパティ」についての問い合わせがチラホラ来るようになりました。
で、AppWebでもいつの間にかEコマース計測が出来るようになってたのは良いのですが、Eコマースのパラメータが従来の拡張Eコマースと微妙に違うんですよね。
そこで、「ユニバーサルアナリティクスの拡張Eコマース計測用dataLayerをサイトに実装したが、これをAppWeb用に流用出来ないか?」という素朴な疑問が生まれまして、連休中暇だったので早速変換スクリプトを書いてみました。
四の五の言わずにコードを書け
で、書いた変換スクリプトがこちら。
これをGTMのカスタムHTMLタグとして追加します。
<script>
window.dataLayer = window.dataLayer || [];
try {
//dataLayerからecommerceオブジェクトを取得
var ec_obj = dataLayer.find(function(dataLayer) {
return dataLayer.ecommerce;
});
// ECオブジェクトのマッピング
var aw_event = '';
var ec_products = [];
var action_field = {};
var currency = ec_obj.ecommerce.currencyCode;
if (ec_obj.ecommerce.detail) { //商品詳細
aw_event = 'view_item';
ec_products = ec_obj.ecommerce.detail.products;
action_field = ec_obj.ecommerce.detail.actionField;
} else if (ec_obj.ecommerce.add) { //カート追加
aw_event = 'add_to_cart';
ec_products = ec_obj.ecommerce.add.products;
} else if (ec_obj.ecommerce.checkout) { // checkoutのステップ1
if (ec_obj.ecommerce.checkout.actionField.step == 1) {
aw_event = 'begin_checkout';
ec_products = ec_obj.ecommerce.checkout.products;
}
} else if (ec_obj.ecommerce.purchase) { //商品購入
aw_event = 'purchase';
ec_products = ec_obj.ecommerce.purchase.products;
action_field = ec_obj.ecommerce.purchase.actionField;
}
// ECイベントがあれば処理継続
if (aw_event) {
var aw_items = [];
for (var i=0; i<ec_products.length; i++) { //商品情報をマッピング
var old_item = ec_products[i];
var new_item = {
'item_name': old_item.name,
'item_id': old_item.id,
'item_price': old_item.price,
'item_brand': old_item.brand,
'item_variant': old_item.variant,
'item_quantity': old_item.quantity,
'item_coupon': old_item.coupon
}
if (old_item.category) { //商品カテゴリのマッピング
var item_cat = old_item.category.split('/');
if (item_cat[0]) { new_item['item_category'] = item_cat[0]; }
if (item_cat[1]) { new_item['item_category2'] = item_cat[1]; }
if (item_cat[2]) { new_item['item_category3'] = item_cat[2]; }
if (item_cat[3]) { new_item['item_category4'] = item_cat[3]; }
if (item_cat[4]) { new_item['item_category5'] = item_cat[4]; }
}
if (action_field.list) { new_item['item_list_name'] = action_field.list; } //商品リスト
aw_items.push(new_item);
}
var aw_ec_obj = {
'event' : aw_event,
'aw_ecom' : {}
};
if (action_field.id) { //トランザクション
aw_ec_obj['aw_ecom']['transaction_id'] = action_field.id;
aw_ec_obj['aw_ecom']['affiliation'] = action_field.affiliation;
aw_ec_obj['aw_ecom']['value'] = action_field.revenue;
aw_ec_obj['aw_ecom']['tax'] = action_field.tax;
aw_ec_obj['aw_ecom']['shipping'] = action_field.shipping;
aw_ec_obj['aw_ecom']['coupon'] = action_field.coupon;
}
aw_ec_obj['aw_ecom']['currency'] = currency; //通貨
aw_ec_obj['aw_ecom']['items'] = aw_items; //商品
dataLayer.push(aw_ec_obj);
}
}catch(e){}
</script>
なお、上記は「カート表示」「カート追加」「チェックアウト開始」「購入完了」の4つのイベントしか対象にしてません。
全部書くとメンドクサイのと、カート削除とか返品とか計測してもイチイチ見ないというケースが多くw、この4イベントが意識低い系の最低限計測しとけば良いイベントです(独断
もっと他のイベントも自動変換したい、という方は自分で書きましょう。
四の五の言わずにコードを書け。
トリガーは、従来の拡張Eコマースの各イベントと全く同じタイミングにします。
GTMの設定
上記のカスタムタグによって、dataLayerにはaw_ecomというオブジェクトと、下記4つのカスタムイベントがセットされます。
- view_item
- add_to_cart
- begin_checkout
- purchase
GoogleのドキュメントではEコマースオブジェクトとしてecommerceという名前を使ってますが、それだとユニバーサルアナリティクスと名前が被るのでaw_ecomに変えました。
ドキュメントに忠実に従いすぎて、既存の拡張Eコマース計測が止まったなんて阿呆な事にならないためです。
そしてここからがメンドクサイのですが、各イベントにおいて計測するEC用のデータレイヤー変数をGTM上で作って行く必要があります。
例えばAppWeb用の商品変数はこうなります。
これと同様に、aw_ecom.transaction_id, aw_ecom.value などの値でGTMデータレイヤー変数を作って行きます。
私は以下のGTM変数を作りました。
- aw_ecom.items … AW_商品
- aw_ecom.transaction_id … AW_注文番号
- aw_ecom.affiliation … AW_アフィリエイト
- aw_ecom.value … AW_売上総額
- aw_ecom.tax … AW_消費税
- aw_ecom.shipping … AW_送料
- aw_ecom.coupon … AW_クーポン
- aw_ecom.currency … AW_通貨
そしてこれらの「aw_ecom.***」を参照するGTM変数を全て作ったら、次は「アプリ+ウェブイベント」を作って行きます。
例えば購入完了のイベントはこうなります。
トリガーはそれぞれカスタムイベントをview_item, add_to_cart, begin_checkout, purchaseで作っておいて、それを使えばOKです。
動作確認
さて、プレビューモードでビーコンのペイロードをCharlesなどのツールで確認しましょう。
まずは拡張Eコマースのペイロードはこうです。
これはもう見慣れたいつものペイロードですね。
続いて、AppWebプロパティのEコマースペイロードはこうなります。
itemsに入れた情報はpr1, pr2,… というパラメータにまとまって入る事が分かりました。
TL;DR
既にデータレイヤーを無能でとにかく遅いIT部門にお願いしてコンバージョンページに実装してもらったのに、改めてAppWeb用に別のデータレイヤーを追加してなんてお願いしたら時間が掛かります。
そもそも全く同じ用途のデータレイヤーを別途追加で実装するなんて冗長すぎてダサい事この上ないでしょう。
そんな時は既存のリソースを有効に活用するためにデータレイヤーを変換して使いましょう。
弊社ではGoogleAnalytics/AdobeAnalyticsなどの各Martechツールの導入実装コンサルティングサービスや、GCP/AWSなどのパブリッククラウドを使ったデータ分析基盤構築コンサルティングサービスを提供しております。
お問い合わせはこちらからどうぞ。
















