Google Analytics: ユニバーサルアナリティクスの拡張Eコマース用dataLayerをApp+Web用のdataLayerに変換するJavascript

ホーム
Google Analytics, Google Analytics 4, Google Tag Manager, Web解析, プログラミング
Google Analytics: ユニバーサルアナリティクスの拡張Eコマース用dataLayerをApp+Web用のdataLayerに変換するJavascript

Google Analytics

2020.09.22

Google Analytics: ユニバーサルアナリティクスの拡張Eコマース用dataLayerをApp+Web用のdataLayerに変換するJavascript

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

最近弊社でも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コマースの各イベントと全く同じタイミングにします。