従来の拡張eコマース向けに実装された商品情報をGA4向けに変換する

2020年8月末、遂にGoogleアナリティクスのGA4プロパティ（旧称：App+Webプロパティ）でもeコマースレポートが実装されました。
[Digital Debrief – New Ecommerce Setup and Reporting in Google Analytics App+Web](https://www.kristaseiden.com/new-ecommerce-setup-and-reporting-in-google-analytics-appweb/)

早速データを送りたいところですが微妙にキーの名前が変わっていたり、今までスラッシュ区切りで実装すれば良かったカテゴリ情報が「`category`,`category2`,`category3`,…」のように分かれていたりするので
「既存のサイトに実装されている拡張ecommerce用のdataLayerを今すぐ全部書き換えるのはチョット…」という方向けに変換コードを作成しました。
Universal Analyticsの商品スコープのカスタムディメンションの情報をitem_variantに入れる等のアレンジもこのコードの一部を編集することで簡単にできます。
ご活用いただければ幸いです。

## 変数：cjs - ecommerceProducts
dataLayerに出力されたecommerceオブジェクトのproducts配列を取得する変数設定。
GTMのカスタムJavaScript変数のコードとして利用します。

```js
function(){
  var action = ['click', 'detail', 'add','remove', 'checkout', 'checkout_option', 'purchase', 'refund', 'promo_click', 'select_content', 'view_item', 'add_to_cart', 'remove_from_cart', 'begin_checkout', 'set_checkout_option', 'view_refund'];
  var dl = window.dataLayer.slice();
  for(var i = dl.length-1; i>=0; i--){
    for(var j = 0; j<action.length; j++){
      if(dl[i].hasOwnProperty('ecommerce') && dl[i].ecommerce.hasOwnProperty(action[j]) && dl[i]['ecommerce'][action[j]].hasOwnProperty('products')){
        return JSON.parse(JSON.stringify(dl[i]['ecommerce'][action[j]]['products']));
      }
    }
  }
  return [];
}
```


## 変数：cjs - ecommerceProducts for GA4
Googleアナリティクス用に実装されている`products`配列をGA4用に変換する変数設定。

- itemKeyNames配列の'target'で指定したキー名を`products`配列から探し、キー名を'property'で指定したものに変更した配列を作成します。
- itemKeyNames配列のfuncの関数により、変換時に各キー値を加工します。下記のサンプルコードではpriceとquantityの値を数値型に変換する処理を行っています。
- 各商品の情報に通貨情報 `JPY` を加えています。
- categoryのキーの値を半角スラッシュ記号で分割し、item_category, …, item_catetegory5 に変換します。


itemKeyNames配列で指定されていないキー名は無視されるため必要に応じて書き換えた上、GTMのカスタムJavaScript変数のコードとして利用します。

```js
function() {
  var sourceProducts = {{cjs - ecommerceProducts}};  // 変換元のproducts配列データ
  // GA4タグのitemsプロパティの値として利用したいキーの値と変換先の名前をすべて定義
  var itemKeyNames = [
    {'target':'id','property':'item_id','func': function(value){return value;}},
    {'target':'name','property':'item_name','func': function(value){return value;}},
    {'target':'brand','property':'item_brand','func': function(value){return value;}},
    {'target':'variant','property':'item_variant','func': function(value){return value;}},
    {'target':'price','property':'price','func': function(value){return Number(value);}},
    {'target':'quantity','property':'quantity','func': function(value){return Number(value);}},
    {'target':'coupon','property':'coupon','func': function(value){return value;}},
    {'target':'variant', 'property':'item_variant','func': function(value){return value;}},
  ];
  var product = {}, products = [];
  for (var i = 0; i < sourceProducts.length; i++) {
    product = {};
    for(var j = 0; j < itemKeyNames.length; j++){
      if(sourceProducts[i].hasOwnProperty(itemKeyNames[j].target)){
        product[itemKeyNames[j].property] = itemKeyNames[j].func(sourceProducts[i][itemKeyNames[j].target]);
      }
    }
    product['currency'] = 'JPY'; // 商品単位での通貨情報を追加
    // UA向けのcategory情報をGA4向けににスラッシュ記号で分割して変換(必要ないときは削除)
    if(typeof sourceProducts[i].category !== 'undefined'){
      var catArray = sourceProducts[i].category.split('/');
      for(var j=0; j<catArray.length && j<5; j++){
        var catIndex = j > 0 ? String(j + 1) : '';
          product['item_category' + catIndex] = catArray[j];
      }
    }
    // category情報加工のためのコードここまで（必要ないときは削除）
    products.push(product);
  }
  return products;
}
```

### 利用方法

「cjs - ecommerceProducts for GA4」と「cjs - ecommerceProducts」の2つの変数をGTMに設定、環境に合わせて調整の上、「Googleアナリティクス: GA4イベント」のecommerceイベントを送信するタグのイベントパラメータに以下の設定を追加します。

パラメータ名 : `items` / 値 : {{cjs - ecommerceProducts for GA4}}

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103957/69f42436-580e-61e3-5cb8-e5520cdf806c.png)

