エクスチュア株式会社ブログ

こんにちは、エクスチュアの權泳東(権泳東/コン・ヨンドン)です。

最近弊社でも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つのイベントしか対象にしてません。
全部書くとメンドクサイのと、カート削除とか返品とか計測してもイチイチ見ないというケースが多くｗ、この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.items に商品が入っている

これと同様に、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変数を全て作ったら、次は「アプリ＋ウェブイベント」を作って行きます。

例えば購入完了のイベントはこうなります。

AppWebプロパティで購入完了イベント

トリガーはそれぞれカスタムイベントをview_item, add_to_cart, begin_checkout, purchaseで作っておいて、それを使えばOKです。

動作確認

さて、プレビューモードでビーコンのペイロードをCharlesなどのツールで確認しましょう。

まずは拡張Eコマースのペイロードはこうです。

拡張Eコマースのペイロード

これはもう見慣れたいつものペイロードですね。

続いて、AppWebプロパティのEコマースペイロードはこうなります。

AppWebプロパティのEコマースペイロード

itemsに入れた情報はpr1, pr2,… というパラメータにまとまって入る事が分かりました。

TL;DR

既にデータレイヤーを無能でとにかく遅いIT部門にお願いしてコンバージョンページに実装してもらったのに、改めてAppWeb用に別のデータレイヤーを追加してなんてお願いしたら時間が掛かります。
そもそも全く同じ用途のデータレイヤーを別途追加で実装するなんて冗長すぎてダサい事この上ないでしょう。

そんな時は既存のリソースを有効に活用するためにデータレイヤーを変換して使いましょう。

弊社ではGoogleAnalytics/AdobeAnalyticsなどの各Martechツールの導入実装コンサルティングサービスや、GCP/AWSなどのパブリッククラウドを使ったデータ分析基盤構築コンサルティングサービスを提供しております。
お問い合わせはこちらからどうぞ。