実際に起きたことだけを見せる Shopify のソーシャルプルーフ

この機能に出会ったらタブを閉じていい

ソーシャルプルーフのアプリを探すと、同じ選択肢に何度も出会います。たいていは、データがたまる前に始める方法として紹介されます。通知の文面を自分で打ち込むか、それらしい購入イベントをツールが作ってくれるかのどちらかです。名前が1つ、都市が1つ、商品が1つ、時刻が1つ。それを商品ページの隅で、たったいま誰かが買ったかのように買い物客へ見せます。

買い物客はそれをマーケティングの飾りとしては読みません。自分のストアについての事実として読み、しかもカード番号を渡すかどうかを決めている、まさにその瞬間に読みます。消費者保護の当局は、無かった顧客の活動や誰もしていない推薦を、人を欺く広告として扱います。米国の Federal Trade Commission も EU の消費者法も、ここ数年で捏造されたレビューや推薦に手を入れてきました。生成された購入通知が自分の市場で実際に問題になるかどうかは、ウィジェットのベンダーではなく弁護士に聞くことです。

弁護士の要らない部分はこうです。イベントがストアではなくリストから出てくるなら、そのリストは繰り返します。誰かがタブを開いたまま、同じ3つの名前が回るのを眺め、この店はカード番号を預けてくれと言いながら小さなことでは平気で嘘をつくのだと学びます。ページの隅を埋める代金としては高すぎます。

正直な通知に言えること

BootSignal のソーシャルプルーフ通知には、文面の入力欄も生成の機能もありません。自分のサイト以外にイベントの出どころが無いからです。このウィジェットは、BootSignal のウィジェットがそのドメインにすでに保存している活動、つまりコメントやリアクション、評価、投票を読んで順番に回します。文面は一般的な言い方のままで、訪問者の名前は出ません。"Someone just left a comment"、つまり誰かがいまコメントを残した、という程度の一文に相対的な時刻が添えられます。3日より古い活動は候補から外れるので、先月のひとかたまりを今日の午後として使い回すことはできません。

入れる前に、意識して受け入れておく結果が1つあります。最近の活動が無いストアでは、隅は空いたままです。代わりの文面も、埋め草も、本番に漏れ出すデモの表示もありません。

設置を止める Shopify のプラン2つ

設置そのもののために上げるプランはありません。Shopify はコードエディタ、テーマエディタ、カスタム Liquid のセクション、埋め込みアプリ（App embeds）のどれにもプラン条件を付けずに説明していますし、Basic のプランページは組み込みのテーマエディタで手を入れるオンラインストアについて書いています。2つのプランは、もっと根本的な理由で外れます。Lite にはオンラインストア販売チャネルが含まれず、ウィジェットを載せる表側がありません。Starter は使えるテーマを Spotlight ひとつに絞り、ほかのテーマやカスタマイズの選択肢は提供されないと書きながら、コードエディタに手が届くかは語らないので、未確認として扱います（新しいストアには閉じてもいます）。

3つのウィジェットが行く先

ローダーもサイト全体、通知もサイト全体なので、この2つはレイアウトのファイルに入ります。残りの2つはページに結び付いたものなのでセクションへ行きます。この切り分けを最初に合わせておくと、あとで半日が浮きます。

1. ストアが応答するホスト名は2つなので、登録も2件になる

   BootSignal ダッシュボードを開いてストアのドメインを追加し、続けて .myshopify.com のドメインも追加します。ウィジェットは location.hostname を、そのサイト ID に登録されたドメインと突き合わせますが、Shopify のストアは両方で応答します。登録するとサイト ID が返り、Shopify へ持って行く値はそれだけです。

2. 「コードを編集」に入る前にテーマの控えを作る

   Shopify 管理画面で「オンラインストア」（Online Store）を開き、テーマの横の「...」メニューから「コードを編集」（Edit code）を選びます。スマートフォンからなら、メニューアイコン > Sales channels（販売チャネル）>「オンラインストア」> Manage themes（テーマの管理）> 横並びのメニュー >「コードを編集」と進みます。何かに触る前にテーマを複製してください。テーマの更新でコードの変更が消えることがあります。

3. ローダーと通知はレイアウトのファイルに一緒に入れる

   ファイル一覧で Layout（layout）を開いて theme.liquid を表示し、2行を閉じる </body> タグの直前に置いて「保存」（Save）します。ここでは全ページ共通のレイアウトが正解です。通知は商品ページでもコレクションのページでもカートでも出したいはずですし、ローダー1つが、あとから足すウィジェットまで全部立ち上げます。defer は残してください。Shopify の Theme Check は、パーサーを止めるスクリプトをストアが遅くなる原因として指摘します。

   コードコピー

   <script src="https://bootsignal.com/bootsignal.js"
           data-site-id="YOUR_SITE_ID" data-lang="ja" defer></script>
   <div data-bootsignal="social-proof-toast"></div>

4. お客様の声ウォールはレビューがあるべき場所へ

   これはページの中身のかたまりなので、セクションに入ります。コードエディタが要らない道はこうです。「オンラインストア」>「テーマを編集」（Edit theme）で上部中央のドロップダウンからテンプレートを切り替え、「セクションを追加」（Add section）> カスタム Liquid を選んで貼り付けます。ウォールは初期値で星4つ以上のレビューだけを見せ、カードは9枚までにそろえます。どちらも属性で変えられます。

   コードコピー

   <div data-bootsignal="testimonials" data-min-stars="4" data-max="9"></div>

