無料なのに高機能すぎるレビューシステム Yotpo（ヨットポ）

posted: 2014-8-4 updated: 2016-7-4 2 Comments

Yotpo（ヨットポ）は、クラウドタイプのEC専用の高機能レビューシステムです。

アメリカのとあるECサイトを見ていたとき、レビューのところに「Yotpo」という文字を発見したのをきっかけに知りました。調べたら、日本語サイトも最近出来たよう。

※英語ではどちらかというと「ヨッポ」とか「ヨゥポ」発音に近いですが、日本では「ヨットポ」で売り出すらしい。「コストコ」みたいな？（英語では「コスコー」って感じ）

ダッシュボードは英語（日本語サイトから登録すれば、日本語かも？ソース）。フロントエンド表示もまだ完全には日本語にはなっていません。翻訳してくれるユーザーも絶賛募集中らしい（こちら）です。

一見敷居が高そうですが、実際の設置は指定のコードを書き込むだけという簡単さ。とても手軽なので、一度試してみる価値ありです。

1. Yotpo（ヨットポ）の機能

とにかくすごいです。単なるレビュー機能に収まりません。まずはYoutubeでどうぞ。

a. 星による5段階評価

評価プラグインならばここは当然の機能。自動で集計し、レビュー数も表示してくれます。

投稿時は、名前を直接入力するほかに、SNSにログインして同期して書き込むことも可能。ソーシャルでの広がりが期待出来ます。

また、レビュアーはレビュー数や「このレビューは参考になりましたか？」の投票数に応じて評価されるなど、いたずら防止対策も行われています。

b. 購入者に、評価依頼メールを自動送信

購入者に自動送信される発送メールをBCCでYotpoのサーバーに送るだけで、指定した日数の後に「レビューをお願いします！」というメールを購入者へ自動で送ってくれます。

これはメールの編集画面。有料プランに変えると、お勧め商品の表示が出来る。

ただし、「商品のレビュー」の自動メールはAPIを使う等、セッティングが複雑です。私のようなペーペーのユーザーは、「サイトご利用のレビュー」の自動メールを使うことになります。

c. 評価ランキングウィジェット

サイドバーなどに、評価の高い商品をランキング形式で表示することも可能です。

d. コンバージョントラッキング

更に、確認画面にコンバージョンタグを入れておくことによって、コンバージョンのトラッキングも出来ます。

これは未設定の場合の画面。コンバージョンタグを完了ページに入れれば多分OK。

e. その他多数

無料の範囲内で出来ることはまだまだあります。

FacebookにYotpoから投稿して、レビューの書き込みを促進
LightBox（クリックすると浮き上がってくる効果）のようにレビューを見せる
評価が増えれば「このサイトは100件ものレビューを受けています！」といったことを証明するバッジを表示させる

高度なSNS連携は有料プランになりますが、ここまで無料で出来れば文句なしでしょう。

2. ユーザー登録

というわけで、まずはユーザー登録してみましょう。

「企業名や電話番号が知られてもいいや」という場合は、日本語サイトからお問い合わせによる登録をどうぞ。私は余計な営業電話が増えるのが面倒だったので、英語サイトからさくっとやりました。（てか、ちょっと試してみたいだけなのに、いきなり電話番号必須とか、ユーザー増えにくいと思うけど・・・）

2-1. 名前とメールアドレスを送信

トップページの登録フォームに、「名前」「メールアドレス」「パスワード」を入力します。そして「Generete Your Reviews >>」をクリック。以上で完了です。

どうして日本語サイトは登録ステップを面倒くさいことをしているのか謎な位にあっさりしています。

2-2. 確認メールのボタンから、早速設置ガイダンス

早速、こんな感じのようこそメールが来ます。（実際は英語。簡単に和訳してみました）

Hi Mamekko,

Yotpoにようこそ。お試し頂けて嬉しいです。あなたのストアでYotpoが表示される瞬間が待ちきれません。
Yotpoには、商品レビューを受けるための様々な機能が揃っており、レビューを通して更なるアクセス増加も期待できます。
さあ、いますぐ始めましょう！
以下のリンクから、Yotpoの様々な機能をお試し下さい。

