こんにちは、ワニエです。
前回に引き続き、今回の記事ではスライドショー機能をjQueryと呼ばれるJavaScriptのプラグインを使ったスライドショー機能の実装方法を解説いたします。
自動生成ページ(CMS)にスライドショーを実装する方法を解説!①~Googleスライド編~
こんにちは、ワニエです。
e-shopsカートSで提供しているページ自動生成機能(CMS)では、基本的にHTMLやCSSの記述方法などはサポート対象外とさせていただいていますが、自動生成ページ機能をご利用のショップ様より「スライドショーを埋め込むにはどうすればいいですか?」といったお問い合わせを定期的に頂きます。
あいにくページ自動生成機能においては、スライドショー機能はご用意がないため、ショップ様ご自身でお調べいただき各自ご対応いただいておりますが、今回はスタッフブログということで自動生成ページにスライドショーを実装する方法を解説していきたいと思います!
e-shopsカートSのGA4対応を開始します!
このページの内容は、記事を作成した当時の情報です。最新の設定内容とは異なる可能性がございますので、参考程度にご覧いただきますようお願いいたします。
なお、本記事に関するご質疑やアナリティクス側の管理画面の設定操作等につきましては、サポート対象外となっておりますので、予めご了承くださいませ。
こんにちは、ワニタです。お久しぶりの登場です。
私が登場したということは・・・GoogleアナリティクスのGA4対応についてのお知らせです!
GA4対応を開始します!
前記事(e-shopsカートSにおけるGoogle アナリティクス4 の対応状況)では、e-shopsカートSではGA4には非対応とお伝えしておりましたが、e-shopsカートSでもGA4に対応するために調査を進めてまいりました。
大変お待たせしてしまいましたが、皆様にお知らせできるところまで準備が整いました♪
本題の前に少し復習
e-shopsカートSのGoogleアナリティクス対応は、以下のように進化してきました。
「ga.jsの計測タグ(UA-XXXXXXXXX-X)」を①に設定できるようにしました。
↓
「analaytics.jsの計測タグ(UA-XXXXXXXXX-X)」を②に設定できるようにしました。
↓
「gtag.jsの計測タグ(UA-XXXXXXXXX-X)」を③に設定できるようにしました。
↓
GA4(G-XXXXXXXXXX)に対応できる
計測タグを③に設定できるようにしました。

