グローバルサイトタグ(gtag.js)でのクロスドメイントラッキングの設定方法を解説!

こんにちは、お久しぶりのワニタでございます。

GoogleがUniversalAnalyticsではなく、グローバルサイトタグを初期状態で提供するようになったことから、

今回は『gtag.jsにおけるクロスドメイントラッキングの設定方法』を解説致します!

【※ご注意】e-shopsカートSではタグマネージャーには非対応です。

おさらい:クロスドメイントラッキングとは?

クロスドメインとは1つのWebサイトの中で、ドメインが2つ以上にまたがっている状態です。

例:ネットショップのドメインが「abc.com」なのに、カートのみ別ドメインのASPサービス(e-shopsカートSも該当)が「def.jp」のため、カゴに商品を入れた瞬間にドメインが変わるケース

↑のような状況って意外に多いと思いますが、クロスドメイントラッキングができていないと、本来は自然検索から来たにもかかわらずドメインをまたぐ際にセッションが切れるため、参照元が「abc.com」になってしまう・・・なんてことになってしまいます。

こうなると、正確に計測出来ない状況に陥ってしまいますので、このような事態を防ぐための「クロスドメイントラッキング」の設定が必要となります。

今回の目次

gtag.jsのクロスドメインのトラッキングコードについて

クロスドメインの設定方法についてご説明していきます。

ワニタの主観ですが、作業してみて難しいことはありませんでしたよ~。

GoogleAnalyticsトラッキングタグの記述変更

GoogleAnalytics管理画面から取得したグローバル サイトタグ(gtag.js)のままでは、計測できないので、以下のようにご変更して下さい。(以下コードのコピー&ペーストは行わないで下さいネ。)

【※ご注意】e-shopsカートSでは以下のようにコメントアウトのご登録が必須です。

初期状態のタグ

<!– Global site tag (gtag.js) – Google Analytics –>
<script async src=”https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-XX”></script>
<script>
 window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments);}
 gtag(‘js’, new Date());
 gtag(‘config’, ‘UA-XXXXXXXX-XX‘);
</script>

上記のコード6行目

gtag(‘config’, ‘UA-XXXXXXXX-XX‘);

の部分を、以下に書き換えます。

変更する部分

gtag(‘config’, ‘UA-XXXXXXXX-XX‘, {
 ‘linker’: {
  ‘domains’: [‘ショップドメイン‘, ‘ec-sites.jp‘]
 }
});

UA-XXXXXXXX-XXはご自身のトラッキングID、ショップドメインにはクロスドメイン対象のドメインに置き換えてください。

参照元の除外

過去のブログ≪UniversalAnalytics対応について≫でもご案内させていただいたことがございますが、画面のデザインが一部変わっていたり、おさらいも兼ねて、改めてご説明します。

【※ワニタ環境での事例となります。】

クロスドメインの対象となるドメインを参照元除外URLとして設定します。

除外するURL:app.ec-sites.jp cart.ec-sites.jp

アナリティクスの設定にて、対象のプロパティのトラッキング情報→参照元除外リストをクリックします。タグの記述を変えただけでは、参照元に別ドメインの自分のサイトのドメインが出てきてしまいますが、参照元除外設定を行う事で、「ユーザーがどこから来たか」を正しく計測できます。

管理>プロパティ>トラッキング情報>参照元除外リストにて、先ほどの2ドメインの除外設定を追加します。

フィルタの追加

フィルタの作成を行なうことで、アナリティクスのレポートの表示やカウントを以下のように識別することができます。

例:「/index.html」 → 「https://abc.com/index.html」

以下の画像をご参考として下さい。

「フィルタを追加」をクリックします。

フィルタ名を入力し、「フィルタの種類」は「カスタム」を選択します。

「詳細」を選択し、以下のように入力します。

フィールドA -> 引用A 選択肢:ホスト名  入力値:(.*)
フィールドB -> 引用B 選択肢:リクエストURl 入力値:(.*)
出力先 -> 構成 選択肢:リクエストURl 入力値:$A1$B1
フィールドAは必須 はい
フィールドBは必須 いいえ
出力フィールドをオーバーライド はい
大文字と小文字を区別 いいえ

