ネットショップ通販

カラーミーショップ（shop-pro.jp）にグーグルアナリティクスを設定し、ｅコマース機能を使えるようにする設定方法

2015.07.13
この記事は約10分で読めます。

カラーミーショップカラーミーショップというネットショップ構築ツールを使って通販サイトを作ることができる。割と安価に独自ドメインのネットショップを運営できるためこれまでに多くの利用者がいた。最近では無料のネットショップ構築ができるWEBサービスが増えてきたが、無料のネットショップでは独自ドメインで運営できないため、今でもカラーミーショップは独自ドメインで運営できるネット通販サイト構築サービスとして人気がある。
ただし、カラーミーショップは標準のままでは、グーグルアナリティクスのｅコマース設定ができなかったり、クレジットカード決済ができなかったりと弱点がいくつかある。そこで、ここではグーグルアナリティクスのｅコマース設定を使えるような設定にするこ方法を説明する。

カラーミーショップ（shop-pro.jp）

カラーミーショップのサービス内容は料金体系により違う

カラーミーショップはサービス内容により料金体系が異なる。

プラン名 月額料金 独自ドメイン設定 GoogleAnalytics設定
ライト 900円～ 設定不可 不可
スタンダード 1332円～ 可能 可能（eコマース設定不可）
ギガプラン 3240円 可能 可能（eコマース設定も可能）
デラックスプラン 7800円 可能 可能（eコマース設定も可能）

※価格表はhttp://shop-pro.jp/?mode=chargeから参照、2015年7月13日現在のもの

カラーミーショップで構築した通販サイトにグーグルアナリティクスを設定する

カラーミーショップのオンラインマニュアルに「Google Analytics eコマース設定」の方法が説明されている。ただし、これはカラーミーショップのスタンダードでは設定ができず、「ギガプラン」か「デラックスプラン」にバージョンアップしなければならない。これまで相談を受けてきたカラーミーショップ運営者は圧倒的にスタンダードコースの契約者が多く、アクセス解析のためだけにバージョンアップをすることを受け入れてくれる例はほとんどなかった。

そこで、以下の設定は、「カラーミーショップのスタンダードコースでGoogleAnalyticsを設定し、限定的であるがｅコマース機能を使えるようにするため」に絞った説明である。

※ギガプランかデラックスプランを利用している場合は「https://shop-pro.jp/manual/ga_config」にて解説がされているのでそのとおりに設定するとよい。

トラッキングコードを取得しカスタマイズする

GoogleAnalyticsのトラッキングコードをカスタマイズする。ここではAnalyticsの初期設定の説明は省力して、ユニバーサルトラッキングコードが取得できたところから説明を始める。
Analyticsのユニバーサルトラッキングコード

上記の画像でトラッキングコードのIDは「UA-1080502-2」である。このIDは「UA-********-1」というように「UA-」と「7桁以上の数字」と「-1（枝番）」で構成されている。以下トラッキングコードのIDを「UA-********-1」として説明する。
ユニバーサルトラッキングコードは以下のようになっているはずだ。

