ShopifyとYOTPOの連携ガイド

yotpo_resources_2b

本ページでは、Shopify利用企業さまから問い合せの多い、UGCマーケティングツール「YOTPO」との連携手順をご紹介します。

Shopify側の準備

YOTPOはShopifyのアプリで簡単に利用を開始することができます。

まずは、YOTPOアプリをShopifyアカウントに追加しましょう。

yotpo_integrations_shopify_1
  1. Shopifyにログインし、「アプリ管理」をクリックします。
  2. 「Shopify アプリストアに行く」をクリックしてください。
  3. 「YOTPO」を検索して「Yotpo：UGCマーケティング」を選択します。
  4. 「アプリを追加する」をクリックしてください。
  5. 「アプリをインストールする」をクリックします。
  6. YOTPO アカウントのパスワードを作成してください。
＜重要：インストール時の注意点＞

  • ショップのテーマによっては手動インストールが必要となります。すでに自動インストールしている場合、簡単に削除、再インストールし、手動インストールすることができます。
  • 任意の箇所に表示したい場合は、手動インストールを行ってください。

インストール手順

■YOTPO側の設定

  • YOTPO管理画面のインストールウィザードで、レビューリクエストメールとレビューウィジェットの設定を行います。
  • インストールウィザードの最後のステップで、「Manual Installation」の「See Instructions」をクリックしてください。
yotpo_integrations_shopify_2

■Shopify側の設定

【注意】以下の案内は、よく利用されるファイルで記載しておりますので、環境によってはファイルが異なる可能性がございます。

（共通：テンプレートの編集方法）

  • 「オンラインストア」をクリックします。
  • 「テーマ」をクリックしてください。
  • 「アクション」から「コードを編集する」をクリックします。
yotpo_integrations_shopify_5
1.JavaScript のライブラリーの設置します【必須】

テンプレートの theme.liquid を開いてください。

yotpo_integrations_shopify_6

</head> のすぐ上に、下記にあるコードを貼り付けます

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

###APP_KEY### の部分を、YOTPO アカウントの APP KEY に書き換えてください。
APP KEY は、YOTPO 管理画面の「右上アカウント > Store Settings」にて確認することができます。

yotpo_integrations_shopify_3
yotpo_integrations_shopify_4

確認できましたら、「保存する」をクリックしてください。

2.レビューウィジェットの設置【必須】

テンプレートの product.liquid を開きます。
表示したい箇所に、下記にあるコードを貼り付けてください。

<div class="yotpo yotpo-main-widget" data-product-id="{{ product.id }}" data-name="{{ product.title | escape }}" data-url="{{ shop.url }}{{ product.url }}" data-image-url="{{ product.featured_image | product_img_url: 'large' |replace: '?', '%3F' | replace: '&','%26'}}" data-price="{{ variant.price | money_without_currency | replace: ',', '' }}" data-currency="{{ shop.currency }}" data-description="{{ product.description | escape }}">

貼り付けが完了しましたら、「保存する」をクリックしてください。

英文参考ページ：https://support.yotpo.com/en/article/shopify-installing-yotpo
※ data-price については、カンマを含まないようにする必要があります。

3.コンバージョントラッキングコードの設置【必須】

左下にある「設定」に開きます。
「チェックアウト」をクリックしてください。
「注文処理」の「追加スクリプト」に下記にあるコードを貼り付けます。

yotpo_integrations_shopify_9

<script type="text/javascript">(function e(){var e=document.createElement("script");e.type="text/javascript",e.async=true,e.src="//staticw2.yotpo.com/##APP_KEY##/widget.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})();</script>
<script>yotpoTrackConversionData = {source:"pixel_v2", platform:"shopify", orderId:"", orderNumber:"", orderName:"", orderAmount:"", orderCurrency:""}</script>

<noscript><img src="//api.yotpo.com/conversion_tracking.gif?app_key=##APP_KEY##&source=pixel_v2&platform=shopify&noscript=1&order_id=&order_number=&order_name=&order_amount=&order_currency=" width="1" height="1"></noscript>

yotpo_integrations_shopify_7

https://support.yotpo.com/en/article/shopify-installing-yotpo#3-install-the-conversion-tracking-code-required
###APP_KEY### の部分を、YOTPO アカウントの APP KEY に書き換えます。
price について、カンマを含まないようにします。

APP KEY は、YOTPO 管理画面の「右上アカウント > Store Settings」にて確認することができます。
APPKEYの置き換えが完了したら、「保存する」をクリックしてください。

4.商品ページにスターレーティングの設置（任意、推奨）

テンプレートの product-template.liquid を開く
表示したい箇所に、下記にあるコードを貼り付けてください。
（タイトル のすぐ後が推奨となります）

<div class="yotpo bottomLine"
data-product-id="">
</div>

yotpo_integrations_shopify_8

https://support.yotpo.com/en/article/shopify-installing-yotpo#4-install-the-star-rating-on-product-pages-optional-yet-highly-recommended

コードの貼り付けが完了しましたら、「保存する」をクリックしてください。

5.カテゴリーページにスターレーティングの設置（任意・推奨機能）

カテゴリーページのテンプレートを開きます。
表示したい箇所に、下記にあるコードを貼り付けてください。
（商品名と価格の間が推奨となります）

<div class="yotpo bottomLine"
data-product-id="">
</div></div>

https://support.yotpo.com/en/article/shopify-installing-yotpo#5-installing-the-star-rating-on-category-pages-optional-yet-highly-recommended

貼り付けが完了しましたら、「保存する」をクリックします。
ここまでの設定が完了となります。

世界200,000サイトの導入実績

yotpo_top_3 yotpo_top_4 yotpo_top_17 yotpo_top_6 yotpo_top_7 yotpo_top_8 yotpo_top_9 yotpo_top_10 yotpo_top_11 yotpo_top_12 yotpo_top_13 yotpo_top_14 yotpo_top_15 yotpo_top_16

お問い合わせ／資料ダウンロード


YOTPOやUGCマーケティングについて詳しく聞きたい方は
お気軽にご相談ください。

お問い合わせ
資料ダウンロード
Back to Top

yotpo_footer_1 -YOTPO日本公式サイト-

UGCとは？ | 機能紹介 | 導入事例 | プラン | よくあるご質問 | ブログ | 会社情報 | 利用規約 | プライバシーポリシー

© Gaprise Inc. All Rights Reserved