welcartにGoogleアナリティクス導入／eコマース計測／コンバージョン設定を導入する方法

今回は、Welcart（ウェルカート）にGoogleアナリティクスを設定・導入する手順について解説します。

Welcartの売上やアクセスをGoogleアナリティクスで分析したい！と思った時に、どうやって導入するの？導入したけど上手く動かないときの参考になればと思います。

[aside type="normal"]

ちなみに、Welcartとは、WordpressにECサイト機能を実装するプラグインで、日本初のWordPress専用のショッピングカートです。現在28,000以上のサイトで稼働中とのこと（2021年現在）。オープンソースということで、無料で利用できるのが何よりも魅力、かつ自由にオリジナル機能の開発やカスタマイズが可能です。

[/aside]

試行錯誤したので、基本～応用まで書きました。まずは、シンプルな導入からです。

Googleアナリティクスを新規作成する

まずは、Google Analyticsを作成します。下記のリンクからアクセスしてデータを貯める箱を作成してください。

Googleアナリティクスにアクセスする
analytics.google.com/analytics/web/

作成する際には、GA4（新しいアナリティクス）ではなく、ユニバーサルアナリティクスのプロパティを作成してください。でないと計測する難易度があがります。プラグインが利用しづらくなります。

（なお、ユニバーサルアナティクスアナリティクスは、詳細オプションを選択すると出てきます）

ビューまで作成したら、ビューでeコマーストラッキングを有効します。

あと、ビュー名に「サイト独自の名前」を設定すると後々便利です。

これでアナリティクスの開設は完了です。

MonsterInsightsプラグインを導入する

続いて、Wordpress側（Welcart側）にアナリティクスのタグを設定します。

公式で推奨している「Monster Insights （モンスターインサイツ）」にて導入します。

プラグインから「MonsterInsights」で検索してインストールします。

「有効化」します。

はじめにウィザードが表示されますので、画面に従って設定していきます。
（英語ですが、雰囲気でなんとなく進めることができます）

Googleアナリティクスのビュー選択画面では、前の手順で作成したビューを選択します。

モンスターインサイツの設定が完了しましたら、アクセスデータが上がってくるか確認してください。リアルタイムレポート＞コンテンツにデータが計測されていることを確認することができます。

アナリティクスタグの設置が正常だと、アナリティクスのリアルタイムレポートにて、ページデータが上がってきます。

ここで注意は、WordPressの管理者、編集者はデフォルトで計測されないような仕様になっていますので、Chromeのシークレットモードなどでアクセスしてみてください（Ctrl + Shift + Nキー）

これで基本設定は完了です。

ここから応用設定で計測できなかった場合に確認ください。

応用：eコマース計測ができない → テンプレートにコードを実装する

eコマース計測が上記の設定で計測されない場合があります。
（過去、対応したサイトでは実際に上がってきませんでした）

そこで、Wordpressのテーマファイル（テンプレートファイル）にアナリティクスのコードを直で実装（設置）します。

コードは、デフォルトのタグではなく、カスタマイズして設置が必要ですので、コード修正に不慣れな方は厳しいかもしれません。

テーマヘッダーに gtag.jsの基本タグを設置します。この部分はシンプルですので割愛しあます。

続いて、注文完了のテンプレートファイルに、eコマーストラッキングコードを設置します。カスタマイズが必要で、粗いですがサンプルのコードを貼り付けておきます。


$sesdata = $usces->cart->get_entry();
$order_id = $sesdata['order']['ID'];
$data = $usces->get_order_data($order_id, 'direct');

$addtrans = "";
$addtrans .=  "var ga_items = [];\n";

// 商品データ
for( $i=0; $i<count($cart); $i++ ){ $cart_row = $cart[$i]; $post_id = $cart_row['post_id']; $sku = urldecode($cart_row['sku']); $quantity = $cart_row['quantity']; $itemName = $usces->getItemName($post_id);
  $skuPrice = $cart_row['price'];
  $categories = get_the_category($post_id);
  
  $addtrans .= "ga_items.push({
    'id': '". $sku ."',
    'name': '". $itemName."',
    'category': '". $categories[0]->cat_name."',
    'quantity': ". $quantity.",
    'price': '". $skuPrice."'});\n";
}

$usepoint = ( isset($sesdata['order']['usedpoint']) ) ? $sesdata['order']['usedpoint'] : '0';
$total_price = $sesdata['order']['total_items_price'] + $sesdata['order']['discount'] - $usepoint;

// 注文データ

$addtrans .= "gtag('event', 'purchase', {
'transaction_id': '". $order_id ."',
'affiliation': '". get_option('blogname') ."',
'value': ". $total_price .",
'currency': 'JPY',
'tax': ". $data['order_tax'] .",
'shipping': ". $data['order_shipping_charge'] .",
'items': ga_items});";

echo $addtrans;

実装後は、Chromeの拡張機能「Google Analytics Debugger」など使って動作確認しながら実装してください。デバッグは、コンソールにて、アナリティクスの送信ログが出力されますので、eコマース情報が送信されているか確認できます。

Google Analytics Debugger

chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna

余談ですが、この部分を私が対応したときに、元々の制作会社にてオリジナルのカスタマイズが加わっていたのか、もしくはコードが少し古かったのか、2日間くらい試行錯誤してめちゃくちゃ苦労しました。