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. Excel

    コホート分析(Cohort Analysis)って何?〜Tableau/GA/Excel/Sprea…

    はじめにさぁ、ようやく皆さんお待ちかねの「コホート分析」です。我々…

  2. Google Tag Manager

    同一サイトにGTMを複数導入する危険性について

    こんにちは。エクスチュアの岩川です。今回は何度か質問をいただ…

  3. Google Analytics

    Google Analytics クエリパラメータ除外方法

    今回はGoogle Analyticsでクエリパラメータ(URLパラメ…

  4. Adobe Analytics

    AA + GA : SafariのITP2.1に備えてphpでクッキーを永続化する

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

  5. Databricks

    Databricksを始める前に覚えておきたいScalaプログラミングの基本

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

  6. Google Analytics

    Google Analyticsの「セグメント」機能について

    こんにちは!インターン生の宮川です。本日はGoogle Analyt…

最近の記事

  1. Snowflakeや最新データ基盤が広義のマーケティングにも…
  2. 回帰分析はかく語りき Part3 ロジスティック回帰
  3. GCSへのSnowflake Open Catalogによる…
  4. VPC Service Controlsで「NO_MATCH…
  5. モダンデータスタックなワークフローオーケストレーションツール…
  1. Mouseflow

    Mouseflow:ヒートマップ表示の仕様
  2. IT用語集

    インターフェイス(Interface)って何?
  3. IT用語集

    DTM(Dynamic Tag Manager)って何?
  4. GA 360 Suite

    GoogleDataStudio:GoogleAnalyticsのカスタムチャネ…
  5. KARTE

    KARTE:最低限!KARTEの運用管理のためにやっておくこと!
PAGE TOP