WoocommarceでA8のコンバージョンコードの設置をしてみた件
Woocommarceでアフィリエイトを利用して商品の販売を伸ばしたい場合コンバージョンコードの設置をおこなって商品のコンバージョンコードを設置する必要があります。
先日、A8を使ってアフィリエイトで販売をしていきたいという要望をいただいて、その設置を対応させていただきました。
既に知見が出ているかな～？と思い「A8 コンバージョンコードの設置」で検索をしてみましたがそうした知見を公開しているサイトがなかったので自分で作って見ました。
企業がコンバージョンコードの設置を有償で対応している場合があって、そうした対応をコンサルしているサイトなどはありますが実際にコードの設置までを記載しているサイトは３ページくらいまで見てもありません。
あと、ECキューブは具体的な記載がありましたがWelcart等はフォーラムで少し触れているくらい。
Woocommarceが案外当たり前になってきたので、そうした知見って公開されていてしかるべきかなと言う事で、掲載をしておきます。
１．子テーマを設置する
Woocommarceのページテンプレートをカスタマイズする必要があるので、子テーマを設置する必要があります。
子テーマについては、作り方は簡単で
適当なフォルダ名をつけて中身としては
style.css
functions.php
の２つを必ず設置する必要があります。
そして、functions.phpには
<?php ob_end_clean();
/**
* テーマ機能追加用の関数
* S-pegasus用
*/
function ******_enqueue_styles() {
wp_enqueue_style( '******-theme-css', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( '******-theme-style',
get_stylesheet_directory_uri() . '**/style.css',
array('******-theme-css')
);
}
add_action( 'wp_enqueue_scripts', '******_enqueue_styles', 10, 1 );として、******_enqueue_stylesについては******は任意の名称として例えばこのサイトであれば、spegasusといった文字列をつけて関数を設定してあげます。
wp_enqueue_style( ‘******-theme-css’, get_template_directory_uri() . ‘/style.css’ );
では親のテーマのスタイル名を******-theme-css読み込んであげます。
******は大抵、テーマの名前なのですし、右クリックの検証やページソースコードの表示から調べる事が出来ます。
大抵、style.cssとなっているか-theme-cssで検索をしてもらえれば確認することができますね。
そして子テーマのstyle.cssには
/* Theme Name: ****** /* これは子テーマの名前 */ Description: ディクリプションは特段書く必要がありませんが、テーマのメモ書きとして書いてあげましょう。オリジナルのテーマなどを作った時にはここに書いてある事が実は一部SEO効果があったりしますが、子テーマでは意味がありません。 Author: evange /* これはテーマを作った人の著者ですね。 */ Author URI: https://s-pegasus.com /* これはテーマを作った人のサイトURLですね。 */ Template: ****** /* ここが1番大切 */ Version: 1.0.0 */ /*-------------------------------------------------------------- */
Theme Name: ******とTemplate: ******の箇所が1番大切でTheme Name:には任意の英字でテーマの名称をつけましょう。
Template:で親テーマのフォルダ名をいれましょう。
取り急ぎ、これで子テーマは完成なのでテーマフォルダーにアップロードしてあげましょう。
２．Woocommarceのページテンプレートをアップロード
/wp-content/themes/＊＊＊＊/woocommerce/
といった具合に＊＊＊＊は子テーマディレクトリです。
この子テーマの中に、woocommerceというフォルダを作ってプラグインのwoocommerceの中にあるtemplatesというフォルダがあるのでその中身をその作成したwoocommerceというフォルダにアップロードしてください。
こんな感じになっています。
必要なページテンプレートをこうしてアップロードしてあげる事で対応が出来ます。
コンバージョンコードの設置はこのorderというフォルダに設置します。
この中にあるorder-details.phpでサンキューページに注文の商品詳細を表示することになりますので、この中に
<span id="a8sales"></span> //statics.a8.net/a8sales/a8sales.js <script> a8sales({ "pid": "s00000000062001", //テスト用ID、後日本番IDに変更するため変更不可 "order_number": "order00023", //注文番号・現行タグの&so=の値を反映してください "currency": "JPY", //通貨コード、JPY/USD/EURが利用可能 "items": [ //以下、現行タグの&si=の値を反映してください { "code": "apple", //商品コード "price": 400, //商品単価 "quantity": 2, //個数 }, { "code": "apple2", //商品コード "price": 500, //商品単価 "quantity": 1, //個数 }, ], "total_price": 1300, //全購入商品の合計金額 }); </script>
を表示する必要があります。
引用：https://document.a8.net/ec/howToSwitch-ja.html
Woocommarceは自動でCookieにトラッキングコードを格納してくれるので、原則は気にする必要はないと思いますが、この辺りはサーバーなどによっても変わってきます。
上記のA8のコンバージョンコードをWoocommarce用にすると
<?php
$order_number = $order->get_order_number();
$product_id = $item_id;
$order_total = $order->get_total();
?>
<span id="a8sales"></span>
<script>
a8sales({
"pid": "＊＊＊＊＊＊＊＊＊＊＊＊＊＊",
"order_number": "order-<?php echo $order_number; ?>-<?php echo $product_id; ?>",
"currency": "JPY",
"items": [
<?php
foreach ( $order_items as $item_id => $item ) {
$product = $item->get_product();
$order_subtotal = $item->get_subtotal();
$order_subtotal = number_format( $order_subtotal, 0 );
$turn_subtotal = str_replace(',','',$order_subtotal);
$order_quantity = $item->get_quantity();
$product_sku = $product->get_sku();
?>
{
"code": "<?php echo $product_sku; ?>",
"price": <?php echo $turn_subtotal; ?>,
"quantity": <?php echo $order_quantity; ?>,
},
<?php } ?>
],
"total_price": <?php echo $order_total; ?>
});
</script>となります。
“pid”: “＊＊＊＊＊＊＊＊＊＊＊＊＊＊”,
についてはA8から発行されたコードを入力します。
設置位置はちょっとこつがあるので商品を呼び出している位置とだけ書いておきます。
また、アフィリエイトの成果をきちんと渡すには商品個別にIDを振って商品を認識させる必要がありますが、これは商品IDだと都合が悪いようなので、SKUを商品事に設定してあげる事で、商品個別IDとして使用することが出来ます。
多言語のサイト・コンバージョンがある場合は、”currency”: “JPY”の部分でWoocommarceの通貨設定を呼び出して自動で変わるようにも出来ます。
また、サイト全体でCookieにトラッキングコードを追加してあげる必要もあるのでサイト全体のヘッダーに
//statics.a8.net/a8sales/a8sales.js
を呼び出してあげる必要もありますので、その辺りもテーマによって対応は異なりますので、各々のテーマで確認して実装してみてください。
なお、私に依頼をいただけましたら有償で37,500円でそのテーマにあった状況で設置対応をさせていただきます。
依頼をいただく際には