<script>
(function(i,s,o,g,r,a,m){i[‘GoogleAnalyticsObject’]=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,’script’,’//www.google-analytics.com/analytics.js’,’ga’);

ga(‘create’, ‘UA-********-1’, ‘auto’);
ga(‘send’, ‘pageview’);

</script>

このトラッキングコードに「ga(‘require’, ‘displayfeatures’);」という一行を追加するカスタマイズを行う。この一行を追加するとアクセス解析で、年齢や性別などの属性の分析もできるようになるからである。
追加するとトラッキングコードは次のようになる。

▼カスタマイズ後のユニバーサルトラッキングコード

<script>
(function(i,s,o,g,r,a,m){i[‘GoogleAnalyticsObject’]=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,’script’,’//www.google-analytics.com/analytics.js’,’ga’);

ga(‘create’, ‘UA-********-1’, ‘auto’);
ga(‘require’, ‘displayfeatures’);
ga(‘send’, ‘pageview’);

</script>

このトラッキングコードを使う。

カラーミーショップの設定画面で<head></head>内にトラッキングコードを貼る

カラーミーショップの管理画面に「https://admin.shop-pro.jp/」からログインする。IDとPWがわかればログインできるはずである。ログインできたら、ヘッダーメニューの「集客」をクリックし、さらに左のメニューの下部にある「検索エンジン対策」をクリックする。

カラーミーショップの管理画面

検索エンジン対策を開くと、ヘッダ内に貼り付けできるスペースが用意されているので、さきほど用意したトラッキングコードをはりつける。

カラーミーショップでトラッキングコードを貼り付ける

更新をクリックすれば、これでトラッキングコードの設定は終了。
設定がうまくできていればグーグルアナリティクスでアクセス解析ができるようになっているはずである。

トラッキングコードがうまく設定できたかどうかを確認する

その確認をするには、「リアルタイム」のサマリーを見るといい。うまく設定ができていれば、「現在１人のアクティブユーザーがサイトを訪問しています」と表示されるはずである。このとき、自分のネットショップをブラウザで開いておく。「１人のアクティブユーザー」とは少なくとも自分が閲覧していることを表す。もし他の人も同時に閲覧していれば、１人ではなく２人とか３人になるはずである。とにかくこの表示が０人でなく１人以上なら、Analyticsの設定はうまくできたはずである。

realtimeanlytics.jpg

ｅコマースの設定を行う

続けてｅコマースの設定を行う。Analyticsのeコマース設定を行うと、ネットショップでの購買状況をAnalyticsの管理画面で分析することができるようになる。このｅコマース機能をサポートしているギガプラン以上なら、商品名や販売金額も管理できるようになるはずである。

ここで説明する方法は、カラーミーショップのスタンダードでの設定方法なので、eコマースの設定は機能が限定される。商品名は固定で販売金額は平均単価しか設定できない。それでは満足できないという方はギガプラン以上にコース変更するしかない。

しかし、平均単価であっても購買が起きたときにアクセス解析でｅコマース分析ができることのメリットはとても大きい。まずはこの方法で設定を行ってみてはどうだろう。

カラーミーショップの上部メニューの「ツール」から「コンバージョンタグ設定」をクリックすると、コンバージョンタグを貼り付けることができる画面がでる。ここは、買い物が完了した場合にだけ計測するタグを貼り付けるところである。本来はリスティング広告の成果測定をするために使うところであるが、この機能を応用して活用する。

カラーミーショップのコンバージョンタグ

▼貼り付けるコンバージョンタグ

<script>
(function(i,s,o,g,r,a,m){i[‘GoogleAnalyticsObject’]=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,’script’,’//www.google-analytics.com/analytics.js’,’ga’);

ga(‘create’, ”UA-********-1′, ‘auto’,{‘allowLinker’:true});
ga(‘require’, ‘linker’);
ga(‘linker:autoLink’, [‘********.com’,’shop-pro.jp’]);
ga(‘send’, ‘pageview’);

</script>

<script>
ga(‘require’, ‘ecommerce’, ‘ecommerce.js’);

ga(‘ecommerce:addTransaction’, {
‘id’: ‘shop’, // transaction ID – required
‘affiliation’: ‘domodomostore’, // affiliation or store name
‘revenue’: ‘5000’, // total – required
‘shipping’: ‘0’, // tax
‘tax’: ‘0’, // shipping
‘currency’: ‘JPY’ // currency code
});

ga(‘ecommerce:addItem’, {
‘id’: ‘0001’, // transaction ID – required
‘name’: ‘shop’, // product name
‘sku’: ‘goods’, // SKU/code – required
‘category’: ‘shopping’, // category or variation
‘price’: ‘5000’, // unit price – required
‘quantity’: ‘1’, // quantity – required
‘currency’: ‘JPY’ // currency code
});

ga(‘ecommerce:send’);
</script>

このコンバージョンタグはユニバーサルたトラッキングコードに対応させており、さらにカスタマイズ可能である。
上記のトラッキングコードでは、商品名は「shop」で単価は「5000円」という平均単価に設定されている。

さらにカラーミーショップのマニュアル「https://shop-pro.jp/manual/ga_config」には以下の様な説明がある。

■ ユニバーサル アナリティクス（analytics.js）を使用している場合

  1. クロスドメインでデータを渡すようにする設定をします。
    この設定は、独自ドメインでショップを運営している場合にのみ必要です。
    以下のコードを【商品詳細HTML】の最後に追加します。
    <script type="text/javascript">
ga('require', 'linker');
ga('linker:autoLink', ['shop-pro.jp'], false, true);
</script>
  2. 次に、参照トラフィックから自己ドメインを除外する設定をします。
    Google Analyticsログイン後、メニューの「アナリティクス設定」をクリックし「トラッキング情報」をクリックします。
    すぐ下にサブメニューが開くので 「参照元除外リスト」をクリックします。
    表示された画面で、「shop-pro.jp」を追加します。

参照トラフィックから自己ドメインを除外する設定は独自ドメインを使っている場合のみ。あるネットショップでは以下の様な設定画面になった。

gafiltersetting.jpg

うまくフィルタできていそうなので保存して設定を完了する。

なお、このコンバージョンタグにAnalyticsのeコマース設定を行なうのはスタンダードの場合のみ有効である。ギガプランやデラックスプランの場合はeコマースの設定ができるようになっているため、カラーミーショップのマニュアルに従って設定すること。また、ギガプラン以上にバージョンアップした場合は、コンバージョンタグに設定してあるトラッキングコードをはずさないと誤動作するので注意。