Google Analytics

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つのイベントしか対象にしてません。
全部書くとメンドクサイのと、カート削除とか返品とか計測してもイチイチ見ないというケースが多く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. 最速で理解したい人のためのIT用語集

関連記事

  1. プログラミング

    Node.jsでCSVファイル内のダブルクオートで囲まれたカラム内のカンマを除去する

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

  2. Adobe Analytics

    Adobe Analytics:セグメントの落とし穴:意図しないデータが混ざる①

    Adobe Analyticsの便利な機能のセグメント。便利なのですが…

  3. Google Analytics

    Google Tag Manager上でGoogle AnalyticsのclientIDを取得する…

    2018/4/20追記:この記事の内容は古いので、下記の新しい記事…

  4. Web解析

    コラム:Web解析から顧客体験分析(CXA)に

    こんにちは。CEOの原田です。今日は少し普段と経路の違う話を書いて…

  5. Google Analytics

    Google Analytics StandardのデータをBigQueryで分析するための力技

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

  6. Excel

    Google Analytics URLクエリパラメータ 簡単削除方法

    今回は前回紹介したクエリパラメータを削除する方法に続いて、Excelを…

最近の記事

  1. 忘年会シーズンに「DCRごっこ」のご提案
  2. タグ監査ツールとは? 〜〜出来ることと導入のメリット〜〜
  3. 実はSEO以上の効果がある!?Webサイトの「監査」とは?
  4. Vertex AIのベクトル検索によってブログの検索エンジン…
  5. Google Cloud iPaaS 「Applicatio…
  1. Snowflake

    Snowflakeとは?Data Cloud World Tour から見る20…
  2. IT用語集

    プラットフォーム(Platform)って何?
  3. Mouseflow

    【Tips】mouseflowを使ってたった5分でコンバージョン率を上げる方法
  4. Adobe Analytics

    はじめてのAdobe Analytics実装②
  5. Adobe Summit

    Adobe Summit 2019 レポート
PAGE TOP