5. リアルタイム閲覧者数は人がいるページに置く

   このバッジはページ単位なので、ページを見分ける data-thread-id を受け取ります。商品のメインセクションの中か、そのセクションに置いたカスタム Liquid のブロックから、商品のハンドルにひも付けてください。スレッド ID にはコロンとスラッシュを入れられませんが、ハンドルにはもともとそういう文字が入りません。

   コードコピー

   <div data-bootsignal="live-visitors" data-thread-id="{{ product.handle }}"></div>

カスタム Liquid の道に貼る前に知っておくことが3つあります。中身は 50kb を超えられませんが、ウィジェットのスニペットはその近くにも行きません。閉じていない HTML タグは保存のときに代わりに閉じられ、雑な貼り付けは静かに形が変わるので、スニペットは欠けのない状態で入れてください。そして {% javascript %} や {% stylesheet %} のタグは使えないため、入れられるのはふつうの HTML と <script src> だけです。カスタム Liquid は Shopify Theme Store の要件であって、プラットフォームの保証ではありません。自作のテーマや古いテーマには単に無いことがあり、その場合は以下の話が全部コードエディタで起きます。

ウィジェットごとに、言えることと言えないこと

ストアが本当に静かなとき

偽物の生成機能が売られるのはまさにこの状況で、これは実際にある状況です。先週開いたばかりのストアには、流し直すものがありません。答えは活動を作り出すことではなく、初日から正直な出力が役に立つウィジェットを動かし、残りの2つが必要とする材料を集めはじめることです。

1. 先に商品ページへ評価ウィジェットを入れます。これが集める側です。お客様の声ウォールも通知もここに保存されたものを読むので、これが動き出すまで何も埋まりません。
2. すでに買ってくれた人に商品ページのリンクを送って、評価をお願いします。応対を終えた買い手がいちばん早い正当なレビューの出どころで、偽物の生成機能はこの手順を飛ばすために存在します。
3. 同時に人がいることが自然な場所でリアルタイム閲覧者数を使います。発売日、セール、いま広告を回している商品などです。このバッジはいまこの瞬間についての事実を言うので、積み上がった履歴が無くても本当です。
4. 静かなページからはバッジを外します。1人と書かれたバッジは正確でも役に立たず、どこに出すかを選ぶことに後ろめたいところはありません。
5. レビューがたまったらお客様の声ウォールを足し、通知はそのまま点けておきます。ストアが静かなあいだは空で、活動が入ってくれば自然に出はじめます。

活動が実際に起きている場所がブログなら、Shopify のコメントウィジェットの記事が記事セクションへの設置を扱っています。記事に付いたコメントの1つ1つが、商品ページの通知が流せる材料になります。

セールでアクセスが4倍になったときの費用

サブスクリプション1つで済みます。登録ドメイン1つあたり 月 $20 または年 $200、カタログのウィジェットは全部込みで、値段のどの項目もアクセスやページビュー、表示回数にひも付いていません。案内用のサイトより Shopify でこの差が大きいのは、ストアのアクセスが設計のうえで季節に動くからです。セールの週にセッションが4倍になったストアも前の週と同じ金額を払い、1か月ずっと通知が空だったストアも同じ金額を払います。

カタログは有料ウィジェット38個と無料のブラウザツール33個で、購読したあとに出たウィジェットも含まれます。だからこのページの2つ目、3つ目のマウント要素に追加の費用は付きません。ドメインを増やすときはダッシュボードから別に買います。ストアを複数動かしているなら、それがその場合です。数字の全体は料金のページにあり、ほかのツールと値段を並べた比較は比較のセクションにあります。

気づけない壊れ方

正直なソーシャルプルーフの設置には弱点が1つあり、名前を付けておく値打ちがあります。Shopify は、テーマのコードに加えた変更がテーマの更新と互換性を欠く場合、更新されたコピーからその変更がすべて削除されるとはっきり書いています。ローダーもマウント要素もコードの変更です。コメント欄でこれが起きればページの一区画が消えるので、すぐ分かります。本物の活動があるときだけ出る通知で起きると、ふつうに静かな1週間と見分けが付きません。

だから確認は目ではなく手順にします。テーマを更新した、切り替えた、新しく買った。そのあとにこうします。

1. ストアのページをどれか開き、ページのソースで bootsignal.js を探します。無ければローダーが更新と一緒に消えたということで、静かなのではなくウィジェットが全部止まっています。
2. リアルタイム閲覧者数を置いた商品ページを、普通のブラウザのタブで開きます。バッジはウィジェットが動いていればいつでも描かれるので、ほかに活動の無いストアでは最速の生存確認です。
3. 消えたほうを元の場所へ貼り直します。ローダーと通知は theme.liquid、ページごとに違うマウントはそれぞれのセクションです。
4. データの心配は要りません。コメントも評価もレビューもサイト ID とスレッド ID で BootSignal 側にあるので、貼り直せば同じ履歴がそのまま戻ります。

テーマの改修をメモしている場所に、この4行を移しておいてください。テーマの更新で壊れるほかのものの隣が定位置です。そのあとはウォールが見せているレビューを読みに行きましょう。見せられる活動が本当にあるストアには、お客さんが何かを伝えてくれていて、そのうちいちばん退屈な部分がウィジェットです。