以上のようにこの度、2022年8月、GA4の測定ID(G-XXXXXXXXXX)出力に対応するためにe-shopsカートS側の利用環境をアップデートいたしました!
BtoBや会員制など特定の方だけに公開・販売できるネットショップを作ろう!
こんにちは、ワニエです。
ネットショップといえば、”一般消費者向けのネットショップ”が多くのユーザーにとっては身近な存在かと思いますが、昨今のコロナ禍によって営業担当者が取引先に訪問することが難しい、外出自粛の呼びかけに伴うECの利用推奨といった社会変化により、BtoBや会員制サイトなどのクローズド(限定公開)サイトでネットショップを構築したいというニーズが増加しているのをご存知でしょうか。
これからBtoBや会員制サイトなど特定の方のみにサイトを公開して商品を販売できるネットショップを構築したいとお考えの方にぜひオススメの機能がございます。
新しく機能追加されたe-shopsカートSの限定公開機能を利用すれば、IDとパスワードを知っているお客様だけがサイトにアクセスできて、商品購入できるネットショップの構築が可能になりました!
「カートに入れておく機能」利用時のviewport指定について
皆さんこんにちは、ワニエです。
2021年12月7日に実施されたシステムアップデートにて「カートに入れておく機能」が公開されました。この機能は今までに多くのショップ様からご要望頂いていた機能でしたので、サポートスタッフとしても皆さまにようやく機能を公開することができ嬉しい限りでございます。
さて、実際に「カートに入れておく機能」をご利用いただく際に、ショップページをPC用とスマホ用でページを分けてご構築されているショップ様におきましては、管理画面やご利用マニュアル等でご案内している設定の他にお願いしなくてはならない作業がございます。本記事ではその作業についてご案内します。
「カートに入れておく機能」とは?
e-shopsカートSで提供している「ゼロステップカート」や「3ステップカート」は、商品をカートに入れる時に必ず「カート画面」や「カートの中身画面」へと画面遷移する仕様です。そのため、複数商品をご購入される方によっては、その度にカート画面へと遷移しショップページへと戻る動作が必要であったため、なかには『使い勝手が良くないなぁ』と感じる方もいたかもしれません。
この「カートに入れておく機能」を使えば、商品をカートに入れた時にカート画面には遷移せずに商品がカートに入りますので、必要なタイミングまではカート画面に遷移しなくても良くなり、複数商品を購入する場合でもストレスなくお買い物を楽しんでいただくことが出来るようになります。
PC用、スマホ用でページを分けている場合は要注意
近年スマートフォンやタブレットの普及によってホームページのスマホ対応が当たり前となり、ネットショップのホームページをスマホ対応しているショップ様は多いかと思います。
ホームページのスマホ対応の方法は、大きく分けて「レスポンシブデザイン」「PC用、スマホ用などホームページを別に用意して振り分ける」方法がありますが、後者の「PC用、スマホ用などホームページを別に用意」して構築されているショップ様におきましては、「カートに入れておく機能」をご利用の際に商品をカートに入れた際に表示されるモーダル画面が正常に表示されない可能性がございます。
そのため、「カゴに入れる」ボタンを設置しているページ(HTML)の<head>~</head>タグ内にて、下記の記述を行っていただくことでどのデバイス(端末)でご操作された場合でも最適なモーダルが表示されるようになります。
▼「カートに入れておく機能」ご利用時のオススメのviewport指定
<meta name=”viewport” content=”width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1″>
なお、上記viewport指定を行っていただいてもモーダル画面が正常に表示されない場合には、ショップページ側のCSSが干渉してしまっている可能性があります。その場合には、e-shopsカートS管理画面>デザイン>拡張機能設定>利用設定にて「カートに入れておく機能」のCSSを編集できる設定をご用意しておりますので、必要に応じて調整してみてください。
以上、カートに入れておく機能の補足記事でした!
定期購入で安定した利益獲得のチャンス
皆さんこんにちは、ワニエと申します。
兄ワニタよりスタッフブログの更新を頼まれました!どうぞよろしくお願い致します。
さて、2021年現在、新型コロナウイルスに伴う外出自粛や人との接触を避けるソーシャルディスタンスが重要となったことで消費行動や生活様式が大きく変化し、その影響で
そこで今回は、コロナ禍によりさらに需要が高まるネットショップにおいて
はじめに
定期的に商品を販売することで継続的な売上が見込める定期購入は、ネットショップにおいて重要なリピーターの獲得に役立ちます。定期購入は購入者様の立場からすると、
- その都度購入する手間が省けるため、買い忘れを防ぐことができる
- 持ち運びが大変なものでも自宅に配送してもらえる
- 定期的に購入することで都度購入よりも安く購入できる
などのメリットがあります。
対してショップ様の立場からすると、
- 都度購入よりも長期的な収益が見込める
- 顧客の囲い込みを行うことができ、リピーターを増やせる
- 商品の仕入れや在庫管理、顧客管理などがしやすくなる
- マーケティング施策の検討や実施がしやすくなる
といったメリットが挙げられます。
ネットショップにおける定期購入は、商材の向き不向きはありますが化粧品や健康食品、食品などの消耗品、生活必需品であれば、定期購入にも繋がりやすく安定した利益が見込めるでしょう。
もちろん消耗品や生活必需品でなくても、スイーツやフルーツ、お酒などの嗜好品を1ヶ月単位や季節ごとにショップがセレクトした商品を定期的にお届けする「頒布会」として運用することでも安定した利益が見込めます。
e-shopsカートSにおけるGoogle アナリティクス4 の対応状況
追記:
このページの内容は、Universal Analytics(ユニバーサルアナリティクス)に関するご紹介です。
Google アナリティクス 4(GA4)に関してのご紹介は、
e-shopsカートSのGA4対応を開始します!をご覧ください。
こんにちは、お久しぶりのワニタです。
GoogleAnalyticsのトラッキングタグについて、e-shopsカートSの対応状況をお知らせします!
はじめに
Google Analyticsでアクセス解析や効果測定を行うのに、必要なトラッキングタグ。データを取得するためには、Webサイトへトラッキングタグを貼り付けすることが必須ですが、Google社はアップデートをし、現在の推奨タグを“Google アナリティクス4(G-から始まるトラッキングID)”としています。e-shopsカートSで運用しているネットショップをGoogle Analyticsで計測するためのご注意点についてまとめてみました。
Google アナリティクス4とは?(概要)
2020年10月にリリースされた「Google アナリティクス」における最新バージョンで、
・「アプリとウェブにおけるユーザの行動データを統合+デバイスやチャンネルを跨いで計測」
・「Googleの機械学習を活用した自動予測・分析等の機能の導入」
・「プライバシー規制の強化」
などを中心とし、機能搭載されている模様です。
▼外部参考資料:新しい Google アナリティクスのご紹介
https://analytics-ja.googleblog.com/2020/10/google.html
▼外部参考資料:アナリティクス ヘルプ
https://support.google.com/analytics#topic=
e-shopsカートSでは未だGA4に非対応
GoogleさんはGoogle アナリティクス4(GA4)を推奨しているようで、アカウント作成・プロパティ作成時にはG-から始まるトラッキングIDのトラッキングコードの取得を推奨しています。
しかし、e-shopsカートSでは未だGA4に対応した仕様となっておりません。
大変申し訳ありません・・・
e-shopsカートSでは現状(2020年12月時点)では『UniversalAnalytics(analytics.js)』にて、ご対応をお願い致します。
(今後e-shopsカートSでもGA4に対応できるように開発・調査を進めております。)
GA4に対応していないからといって、Google Analyticsで解析が行なえない!というわけではございませんので、アカウント作成時にanalytics.js(UAから始まるトラッキングID)を取得する方法について、本記事でお伝えしていきたいと思います。
GoogleAnalytics『analytics.js』トラッキングタグ取得までのフロー
まずは「アカウントの作成」または「プロパティの作成」から下記画面を表示します。
「アカウント名」や「プロパティ名」には、計測希望のサイト名など、自社で管理しやすい名称を入力し、「詳細オプションを表示」をクリックします。
「ユニバーサルアナリティクスプロパティの作成」が展開されました!
以下画像のボタンをクリックします。
クリック後、以下の項目が表示されますので
・計測したいWebサイトのURLを入力
・「ユニバーサルアナリティクスのプロパティのみを作成する」をクリック
・「次へ」をクリック
します。
ビジネスの概要を選択します。自社の運用に合うものを選択し、「作成」をクリックします。
以下赤枠のところからUA-から始まるトラッキングIDの取得ができるようになりました!
(見つけるのちょっと大変・・・(^-^;))
Webサイトとe-shopsカートSを介したトラッキングを行なうためには、上の画面から取得したトラッキングコードを少し編集し、『クロスドメイントラッキング』を実装することで可能となります!タグの編集については、過去の以下記事をご参考としご対応くださると幸いです!
■過去の記事➜クロスドメインのトラッキングについて
以上、analytics.jsのトラッキングタグ取得における補足情報でした!
グローバルサイトタグ(gtag.js)でのクロスドメイントラッキングの設定方法を解説!
【※本記事は2020年11月5日に更新しています】
こんにちは、お久しぶりのワニタでございます。
今回はGoogleAnalyticsの『gtag.jsにおけるクロスドメイントラッキングの設定方法』を解説致します!
【※ご注意】e-shopsカートSではGoogle アナリティクス 4(G-から始まるトラッキングID)やGoogleタグマネージャーには非対応です。本記事ではユニバーサルアナリティクスのグローバルサイトタグについて解説します。
おさらい:クロスドメイントラッキングとは?
クロスドメインとは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>
上記のコード「gtag(‘js’, new Date・・・」からの 6行目から8行目 を、以下に変更します。
変更する部分
gtag(
‘set’,
‘linker’, {
‘domains’: [‘ショップドメイン‘, ‘ec-sites.jp’],
‘decorate_forms’:true
}
);
gtag(‘js’, new Date());
gtag(‘config’, ‘UA-XXXXXX-X‘);
</script>
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的にも良いとされています。