特定URLでの計測の除外方法

クロスドメイン用のトラッキングコードをe−shopsカートSの管理画面に登録をすると、e-shopsカートS側で生成する全てのページがトラッキング対象となります。トラッキング対象となるページは以下の様なものがあります。

  • 購入手続き画面
  • マイページ
  • 在庫表ページ
  • レビューページ
  • 特定商取引法のページ

全ての情報をレポートで表示する場合には、必要ありませんが、レポートに含めたくないページなどがあれば以下のように設定します。

例:マイページをレポートから除外する場合

Analyticsの設定にて、以下をクリックします。

続いて「フィルタを追加」をクリックします。

以下画像のように設定します。

フィルタの種類→定義済み 除外
サブディレクトリへのトラフィック 前方が一致
サブディレクトリ PCデザイン
cart.ec-sites.jp/cart_step●/mypage/
(●部はショップ様毎に異なります。)
レスポンシブデザイン
cart.ec-sites.jp/sp_step●/mypage/
(●部はショップ様毎に異なります。)

以上を保存することで、マイページへのアクセスはレポートから除外されます。

e-commerceTrakingの対応について

アナリティクス設定で、「eコマースの設定」をクリックします。

e コマースの有効化を行ないます。下図のように「オン」を選択し「保存」をクリックします。

【※ご注意】e-shopsカートSでは拡張eコマースには非対応となります。

e-shopsカートS側の設定

グローバルサイト用のトラッキングコードを、管理画面「販売管理」>「Google Analytics 設定」にて入力することで、購入完了画面にて、グローバルサイトタグのeコマース用の情報が出力がされるようになっています。特別な作業はありません。

目標設定について

アナリティクス設定で、「目標」をクリックします。

「+新しい目標」をクリックします。

「カスタム」を選択し、「続行」をクリックします。

わかりやすく名前を「購入完了」などとし、「到達ページ」を選択+「続行」をクリックします。

以下の図の様に入力し、「保存」をクリックします。

▼ゼロステップカートの場合

目標到達ページや目標到達プロセスには以下を入力します。(e-shopsカートSのゼロステップカートの場合)

目標の詳細>到達ページ の設定

e-shopsカートSの注文完了画面URLを入力します。

URL入力値(XX部はショップ様毎に異なります。)
先頭が一致 cart.ec-sites.jp/sp_stepXX/sp-pc/pk04/es_shop_id/XXX/

目標の詳細>目標到達プロセス の設定

URL入力値(XX部はショップ様毎に異なります。) 名前の入力
ステップ1 cart.ec-sites.jp/sp_stepXX/static/cart2/es_shop_id/XXX/ 購入者情報入力画面

▼3ステップカートの場合

目標到達プロセスには以下を入力します。(e-shopsカートSの3ステップカートの場合)

目標の詳細>到達ページ の設定

e-shopsカートSの注文完了画面URLを入力します。

URL入力値(XX部はショップ様毎に異なります。)
先頭が一致 cart.ec-sites.jp/cart_stepXX/pc4/pk04/es_shop_id/XXX/

目標の詳細>目標到達プロセス の設定

URL入力値(XX部はショップ様毎に異なります。) 名前の入力
ステップ1 cart.ec-sites.jp/cart_stepXX/pc/kago/es_shop_id/XXX/ カゴの中身画面
ステップ2 cart.ec-sites.jp/cart_stepXX/pc1/pk01/es_shop_id/XXX/ 購入手続きSTEP1
ステップ3 cart.ec-sites.jp/cart_stepXX/pc2/pk02/es_shop_id/XXX/ 購入手続きSTEP2
ステップ4 cart.ec-sites.jp/cart_stepXX/pc3/pk03/es_shop_id/XXX/ 購入手続きSTEP3

以上でクロスドメイントラッキングの設定は完了です。ご参考となれば幸いです♪

QRコード活用術!

みなさん、e-shospカートSの「QRコード機能」はご存知でしょうか。

