2020年8月末、遂にGoogleアナリティクスのGA4プロパティ（旧称：App+Webプロパティ）でもeコマースレポートが実装されました。
Digital Debrief – New Ecommerce Setup and Reporting in Google Analytics App+Web
早速データを送りたいところですが微妙にキーの名前が変わっていたり、今までスラッシュ区切りで実装すれば良かったカテゴリ情報が「category,category2,category3,…」のように分かれていたりするので
「既存のサイトに実装されている拡張ecommerce用のdataLayerを今すぐ全部書き換えるのはチョット…」という方向けに変換コードを作成しました。
Universal Analyticsの商品スコープのカスタムディメンションの情報をitem_variantに入れる等のアレンジもこのコードの一部を編集することで簡単にできます。
ご活用いただければ幸いです。
変数：cjs - ecommerceProducts
dataLayerに出力されたecommerceオブジェクトのproducts配列を取得する変数設定。
GTMのカスタムJavaScript変数のコードとして利用します。
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変数のコードとして利用します。
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}}
キーの置換動作
| 従来型の拡張eコマースのキー | 対応するApp+Webプロパティのキー | 説明 |
|---|---|---|
| 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配列
[{
'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配列
[{
'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'
}]