Virtusize ガイド

# Shopify

# 注意事項

Shopifyのデータや設定はサイトごとに異なります。このドキュメントで提供されている例やガイドラインが、必ずしもお客様の特定の設定に完全に一致するとは限りません。お客様のShopify環境に基づいて詳細を確認してください。

# 実装を始める前に

API KeyとStore Nameを受け取るために、営業担当者にご連絡ください。 事前にShopifyに組み込まれている変数を理解することは非常に重要です。これらの変数は、顧客ID（customer ID）や商品ID（product ID）を識別し、Virtusizeスクリプトが実行される商品ページを決定するのに役立ちます。

# 1. 商品詳細ページ（Product Detail Page ：PDP）実装

Shopifyの管理画面で以下の手順を実行してください： Online Store ⟶ Themes ⟶ Current theme ⟶ Actions ⟶ Edit code.

Sample

Layout ⟶ {/}theme.liquid を選択し、theme.liquid のソースコードを開きます。以下のスクリプトをファイルの最後、<body /> タグの直前に追加してください。

Sample

Virtusizeのスクリプトを商品詳細ページのみに読み込むには、スクリプトをLiquidの条件付きレンダリング関数で囲む必要があります。Liquidでは、if、unless、case など、用途に応じて使用できるさまざまな条件付きレンダリングを提供しています。 以下は、URLに/productsが含まれている場合にVirtusizeのスクリプトを実行するコード例です。

{%- if request.page_type contains 'products/' -%}
//ここにVirtusizeのスクリプトを追加してください
{%- endif -%}

OR

{%- if request.path contains "products/" -%} 
//ここにVirtusizeのスクリプトを追加してください
{%- endif -%}

Shopifyでは、product.id と product.handle は商品の一意の識別子です。ピクセルを使用する際、これらの識別子が商品ページと注文確認ページの両方で一致している必要があります。一貫性を保つために、どの識別子を使用するかについては、Kickoff時にVirtusize担当者と確認します。

スクリプト：


 
 
 










































<input type="hidden" id="vs-product-id" value="{{ product.handle }}" />
<input type="hidden" id="vs-user-id" />
<input type="hidden" id="vs-product-version" value="1" />  <!-- 商品のバージョンを設定ください。商品情報が更新された際にこちらの値も同時に更新されると、 Virtusize サーバー内の商品情報が自動更新され、Virtusizeに変更が反映されます。　例）掲載時のタイムスタンプ：202202162028 不明の場合は「1」を設定してください。
-->

{%- if request.path contains "products/" -%} 
<script type="text/javascript">
// 顧客IDをクッキーに保存し、ユーザーのブラウザに1週間の有効期限を設定
const date = new Date();
date.setTime(date.getTime() + 7 * 24 * 60 * 60 * 1000);
const expires = "; expires=" + date.toUTCString();
document.cookie = "virtusize_user_id={{ customer.id }}" + expires + "; path=/";

function getVsBid(name) {
  return document.cookie
    .split("; ")
    .find((row) => row.startsWith(name + "="))
    ?.split("=")[1];
}

const bid = getVsBid("virtusize.bid");
var externalUserId = "{{ customer.id }}";

{% if customer == false %}
externalUserId = bid
{%- endif -%}

const userInput = document.getElementById("vs-user-id");
userInput.value = externalUserId;

const vsStoreName = "STORE_NAME"; // 営業担当者から提供された値に置き換えてください。
const vsEnv = "production"; // 環境によって"staging"または"production"を設定
const vsDeviceType = "desktop";

(function (d) {
  var s = d.createElement("script");
  s.type = "text/javascript";
  s.charset = "utf-8";
  s.async = true;
  s.src = ("https:" == d.location.protocol ? "https://" : "http://") + "integration.virtusize.com/" + vsEnv + "/" + vsStoreName + "/" + vsDeviceType + ".source.js";
  var s1 = d.getElementsByTagName("script")[0];
  s1.parentNode.insertBefore(s, s1);
})(document);
</script>
{%- endif -%}

# テーマエディターを使用してプレースホルダーを挿入する

  1. ストアページで、以下の手順を選択します： Online Store ⟶ Themes ⟶ Customize
  2. 次に以下を選択します： Home Page ⟶ Products ⟶ Default product

Sample

  1. 左側のメニューから、Add block ⟶ Custom Liquid を選択してください。

Sample

  1. プレースホルダー 現在、6種類のウィジェットをサポートしています。それぞれのウィジェットは、機能を有効にするために、要素に一意のクラス名を設定する必要があります。
ウィジェットタイプ プレースホルダーのクラス名
Inpage Standard vs-placeholder-inpage
Inpage Minimal vs-placeholder-inpage-mini
Smart Table vs-placeholder-smart-table
Fitting Room Recommend vs-placeholder-fitting-room-frr
Fitting Room Discovery vs-placeholder-fitting-room-frd
Kids vs-placeholder-kids