既にご利用中のショップ様もいらっしゃるやもしれませんが、スマートフォンでQRコードを読み取るだけで、商品を買い物カゴに入れることができる機能になっています。
そのため、チラシや商品パッケージなどの紙媒体に印刷しておけば、わざわざホームページを経由しなくてもすぐにその場で商品をカゴに入れてご注文手続きを行っていただくことが出来ます。また、ホームページ自体のご用意がなくてもOK!QRコードを読み込んだ先のページはカートS側で自動生成されたページになりますので、QRコードだけで簡単に商品の販売が出来てしまうんです!

今回はそのQRコード機能の活用方法についてお伝えしたいと思います♪

(続きを読む…)

サーバアップグレードで検索順位が向上?!

e-shopsカートSでは、2019年4月に実施したメンテナンスにて、今までご提供しておりましたレンタルサーバを「HDD」から高速表示が可能な「SSD」にアップグレードをしました。
そこで、2019年10月31日までレンタルサーバお乗換えキャンペーンを実施しております!

本記事では、キャンペーンのご案内と共にサーバアップグレードのメリットなどについてご紹介いたします♪

「HDD」「SSD」とは?

これまでサーバーのストレージ(記憶装置)といえば、HDD(ハードディスク)を用いるのが一般的でしたが、近年ではSSD搭載のレンタルサーバが増えてきました。

「HDD」とは、Hard Disk Drive(ハードディスクドライブ)の略で、データやプログラムなどを電磁的に読み書きできる記憶装置です。
対して、「SSD」はSolid State Drive(ソリッドステートドライブ)の略で、HDDと同様の記憶装置です。半導体素子メモリを使ったドライブ(記憶媒体)のことを指します。大容量のデータを保管しておく媒体として長年HDDが使われてきましたが、近年、SSDの容量が大きくなってきたこともあり、急速に普及しつつあります。e-shopsカートSにおけるご提供サーバは全てSSDを採用しております。

ディスクタイプ コスト 速度 耐久性 エネルギー効率
HDD 安価 遅い 耐久性が低い 電力消費が多い
SSD 高価 早い 耐久性の向上 電力消費が少ない

ユーザーが待てるのは●秒まで?!

みなさんはネットショッピングや調べ物など、Webサイトやページを閲覧しているときに読み込みが遅くて途中で諦めてしまったり、利用するのを止めてしまったという経験はありますか?
Googleがディープラーニングを用いて算出した予測では、表示速度が1秒から3秒に落ちると、直帰率は32%上昇し、さらに1秒から5秒に落ちると、直帰率はなんと90%に上昇したそうです!
このことからWebサイトから離脱せず閲覧し続けてもらうには、ページの表示を2秒で完了させる必要があるということが分かります。

