Google Analytics

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

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

Twitter: @exturekwon

最近弊社でも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.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などのパブリッククラウドを使ったデータ分析基盤構築コンサルティングサービスを提供しております。
お問い合わせはこちらからどうぞ。

 

関連記事

  1. Google BigQuery

    Google Apps Scriptを使ってスプレッドシートからBigQueryのテーブルを更新する…

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

  2. Amazon Web Services

    Databricks Community Editionを使ってApache Sparkを無料で学ぶ…

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

  3. Adobe Dynamic Tag Manager

    Tag Manager: Adobe DTM で Google Analytics (gtag.js…

    こんにちは、エクスチュアCTOの権です。Twitter:@ex…

  4. Adobe Analytics

    Adobe Analytics:自動で分析してくれる貢献度分析(異常値検出)機能

    こんにちは、CEOの原田です。今回は随分前から公開されてるのに…

  5. Adobe Analytics

    AdobeAnalyticsでReactNativeアプリを計測する

    この記事は2018年12月7日現在の情報を元にしているのと、レガシーA…

  6. Adobe Analytics

    Adobe Analyticsに入り切らないデータをBigQueryに投入する

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

最近の記事

  1. Google Analytics 4 + BigQueryで…
  2. Google Analytics 360: BigQuery…
  3. Google Analytics: ユニバーサルアナリティク…
  4. Server-side GTMのAppEngine設定をカス…
  5. Cloud FunctionsとOpenWeather AP…
  1. Google Analytics

    Google Tag Manager上でGoogle Analyticsのcli…
  2. Adobe Experience Cloud

    Adobe Summit 2020レポート: Welcome
  3. Mouseflow

    Mouseflow:検索の仕様
  4. Google BigQuery

    Big QueryでWindow関数を用いて、累積和を計算する
  5. Google Analytics

    Cloud FunctionsとOpenWeather APIを使ってGoogl…
PAGE TOP