そういえばと思って。
導入の理解とか
WEBサイトにアナリティクスを設定するのはもはや当然のことで、導入はWEB初心者でもなければ既知の範疇だと思う。サイト内の各ページにアナリティクスのタグを仕込めばページ表示時にカウントしてくれる。WPみたいにテーマ形式の組み方であれば<head>部分を一括で作れるから仕込む手間も全然ないし、WPみたいにプラグインとかで賄えたりもする。
で、購入情報のどうのこうのはこれだけでは計測できない。何を買って価格はいくらで、とかを取得できるように設定しなきゃいけない。基本的にEC側にその用意はないしアナリティクスも連携のなんやかんやが必要になる。なので、自分で組み込まなきゃいけない。
GA4はイベントをベースに色々を計測する。いろんなタイミングでのトリガーが用意されているので、一旦目を通す。
で、今回のゴールを定める。とりあえず購入情報が入ればいいので、イベント「purchase」に関わる設定をやっていくことになる。
イベントといっても「クリック時」ではなく「表示時」でやっていけるので、だから「購入確定をクリックしたとき」ではなく「購入完了ページを表示したとき」がタイミングになる。なので、購入完了ページにイベントやら購入の内訳を並べていけば良い、ということになる。
Googleタグマネージャーの存在
ややこしいのがGTM。アナリティクスだけじゃ購入関連のデータを引っ張れないっぽい。GTMで整えてアナリティクスに流し込む、みたいな感じになる。
- ページにGTMのタグを仕込む
- GTMにアナリティクス（GA4）を連携する
- GTMで購入イベントを取得できるように設定する
計測周りをこれから始める人は、機能だけで見ると回りくどいけど、GTMから勉強するのが良いと思う。GTMにアナリティクスを連携させてしまえばWEBサイトにはGTMタグだけ仕込めば良く、だからGTMで一元管理できて便利ですね、ってことになる。アナリティクスから始めると、アナリティクスの機能なのにGTMを噛ませないと使えないやつがある、ってことでモヤモヤすることになる。現にしてる。
WPにおいてはSite Kit by GoogleがアナリティクスとGTMを個別に紐づけてるもんで、どういうことだよって感じに。サービス同士を連携させていても、それぞれをWEBページに設置して問題は無いっぽいんで良いんだけど。
とにかく、GTMは必須。
全体の作業
- 購入完了ページにGTMタグを仕込む
- 購入完了ページにイベント「purchase」周りの情報を仕込む
- GTMとアナリティクスを連携する
- GTMでイベント「purchase」周りの情報を取得できるようにする
タグを設置して終わり、にならないのがしんどい。
具体的なところはここの記事がとてもわかりやすかった。
ちゃんと読めばこの記事だけで良いんだけどたどり着くまでがしんどかった。どの記事でもいってることは同じではあるんだけど、事前知識がないと分かりにくい。これはよくわからない状態でもなんとかなった。
テスト計測について
仕込みが済んだら動作テストをする。
はじめてやる場合、本番環境での動作確認の前にそもそも導入しようとしている内容が合っているか確認したい気持ちがある。テスト購入の段取り自体もめんどくさいし。
GTMやらアナリティクスを設定したドメイン下で、テストページを作る。
購入完了ページに仕込むdataLayerを入れておいてブラウザで表示すれば、購入完了ページの動作を擬似的に再現できる。
purchase周りだとこんなかんじ。
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
event: "purchase",
ecommerce: {
transaction_id: "T12345",
affiliation: "Online Store",
value: "59.89",
tax: "4.90",
shipping: "5.99",
currency: "EUR",
coupon: "SUMMER_SALE",
items: [{
item_name: "Triblend Android T-Shirt",
item_id: "12345",
price: "15.25",
item_brand: "Google",
item_category: "Apparel",
item_variant: "Gray",
quantity: 1
}, {
item_name: "Donut Friday Scented T-Shirt",
item_id: "67890",
price: 33.75,
item_brand: "Google",
item_category: "Apparel",
item_variant: "Black",
quantity: 1
}]
}
});
</script>Googleが提示してるサンプルそのままの内容。purchase以外のやつもある。
GTMも読ませないと意味ないので、全体的にはこんな感じになる。
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-*******');</script>
<!-- End Google Tag Manager -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
event: "purchase",
ecommerce: {
transaction_id: "T12345",
affiliation: "Online Store",
value: "59.89",
tax: "4.90",
shipping: "5.99",
currency: "EUR",
coupon: "SUMMER_SALE",
items: [{
item_name: "Triblend Android T-Shirt",
item_id: "12345",
price: "15.25",
item_brand: "Google",
item_category: "Apparel",
item_variant: "Gray",
quantity: 1
}, {
item_name: "Donut Friday Scented T-Shirt",
item_id: "67890",
price: 33.75,
item_brand: "Google",
item_category: "Apparel",
item_variant: "Black",
quantity: 1
}]
}
});
</script>
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-*******"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
test.html
</body>
</html>作ったページをサーバーにアップして、GTMのプレビューで表示する。
で、GTM上のプレビューで分かると言えば分かるんだけど、これがアナリティクスでちゃんと動作してるかってのは分からない。リアルタイムじゃ反映しないっぽいんで、一日待ってみるしかない。
ECCube2への設置
やっと本題。
検証環境がないので調べ物と想像の産物。
プラグイン
まず、プラグインの有無。
見たところ、それらしいものは2系の一部に対してある。
無くはないということで、実際問題としては使えない。
GAはUAだけでGA4はカバーしてないっぽいし、GTMも2系の一部だけサポートだから中途半端な感じ。
自作するしかない
GTMのタグ自体はテーマファイルに組み込めばいいので問題にならない。
ネックとなる購入情報は動的なものなので、ECCubeのシステムを活用して生成する必要がある。
参考記事はこのあたり。
出力すべき内容はこんな感じ
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
event: "purchase",
ecommerce: {
transaction_id: "T12345", //受注番号
affiliation: "Online Store", //ストア名
value: "59.89", //総額
tax: "4.90", //消費税
shipping: "5.99", //送料
currency: "JPY", //通貨
coupon: "SUMMER_SALE", //クーポン名
items: [{
item_name: "Triblend Android T-Shirt", //商品名
item_id: "12345", //商品ID
price: "15.25", //価格
item_brand: "Google", //ブランド名
item_category: "Apparel", //カテゴリ名
item_variant: "Gray", //バリエーション
quantity: 1 //個数
}]
}
});
</script>商品が増えたらこうなる
items: [{
item_name: "Triblend Android T-Shirt", //商品名
item_id: "12345", //商品ID
price: "15.25", //価格
item_brand: "Google", //ブランド名
item_category: "Apparel", //カテゴリ名
item_variant: "Gray", //バリエーション
quantity: 1 //個数
}, {
item_name: "Donut Friday Scented T-Shirt",
item_id: "67890",
price: 33.75,
item_brand: "Google",
item_category: "Apparel",
item_variant: "Black",
quantity: 1
}]itemsはループで組むことになる。
で、こうなる。
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
event: "purchase",
ecommerce: {
transaction_id: "<!--{$orderData.order_id}-->", //受注番号
affiliation: "", //ストア名
value: "<!--{$orderData.total}-->", //総額
tax: "<!--{$orderData.tax}-->", //消費税
shipping: "<!--{$orderData.deliv_fee}-->", //送料
currency: "JPY", //通貨
coupon: "", //クーポン名
items: [
<!--{section name=cnt loop=$orderDataDetail}-->
<!--{if $smarty.section.cnt.first}-->
{
<!--{else}-->
}, {
<!--{/if}-->
item_name: "<!--{$orderDataDetail[cnt].product_name}-->", //商品名
item_id: "<!--{$orderDataDetail[cnt].product_code}-->", //商品ID
price: "<!--{$orderDataDetail[cnt].price}-->", //価格
item_brand: "", //ブランド名
item_category: "<!--{$orderDataDetail[cnt].cat}-->", //カテゴリ名
item_variant: "", //バリエーション
quantity: "<!--{$orderDataDetail[cnt].quantity}-->" //個数
<!--{/section}-->
}
]
}
});
</script>参考記事から構成を変更した。
LC_Page_Shopping_Complete_Ex.php周りはそのままその通りで、購入完了ページ内に書き込む部分だけGA4に最適化。
クーポン、ブランドは元々ないので空欄、affiliationはベタ打ちでなくとも会社概要の応用ができたらタグで賄えそうだし、バリエーションについては規格をはめ込めば良さそう。
自分の環境は2.11なので、これの流用じゃ動かないかもしれない。
動作的なもんを考えると注文確認画面のおかわりをするだけと言えばそうだし、受注IDを引っ張ることができたら中身を展開すれば良いわけで、メールテンプレートの応用でもいけそうな気がする。
導入後の手間の話
アナリティクスで売上が見れる！といえばそうだけど、キャンセルがあったり後で変更があった場合の増減は当然ながら反映されないわけで、運用的に見れば微妙な機能にも見える。変動のすべてをユーザーが行える、ホットラインから運営が直接数字を動かさない前提であれば、しっかり作り込めばなんとかなるのかなって思ったり。諸々全てをカバーするのは大変なので、だったらショップ側の集計機能を見たらそれでよくね？って思っちゃったりする。まあそれも流入元が追えないのでなんなんだけど。
何かしらに目を瞑らなきゃいけないような。
コメント