(引用元:Google/Find out how you stack up to new industry benchmarks for mobile page speed

スマートフォンからのアクセスが多くなった現在では、Googleも検索順位を決めるアルゴリズムの1つとしてページの表示速度をモバイル検索のランキング要素に導入しており、SEO的にも良いとされています。

(続きを読む…)

「ゼロステップカート」で売上アップ!?

e-shopsカートSでは、サービスを開始してから長年、3ステップ(画面移動)を経て合計5つの画面を遷移することで購入が完了する「3ステップカート(旧:PCカゴ)」をご提供しておりましたが、昨今のスマートフォンの普及に伴い、1画面で購入を完了することができる「ゼロステップカート」のご提供を開始しました。

既にゼロステップカートをご利用中のショップ様のいらっしゃることとは存じますが、本日は、ゼロステップカートの魅力や活用方法についてお伝えできたらと思います!

ゼロステップカートとは?

冒頭でもお伝えした通り、ゼロステップカートの大きな特徴は、従来の3ステップカートから大幅に画面数を減らし、1画面で注文完了できるようにしています。

ネットショップを運営されている方であれば、一度は頭を悩ませたことがあるであろうカゴ落ち(カートからの離脱)対策の1つとして、注文完了までのページ遷移数を減らすことでカゴ落ちを減少させ、購入数をアップさせることが期待できます。(ショップや商品によっても効果は異なります)

そして、従来の3ステップカートでは購入者様の操作端末を自動判別してPCあるいはスマートフォン用のカート画面が表示される仕組みでしたが、ゼロステップカートではレスポンシブデザインに対応。また、購入者様の利便性を考え、多くのEFP(入力フォーム最適化)にも対応し、入力完了率を高めてコンバージョンにつながる施しもされています。

今やスマートフォンなどのモバイル端末からお買い物するのは当たり前の時代となっています。ネットショップでの購入において「いつでも」「どこでも」「簡単に」お買い物をできるニーズに対応するためには、ショッピングカートのデザインも時代にあわせて変えていく必要があると言えます。

(続きを読む…)

Googleさんはグローバルサイトタグを推奨?!

こんにちは、ワニタです。

今回はGoogleAnalyticsのトラッキングタグについてです!

はじめに

Google Analyticsでアクセス解析や効果測定を行うのに、必ずタグが必要となることはご存じかと思います。データを取得するために、Webへトラッキングタグを貼り付けすることが必須ですが、Google AnalyticsをはじめとするGoogle社が提供するサービスにおいて、測定のための推奨タグが“グローバルサイトタグ”という新しいバージョンに移行していっているので、e-shopsカートSをご利用いただく上での注意点についてまとめてみました。

e-shopsカートSでは残念ながらグローバルサイトタグに未対応

Googleさんはグローバルサイトタグを推奨しているようで、Google Analyticsのトラッキングタグ取得画面では既に「gtag.js」のトラッキングタグをメインで表示しているご様子です。

しかし、e-shopsカートSでは未だgtag.jsに対応した仕様となっておりません。
申し訳ありません・・・

現状では『UniversalAnalytics(analytics.js)』にて、ご対応をお願いしております。

グローバルタグに対応していないからといって、解析が行なえない!というわけではございませんので、解析可能な実装方法の専用タグについてのご案内ページやヘルプの記載場所などについて、本記事でお伝えしていきたいと思います。

GoogleAnalytics『analytics.js』トラッキングタグ取得までの道

e-shopsカートSでは『UniversalAnalytics』での解析に対応しております。UniversalAnalytics専用のトラッキングタグをご取得のうえクロスドメイン計測を行なうことでしたら可能です。

Google Analyticsのトラッキングタグ取得画面ではグローバルサイトタグがメインで表示されるようですが、UniversalAnalyticsのタグはどこにあるのでしょうか?

探してみました!

Google Analyticsトラッキングタグ取得画面まで進めていくと、以下のように表示されました。

ガッツリ「gtag.js(グローバルサイトタグ)」が表示されていますが、この緑色の枠で囲まれたタグを取得していただいてもe-shopsカートSでは未対応ですのでご設定できません。その下に『他の実装方法』と書かれたところがあり、小さく『analytics.js』のリンクがありました!以前は主流な実装方法だったのに、何だか少しさみしい気分なワニタです。

続きまして・・・

“analytics.jsを使用する”の説明書きに、『デペロッパー向けドキュメント』というまたもや小さなリンクがいました。更にクリックします。

▼クリックしたページ:サイトにanalytics.jsを追加する
https://developers.google.com/analytics/devguides/collection/analyticsjs/

やっと対象の記事に出会えました。これは確かにわかりにくいですね・・・

Webサイトとe-shopsカートSを介したトラッキングを行なうためには、上の画面から取得したトラッキングコードを少し編集し、『クロスドメイントラッキング』を実装することで可能となります!タグの編集については、過去の以下記事をご参考としご対応くださると幸いです!

■過去の記事➜UniversalAnalyticsにおけるクロスドメインのトラッキングについて

(続きを読む…)

Webサイトにおける常時SSL化の重要性

こんにちは。ご無沙汰しております、ワニタです。

ここ数年のトレンド「常時SSL」について、遂にGoogleが本気を出し、全ての非SSL(httpから始まるURLのサイト)に対し、ブラウザのアドレスバーに『保護されていません』と警告ラベルを表示するようになりましたね!

▼Google Chrome 68以降で非SSLサイトにアクセスした時の表示

 ➜ 常時SSLとは?

※Webサイトをまるごとhttps://から始まるURLで公開することです。SSLサイトではデータが暗号化されますので通信データが守られます。

例) 非SSLサイト(http://abc.com) → 常時SSLサイト(https://abc.com)

    常時SSL対応後のメリットのおさらい

  1. ・検索結果で優遇される
  2. ・アクセス解析の精度をUPできる
  3. ・暗号化通信により、セキュリティ対策を強化できる
  4. ・WEBサイトに鍵マークがつき、サイト訪問者様に安全性をアピールできる など

Googleが推奨していることもあり、e-shopsカートSでも積極的に常時SSL化をお薦めしておりますが、警告ラベルの表示について、気になるか、気にならないかは個人差がありますし、もちろん必ず常時SSL対応しなければいけない!というものではありません。

しかし、Webサイトにアクセスし、ページを開いた瞬間から「保護されていません」と表示されたら、離脱せずにそのままお買物してくださる方は、どのくらいいらっしゃるのでしょうか???
なんだか、不安を与えてしまうことに間違いなさそうです。

更にGoogle Chromeは今後もアドレスバーの表示を順次変更していく予定、と既に発表しています。

まずはGoogleの動向をチェック!

これまでのGoogle Chromeの仕様変更と今後予想されている仕様変更
Chrome 68
(2018年7月)
全ての非SSLサイト(http)にて、[保護されていません]とアドレスバーに表示されるようになりました。
Chrome 69
(2018年9月予定)
現在、常時SSLサイト(https)では、緑色の文字色で[鍵マーク]、[保護された通信]、[https]の記載がアドレスバーにありますが、https通信の状態が標準であるべきとの考えのもと、[保護された通信]と[https]の表示がされない状態になる予定のようです。尚、[鍵マーク]は表示され続けますが、緑色でなくなります。

※2018年9月下旬に、実際にリリースされました。
Chrome 70
(2018年10月予定)
非SSL(http)ページにて、情報を入力すると、[保護されていません]の警告表示が赤色に変化し、警告がより強化されます。
※2018年10月中旬に、実際にリリースされました。
Chrome ??
(未定)
Googleさんは
『ユーザは、Webが初期状態から安全であることを期待している。デフォルトで何も表示がない状態こそ、安全であることを前提にする』と説明しています。

このままセキュリティ強化が進んでいくと、常時SSL対応サイトが標準という取扱いとなり、未対応サイトについては赤色の「保護されていない通信」警告が常に表示されるようになる日が来るかもしれません。

やはりGoogleは常に「ユーザにとって良質なコンテンツを」というポリシーから、仕様決定しているのがよくわかります。

常時SSL化前後に考えること

さて、実際に常時SSL化するためには、何をしたらいいのでしょう?
この1年間一番多くいただいたお問合わせと言っても過言ではないかもしれません。

ただ・・・大変申し訳ないのですが、こればっかりは一言で解決することができません。
それは「ショップ様毎に対応すべきことが異なるから」です。

これまでご質疑いただいた店舗様の生のお声をもとにチェック項目を含めたご案内ページをご用意しました。作業を開始される前に、最初にご一読いただけましたら幸いです。

 ➜ 常時SSL化前後でやるべきこと・考えること

(続きを読む…)

Jimdo、Wixなど流行りのホームページ作成ツールでe-shopsカートSは使えるのか?

はじめまして、e-shopsカートSサポートスタッフのAoiでございます。
この度、私の上司である、おなじみの”wanita”より指令があり、「ユーザー様のお役に立つような記事を書く様に」と拝命致しました。

日々のサポート業務も未熟で半人前ではありますが、微力ながら全力で!普段のサポートではご案内できないような、でもユーザー様にお伝えしたいと心中では地団太を踏んでいるような情報をご提供させて頂ければと思っております。

さて、前置きが長くなってしまいましたが、今回のテーマは
『Jimdo、Wixなど流行りのホームページ作成ツールでe-shopsカートSは使えるのか?』です。

(続きを読む…)

ショッピングカート「カゴに入れる」ボタンの設置方法

e-shopsカートSでは、『「カゴに入れる」ボタンを設置するだけで、ネットショップが完成』と、レンタルカートプランをご紹介しています。

ホームページを持っているがネットショップを新たに作るほど投資が出来ない場合や、沢山の情報を載せてオリジナリティのある商品ページを作り、そこに「カゴに入れる」ボタンを設置する場合などに、このプランは適しています。

今回の記事では、そのご利用手順をご紹介していきたいと思います。

e-shopsカートSのサポートへも、問合せが時々ありますので、改めて画像つきで紹介させていただきます。
既に活用されている方にとっては、当たり前の情報であると思いますが、e-shopsカートS管理画面をご覧になっていない方や、運営に不慣れな方のご参考となれば幸いです。

「カゴに入れる」ボタン貼付け手順

  1. 商品ページ作成する
  2. 管理画面で商品を登録する
  3. 商品ページにHTMLソースを貼り付ける
  4. 商品ページの確認を行う
  5. 商品ページを公開する

という流れで紹介していきます。

(続きを読む…)

カゴ画面編集のすすめ

こんにちは。ワニタでございます。

今回は、e-shopsカートSご利用ショップ様の、「カゴの中身」画面の編集についてご紹介します。
編集するとこんなメリットがある!(かもしれません)

ショップページと一体感がでる

3ステップカートの中身画面は、寒色系であり、彩度が低くなっています。
ショップページとトーンが異なる場合には、そのギャップに驚く購入者様もいると思います。
使用している色を変更することで、ネットショップ本体と同様のトーンにすることができ、一体感がでます。

購入完了率があがる

上の「ショップページと一体感がでる」の副次効果として、違和感によるカゴ落ちがなくなり、購入完了率があがるかもしれません。

購入者様に必ず伝えたい、注意事項やお知らせなどをほぼ見てもらえる

「カゴに入れる」ボタンを押下し遷移するページ【カゴの中身画面】では、画像の表示も行えるスペースが上下に有ります。この上部スペースに画像と説明文を追加すれば、購入手続きに進む前に、必ず目にすることになります。

以上ようなメリットがあるカゴ画面の編集について紹介していきます。
なお、背景色やヘッダー画像の変更などは、購入手続き画面のみではなく、会員マイページや商品検索結果画面、レビュー表示画面でも利用されます。

それでは、早速カゴ画面の編集方法についてご紹介していきます。

 

(続きを読む…)

スマホ訪問時にXMLサイトマップを元にモバイル用へ切替

こんにちは。ワニタです。
スタッフブログでここ何回か紹介をしていました、ネットショップのスマホ対応についての話題です。e-shopsカートSのハイブリッドCMS機能を利用して、スマートフォン対応をしている方や「別々のURL」にてモバイル対応をしている方への参考情報を紹介します。

今からでも間に合う【スマホ対応】の近道。でもご紹介いたしましたが、webサイトがスマホに対応したことを検索エンジンに伝える方法として、googleは3つのやり方を紹介していました。

ハイブリッドCMS機能を利用した作業のながれ(おさらい)

その中で「別々のURL」という方法は、PC用URL毎にモバイル端末用コンテンツのURLを用意するやり方です。e-shopsカートSでは、この「別々のURL」に対応するためにハイブリッドCMS機能を利用した設定をご案内しており、以下の様な流れで手続きを行います。

  1. ネットショップ開業CMSプランをご契約する
  2. PC用ホームページデータをサーバにアップロードする
  3. e−shopsカートS管理画面ハイブリッドCMS設定で、PC用自動生成ページを停止する
  4. モバイル対応用xmlサイトマップ(e−shopsカートS管理画面にて入手)をアップロードする
  5. Google Search Consoleでサイトマップの追加をする

手順4でアップロードするxmlサイトマップには、PC用ページのURLとモバイル端末用のURLの関連が含まれています。このxmlサイトマップをGoogleに登録することで、ネットショップのスマートフォン対応がGoogleに伝わります。

Google以外からの訪問でもスマホページに切り替えたい場合には・・・

Google検索をスマートフォンで利用すると、モバイル端末用のURLが検索結果として使われます。また、「スマホ対応」というメッセージも表示されます。
これにより、Google検索からの訪問は、上記の作業をすることでPC閲覧時にはPC用ページの表示、スマホ閲覧時にはモバイル対応用ページの表示となります。ところが、Google検索以外の訪問では、端末を判定してページを切り替えることができません。

Google検索以外からの訪問に対しても、端末を判定してページを切り替えるJavascriptを作成しましたので、ご紹介いたします。

(続きを読む…)