これらのウィジェットは、ページ内のどこにでも配置可能ですが、プレースホルダーを使用して配置を指定することを推奨します。プレースホルダーを追加することで、Virtusizeのウィジェットを壊す心配なく、ページのデザインを自由に変更できます。 例えば、Inpageウィジェットを使用するには、クラス名vs-placeholder-inpageを持つブロックを追加してください。

Sample

別のウィジェットタイプを使用したい場合は、そのウィジェットに対応するクラス名に置き換えてください。また、別のカスタムリキッドブロックを作成し、それぞれ対応するクラス名を使用することで、複数のウィジェットタイプを追加することも可能です。

  1. カスタムリキッドブロックを適切なセクションに配置してください。変更を保存した後、商品ページを確認し、要素が正しく挿入されていることを確認してください。

# 2. Pixelを利用した購入完了ページ（Order Confirmation Page ：OCP）への実装

Shopifyピクセルとは、オンラインストアやチェックアウトページで実行されるJavaScriptのコードスニペットのことです。これらはShopify管理画面の「Customer Events」セクションから管理されます。

カスタムピクセルを追加するには、Shopify管理画面で Settings > Customer Events に移動し、 Add Custom Pixel ボタンをクリックしてください。

Sample

  1. ピクセル名を入力し、以下のコードを追加および修正してください。

Sample

スクリプト:


 
 
 










































































// ステップ1. JavaScriptピクセルSDKを初期化する（HTMLを除外することを確認してください）

// ステップ2. analytics.subscribe()を使用して顧客イベントを購読し、トラッキングを追加します。

analytics.subscribe("checkout_completed", (event) => {
  const checkout = event.data.checkout;
  console.log("checkout data: ", checkout); //Virtusizeでのテスト購入用です。実装が完了したら削除してください。
  async function sendOrderToVs() {
    //商品詳細ページ（PDP）から訪問時にユーザーIDクッキーを取得する
    const externalUserId = (await browser.cookie.get("virtusize_user_id")) || (await browser.cookie.get("virtusize.bid"));
    const bid = await browser.cookie.get("virtusize.bid");
    //オーダー変数
    var items = [];

    //チェックアウトアイテムをループ処理
    for (var i in checkout.lineItems) {
      const lineItem = checkout.lineItems[i];
      const url = lineItem.variant.product.url;
      const vsProductId = url.split("/").pop();

      // オプション - lineItemsにサイズ情報がない場合、タイトルからサイズを抽出する必要があります。
      const sizeString = checkout.lineItems[i].variant.title;
      var size = "NA";
      if (sizeString) {
        // 例 - サイズ文字列パターンが "Navy beige / S" の場合、"S" を抽出する必要があります。必要に応じて修正してください。
        const sizeData = sizeString.split("/")[1].trim()
        if (sizeData) {
          size = sizeData;
        }
      }

      // 各チェックアウトアイテムのオブジェクトを作成し、items配列に追加する
      var item = {
        quantity: lineItem.quantity,
        unitPrice: lineItem.variant.price.amount,
        externalProductId: vsProductId,
        size: size, // 利用可能な場合はlineItemからサイズを取得。利用できない場合はtitleからサイズ名を抽出。
        variantId: lineItem.variant.id,
        imageUrl: lineItem.variant.image.src,
        color: "", // 利用可能な場合はlineItemから色を取得
        gender: "", // 利用可能な場合はlineItemから性別を取得
        url: window.location.origin + lineItem.variant.product.url,
        currency: lineItem.variant.price.currencyCode,
      };
      items.push(item);
    }

    // オーダーオブジェクトを作成
    const vsOrderObject = {
      apiKey: "YOUR_API_KEY",
      externalOrderId: checkout.order.id,
      externalUserId,
      bid,
      region: "JP", // 各地域の国コード（例: ISO-3166）を設定
      items,
    };

    //オーダーオブジェクトをVirtusizeに送信
    const headers = {
      "Content-Type": "application/json",
      "x-vs-bid": bid,
    };

    const env = "production"; // 環境によって"staging"または"production"を設定
    const domain = "jp" // "com"はステージングおよび本番環境で使用されます。例外として、日本、韓国、中国のストアの場合はそれぞれ"jp"、"kr"、"com.cn"（ステージングでは"com"を使用）となります。
    const ordersUrl = `https://${env}.virtusize.${domain}/a/api/v3/orders/`;
    fetch(ordersUrl, {
      method: "POST",
      headers,
      body: JSON.stringify(vsOrderObject),
    });
  }

  // 関数を実行
  sendOrderToVs();
});
  1. ピクセルの設定が完了したら保存し、 connect ボタンを押してください。

Sample

# 3. 確認

実装が完了したら、商品詳細ページのURLを営業担当者に共有してください。その後、テスト購入を実施し、ピクセルのチェックアウトデータでデータが正しくトラッキングされているかを確認します。

← Ebisumart に実装する →