▶︎ Shoplive Plugin Shopifyの簡単な統合

1. Shopifyにログイン

管理画面アカウントにログインします。

2. テーマの編集

オンラインストアからテーマを選択します。現在のテーマで、「アクション」をクリックし、「コードを編集」をクリックします。

3. コードの編集

コード編集ウィンドウが開いたら、 theme.liquid をクリックし、タグの下に以下のコードを入力します。アクセスキーを「ACCESS_KEY」に入力し、保存します。

<script type="text/javascript" src="https://static.shoplive.cloud/shoplive.js"></script>
<script>cloud.shoplive.init({ accessKey: 'ACCESS_KEY', platform: 'SHOPIFY' });
{% if customer %}
cloud.shoplive.setUserObject({userId: "{{ customer.id }}", userName: "{{ customer.first_name }}"});
{% endif %}
</script>

4. ページの編集

「ページ」ボタンをクリックして、ライブ ページ を追加します。[ ページを追加 ]ボタンをクリックし、タイトルを入力し、以下のコードを入力して保存します。

<div id="shoplive-overall"></div>
<script defer>
document.addEventListener('DOMContentLoaded', function() {
cloud.shoplive.setOverall('shoplive-overall');
});
</script>

5. 編集メニュー

「 探索 」をクリックしてメニューを選択し、ライブ・ページを表示し、カテゴリを編集します。

6. セットアップの完了

すべての設定が完了したら、Webサイトのプレビューでミニプレビューが表示されるかどうかを確認します。ミニプレビューが公開されていない場合は、「キャンペーンの詳細」に移動し、進行中のライブキャンペーンのプラグイン/APIを「公開」に設定します。

Conversion Pixel

Shopifyに購入シグナルスクリプトをインストールするには

1. 画面下部の「設定」ボタンをクリックします。

   

2. 「お客様のイベント」 > 「カスタムピクセルを追加」ボタンをクリックします。
   

   

3. タイトルを入力し、次に以下のコードを入力して保存します。

   var script = document.createElement('script');
   script.type = 'text/javascript';
   script.src = 'https://static.shoplive.cloud/shoplive.js';
   script.async = true;
   document.head.appendChild(script);
   
   script.onload = function () {
      if (typeof cloud !== 'undefined' && cloud.shoplive) {
          var customerId = null;
          
          cloud.shoplive.init({
              accessKey: '<YOUR_ACCESS_KEY>'
          });
   
          analytics.subscribe('checkout_completed', (event) => {
              try {
                  console.log("Event received:", event);
                  const checkout = event.data.checkout;
                  console.log("Checkout data:", checkout);
                  const orderId = checkout.order.id;
                  console.log("Order ID:", orderId);
   
                  if (customerId == null) {
                       customerId = checkout.order.customer.id
                       console.log("Customer ID:", customerId);
                       if (customerId !== null) {
                           cloud.shoplive.setUserObject({
                               userId: customerId
                           });
                       }
                       else console.log('customer id is null')
                   }
                
                  const purchasedItems = checkout.lineItems.map((item) => {
                      console.log("Processing item:", item);
                      return {
                          sku: item.variant.sku,
                          purchaseUnitPrice: parseFloat(item.variant.price.amount),
                          purchaseQuantity: item.quantity
                      };
                  }
                  );
                  console.log("Purchased items:", purchasedItems)
                  const conversionConfig = {
                      accessKey: '<YOUR_ACCESS_KEY>',
                      eventType: 'purchase',
                      products: purchasedItems,
                      orderId: orderId
                  };
                  cloud.shoplive.sendConversionEvent(conversionConfig);
              } catch (error) {
                  console.error('send conversion failure:', error);
              }
          }
          );
      } else {
          console.error('cloud.shoplive does not exist');
      }
   }
   script.onerror = function () {
      console.error('script load failure');
   }

4. 「連携」ボタンをクリックします。