### キーの置換動作

|従来型の[拡張eコマース](https://developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce?hl=ja#product-data)のキー|対応する[App+Webプロパティ](https://developers.google.com/analytics/devguides/collection/app-web/ecommerce#product_data)のキー|説明|
|:-----------|:------------|:------------|
|id|item_id|商品 ID や SKU（例: P67890）|
|name|item_name|商品の名前（例: Android の T シャツ）|
|brand|item_brand|商品に関連するブランド（例: Google）|
|variant|item_variant|商品のバリエーション（例: 黒）|
|category|item_category, item_category2, …, item_catetegory5|商品が属するカテゴリ（例: アパレル）|



### 動作例
#### 変換元のproducts配列

```jsonnet
[{
  'id':'0001',
  'name':'T-shirt',
  'brand':'sample',
  'variant':'red',
  'price':1900,
  'quantity':1,
  'coupon':'123456',
  'category':'Apparel/MEN/TOPS'
},{
  'id':'0005',
  'name':'jacket',
  'brand':'sample',
  'variant':'blue',
  'price':2500,
  'quantity':3,
  'category':'Apparel/WOMEN/TOPS/special'
}]
```

#### 変換後のproducts配列

```jsonnet
[{
  'item_id':'0001',
  'item_name':'T-shirt',
  'item_brand':'sample',
  'item_variant':'red',
  'price':1900,
  'currency':'JPY',
  'quantity':1,
  'coupon':'123456',
  'item_category':'Apparel',
  'item_category2':'MEN',
  'item_category3':'TOPS'
},{
  'item_id':'0005',
  'item_name':'jacket',
  'item_brand':'sample',
  'item_variant':'blue',
  'price':2500,
  'currency':'JPY',
  'quantity':3,
  'item_category':'Apparel',
  'item_category2':'WOMEN',
  'item_category3':'TOPS',
  'item_category4':'special'
}]
```



# 参考になるリンク

- [ウェブ向けアナリティクス（analytics.js）  |  Google Developers](https://developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce?hl=ja)
- [e コマース  |  Google Analytics 4 Properties  |  Google Developers](https://developers.google.com/analytics/devguides/collection/app-web/ecommerce#product_data)
- [APP+WEBのeコマース計測をGTMで実装してみる [第一弾：従来の計測仕様と互換性はあるのか？] - アユダンテコラム](https://ayudante.jp/column/2020-06-26/11-00/)
- [APP+WEBのeコマース計測をGTMで実装してみる [第二弾：従来の拡張eコマースのdataLayer仕様でレポーティング] - アユダンテコラム](https://ayudante.jp/column/2020-09-24/11-00/)