Get started with Yotpo

というわけで、Get started with Yotpoをクリック。

すると早速、設置のガイダンスが登場します。紙芝居形式（いや、スライド形式というべきか？）なので、落ち着いて英語を読めば、どうってことはありません。

まずは、javascriptをHTMLで書き入れる（WordPressユーザーなら、フッターに入れるか、wp_enqueue_scriptを使ってファイルを読み込む）。

そして、レビューを表示させるコードを、任意の場所に挿入。

これだけで、まずは簡単なレビュー機能がサイトに設置出来てしまいます。ウィジェットコードはSKUや商品名を入れる必要があるので、後述「6. ウィジェットコードを自社サイトに合わせて設置」で解説します。

後の画面は、プレミアム機能のお試し案内と、

完了画面です。

LETS CUSTOMIZEをクリックすれば、ダッシュボードに移動します。

3. ダッシュボード（Dashboard）

専用のダッシュボードでは、左上のいくつかのメニューから、設定したい内容を確認することが出来ます。一番右のPremium Featuresは有料プランの機能です。

ダッシュボードはシンプルで、トラッキングやレビュー数の推移、送ったメールの確認などが出来ます。

4. レビューを確認（Moderate）

というわけで、実際にチェックする機会が多いのは、真ん中のModerateと次に紹介する右側のToolsでしょう。

Moderateでは、レビューの内容をまとめて確認することが出来ます。

a. Moderation Settings（有料）

自動でレビューを更新して掲載するかどうかの設定です。有料プランに申し込めば、スパムワードなどが入ったレビューは自動表示しない機能が使えます。

b. Reviews

全てのレビューを確認出来ます。

c. Products

商品毎のレビューを確認出来ます。

d. Site Reviews

サイトレビュー（お店の評価）を確認できます。

e. Q&A（有料）

有料プランで、Q&Aが作成出来ます。

5. レビュー機能の設定（Tools）

Toolsでは、レビューウィジェットの色を変えたり、自動送信メールの内容を変えたりする設定が出来ます。

フロントエンドの表示言語の設定も、ここです。

半分以上は有料機能となるため、無料の範囲で触れるメニューは、基本的に上の二つ（Collect Reviews:レビューを集める、On-site：フロントエンドでの表示設定）です。

有料部分はここでは割愛して、上の2項目を解説します。

ちなみに、有料のこれらのプランでは、SNS用にクーポンを発行したり、Google Adwordsで評価の星を表示させたり、いろいろな機能の利用が可能になるようです。

Integrationsでは、初期導入のスライドを確認することが出来ます。

a. Collect Reviews（レビューを集める）

Email And General Settings

ここでは言語設定が出来ます。日本のユーザー向けならば、「Japanese」を選択しておきましょう。

Site Reviews Automation

購入後に、サイトの利用評価を促すメールを送信する設定が出来ます。

Mail After Purchase

購入後に、商品別の評価を促すメールを送信する機能です。が、設定が難解なため、上級者向けとなっています。

Targeted Review Requests

自動メールではなく、個別に手動で顧客にレビューを依頼するシステムの設定が出来ます。

Collect Reviews On Facebook

Facebookの店舗ページに、評価をお願いする内容を投稿することが出来ます。

b. On-site（サイト表示）

Reviews Widget

レビューウィジェット（通常タイプ）の色や表示数などを設定出来ます。

Reviews Tab

画面左にタブを表示し、クリックされた時だけレビューをLightBox風に表示させる機能です。

Embedded Widget

「評価の高い製品ランキング」と「最新のレビュー」ウィジェットが作成出来ます。サイドバーなどに表示させるのに便利です。

Star Rating

商品カテゴリーなどの一覧ページで、商品別のレビューの星の数などを表示させる機能です。次項で解説しています。

Badges

レビュー数がたくさんあり、信頼できるお店であることを表示する為のバッジを表示させることが出来ます。バッジの絵柄は、Yotpoで得たレビュー数に応じて、レビュー数が20、50、100、200、500毎に、自動で変わるようです。

お店が賑わっていること、高評価を得ていることをアピールするのにいいですね。

6. ウィジェットコードを自社サイトに合わせて設置

というわけで、ここからは実際のコード設置方法について解説します。

このブログはWelcartのカスタマイズブログなので、やり方的にはWelcart（とWordPress）のコードを使った方法を紹介します。ちなみに、EC-CUBEには既に対応済みで、簡単にインストール出来るそうです。嗚呼、頑張れWelcart。

6-1. 冒頭の「通常のレビューウィジェット」の場合

冒頭のコードでのレビュー画面は、このような感じです。ちょっとだけ日本語表示になってますが、半分は英語です。

まずは、表示させたいページで以下のスクリプトを読み込みます（初期設定時に出てきたコードと同じです。xxxの部分はユーザにより異なるのでそのままコピペなされませぬよう）。コードの設置場所はフッターで問題ないと思いますが、jsファイルを別に作ってwp_enqueue_scriptを使って読み込んでもいいでしょう。

<script type="text/javascript">
(function e(){var e=document.createElement("script");e.type="text/javascript",e.async=true,e.src="//staticw2.yotpo.com/xxx/widget.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})();
</script>

つぎに、レビューのウィジェットを表示させたい場所に、HTMLのコードを入れます。初期設定時に出てきたコードのdata-*属性に、適切なWordPress/Welcartタグを使用。

<div class="yotpo yotpo-main-widget"
data-product-id="<?php usces_the_itemCode(); ?>"
data-name="<?php usces_the_itemName(); ?>"
data-url="<?php the_permalink(); ?>"
data-image-url="<?php usces_the_itemImageURL(0); ?>"
data-description="<?php echo get_the_content(); ?>">
</div>

概ね、このような感じでOKかなと思います。もしかしたらdeta-descriptionはget_the_contentでは長すぎるかもしれませんので、get_the_excerptや、文字数を区切るmb_substrなどを使ってもよいかもしれません。

data-*属性	内容	コード
data-product-id	商品コード	`<?php usces_the_itemCode(); ?>`
data-name	商品名	`<?php usces_the_itemName(); ?>`
data-url	URL	`<?php the_permalink(); ?>`
data-image-url	商品画像URL	`<?php usces_the_itemImageURL(0); ?>`
data-description	商品の概要	`<?php echo get_the_content(); ?>`

6-2. アドバンスド・ウィジェットの場合

何故かマニュアルページ（こちら 2015/7/30リンク切れ確認）でしかコードを見つけられませんでしたが、スタイルの違うレビューウィジェットも用意されています。

Advanced Widget（上級のウィジェット）という名前で、見た感じでは表示は全て日本語に対応済みのようです。

スクリプト

<script src="//staticwidget.yotpo.com/assets/yQuery.js" async=""></script>

※普通のウィジェットのjavascriptでは動いたり動かなかったりだったので、動かない時は↑のスクリプトを読み込んだら動きました。

HTML

<div class="yotpo reviews"
    data-appkey="xxx"
    data-domain="<?php echo trim(home_url(), 'http://'); ?>"
    data-product-id="<?php usces_the_itemCode(); ?>"
    data-product-models="<?php usces_the_firstSku(); ?>"
    data-name="<?php usces_the_itemName(); ?>"
    data-url="<?php the_permalink(); ?>"
    data-image-url="<?php usces_the_itemImageURL(0); ?>"
    data-description="<?php echo get_the_content(); ?>"
    data-bread-crumbs="<?php $cats = get_the_category(); foreach( $cats as $cat ){ echo $cat->name. '|';}  ?>">
</div>

こちらのdata-*属性は、以下の指定必須項目が追加されます。

data-*属性	内容	コード
data-appkey	APIキー	ダッシュボードのアカウント情報で確認可
data-domain	ドメイン	<?php echo trim(home_url(), ‘http://’); ?>
data-models	商品モデル（SKU）	<?php usces_the_firstSku(); ?>
data-breadcrumbs	商品カテゴリー	<?php $cats = get_the_category(); foreach( $cats as $cat ){ echo $cat->name. ‘\|’;} ?>

SKUコードは、一括で取得できるWelcartのタグがよくわからなかっため、「先頭のSKU」を取得するusces_the_firstSkuを使っています。
最後のカテゴリーの取得コードでは、カテゴリーを全て出力（区切り文字が末尾にも入ってしまいますが、PHPで取り除くのが面倒でそのまま放置。大したことではないかと・・・他にいい方法あるかもですが）。

オプションでdata-*属性を追加すれば、テキストの文言を変えたりすることも可能なようです。詳しくは以下をご参照下さい。

Advanced Widget Customization － Yotpo（リンク切れ）

6-3. 商品一覧画面でのレビュー表示の場合（Star Rating）

初期設定の案内には出てきませんでしたが、Star Ratingという機能を使えば、商品一覧ページにも星の数やレビュー数を商品毎に出すことが出来ます。レビューがついていないものには表示されません。

まずは、表示させたいページ（例：カテゴリーページ）で以下のスクリプトを読み込みます。

<script src="https://www.yotpo.com/js/yQuery.js"></script>

そして、ウィジェットの場合と同様に、表示させたい場所にコードを記載します。

コードは、Yotpoのダッシュボードの［Tools］＞［On-site］＞［Star Rating］で、専用のappkeyが入ったものを確認することが出来ます。

<div class="yotpo bottomLine"
    data-appkey="xxx"
    data-domain="<?php echo strstr(home_url(), 'http://'); ?>"
    data-product-id="<?php usces_the_itemCode(); ?>"
    data-product-models="<?php usces_the_itemSku(); ?>"
    data-name="<?php usces_the_itemName(); ?>"
    data-url="<?php the_permalink(); ?>"
    data-image-url="<?php usces_the_itemImageURL(0); ?>"
    data-description="<?php echo get_the_content(); ?>"
    data-bread-crumbs="<?php $cats = get_the_category(); foreach( $cats as $cat ){ echo $cat->name. '|';}  ?>">
</div>

コードの最初のclass属性が違うだけで、残りは先ほどの「Advanced Wedget」と同じです。

6-4. レビュー依頼メールの設定

レビューを購入者に依頼するメールの設定は、［Tools］＞［Collect Reviews］＞［Site Review Automation］で出来ます。

先ほども書いたように、商品別にレビューを自動メールで依頼する［Mail After Purchase］もありますが、メールの送信にAPIの設定などが必要になるなど、非常に難しい設定が必要となります（私もわかりません・・・わかる方いたらご教示下さい）。

Site Review Automationのほうは簡単で、発送完了メール送信時に「hepae9@service.yotpo.com」をBCCに加えるだけです。

ただ、Welcartでは、受注画面から送るメール機能では、BCCで他者に送信出来ません（フックがあるのかもしれませんが・・・）。取り敢えずは、手動でレビュー依頼をするしかないでしょうかね。また何かわかったら追記します。

7. まとめ

Yotpo（ヨットポ）には、ここには書ききれない程の機能がまだまだありますので、ダッシュボードを色々眺めてみたり、サポートサイトを読み漁ってみて下さい。ついでに英語の勉強も出来て一石二鳥です。

使用感としては、ダッシュボード上で、全てのレビューウィジェットのコードが確認出来ないところがちょっと使いにくい。それと、有料サービスのアピールがうざったい感じも結構あります。

Yotpoはまだ発展途上のサービスだと思いますので、その辺りのUI（ユーザーインターフェイス）は改善されていくことでしょう。

一度使ってみると、普通のレビュー機能いらなくなってしまうくらいの満足度。これが決定版で文句なしではないでしょうか。

Author: Mamekko（まめ子）

WelcartのECサイト運営担当の30代♀。プログラミングよりはWebデザインが好き。

Twitterをフォロー Feedlyで購読