Shopify

FanplayrをShopifyストアに統合するのは、素早く簡単です。提供されたテンプレート（Fanplayrアカウントキーを追加）をヘッダーまたはフッターに、そしてコンバージョンスクリプトを追加するだけで完了です。

実装の詳細については、カスタム統合ガイドをご覧ください。

ユーザートラッキング

注: 通常、ご自身でテンプレートを更新しない場合は、これらの詳細を開発者にお伝えください。開発者はウェブサイトのソースにバージョン管理を使用している場合があります。この場合、Shopify管理画面を使用してテンプレートを更新すると、開発者がサイトを更新した際にFanplayrのトラッキングが失われる可能性があります。

ユーザートラッキングスクリプトは、サイトのヘッダーまたはフッターのどちらかに入力できます。サイトのコンテンツが先に読み込まれ、ページ速度に影響を与えないように、フッターに配置することをお勧めします。Fanplayrスクリプトは_非同期_に読み込まれるため、ヘッダーまたはフッターのどちらに実装してもページ速度に大きな影響を与えることはありません。

テーマテンプレートの検索

Shopifyストアの管理画面にログインします
オンラインストア / テーマ に移動します

"..."をクリックして、HTML/CSSを編集を選択します。

theme.liquid テンプレートを選択します

トラッキングテンプレートの追加

次のコードをtheme.liquidに追加し、ファイルを保存します。閉じタグの**</body>**の直前に追加することをお勧めします。

注: ACCOUNT_KEY と LOADER_URL は、Fanplayrから提供された情報に置き換える必要があります。

html

<script>
  (function(d, w, s) {
  {%- assign pageType = 'page' -%}
    {%- case template -%}
      {%- when 'index' -%}
         {%- assign pageType = 'home' -%}
      {%- when 'product' -%}
         {%- assign pageType = 'prod' -%}
      {%- when 'collection' -%}
         {% assign pageType = 'cat' -%}
      {%- when 'cart' -%}
         {% assign pageType = 'cart' -%}
      {%- when 'search' -%}
         {% assign pageType = 'srch' -%}
      {%- when 'blog' -%}
         {%- assign pageType = 'blog' -%}
    {%- endcase -%}
    {%- assign lineItemCount = 0 -%}
    {%- assign numItems = 0 -%}
    {% assign subTotal = 0 %}

    var items = [];
    {%- for item in cart.items -%}
      {%- assign lineItemCount = lineItemCount | plus: 1 -%}
      {%- assign numItems = numItems | plus: item.quantity -%}
      {%- assign lineItemPrice = item.price | times: item.quantity -%}
      {%- assign subTotal = subTotal | plus: lineItemPrice -%};
      items.push({
        id: "{{ item.product_id }}",
        sku: "{{ item.sku }}".replace(/&quot;/g, '"').replace(/&#39;/g, "'"),
        price: {{ item.price }} / 100 || 0, qty: {{ item.quantity }},
        name: "{{ item.title }}".replace(/&quot;/g, '"').replace(/&#39;/g, "'"),
        qty: "{{ item.quantity }}",
        url: "//" + window.location.hostname + "{{ item.url }}",
        image: "{{ item | img_url }}"
      });

    {%- endfor -%}

    var f = w.fanplayr = w.fanplayr || { _i:[] };
    f._i.push({
      version: 3,
      accountKey: 'ACCOUNT_KEY',
      allowOfferPrompt: false,
      applyToCartUrl: '/discount/%c?redirect=' + window.location.pathname + window.location.search + '#FP_COUPON_APPLIED',
      data: {
        lineItemCount: {{ lineItemCount }},
        numItems: {{ numItems }},
        subTotal: parseFloat('{{ subTotal }}') / 100 || 0,
        total: parseFloat('{{ subTotal }}') / 100 || 0,
        discount: 0,
        discountCode: '',
        pageType: '{{ pageType }}',
        categoryId: '{{ collection.id | replace: "'", "&#39;" }}'.replace(/&#39;/g, "'"),
        categoryName: '{{ collection.title | replace: "'", "&#39;" }}'.replace(/&#39;/g, "'"),
        productId: '{{ product.id | replace: "'", "&#39;" }}'.replace(/&#39;/g, "'"),
        productName: '{{ product.title | replace: "'", "&#39;" }}'.replace(/&#39;/g, "'"),
        productSku: '{{ product.sku | replace: "'", "&#39;" }}'.replace(/&#39;/g, "'"),
        productPrice: parseFloat('{{ product.price }}') / 100 || 0,
        productUrl: '//' + window.location.hostname + '{{ product.url }}',
        productImage: '{{ product.featured_image | img_url }}',
        currency: '{{ shop.currency }}',
        products : items,
        cartAction: 'override'
     }
    });
    var js = d.createElement(s);
    var fjs = d.getElementsByTagName(s)[0];
    js.async = true;
    js.src = 'LOADER_URL';
    fjs.parentNode.insertBefore(js, fjs);
  })(document, window, 'script');
</script>

注文トラッキング - レガシー

注文スクリプトは、設定の注文完了ページに追加します。

設定 / チェックアウト に移動します
注文処理までスクロールし、追加スクリプト ボックスを見つけます

以下のスクリプトを追加して保存します。

注: ACCOUNT_KEY と LOADER_URL は、Fanplayrから提供された情報に置き換える必要があります。また、STORE_DOMAIN はストアのドメインに置き換える必要があります。

html

<script>

  {%- assign discount = 0 -%}
  {%- assign discountCode = '' -%}
  {%- for discount in order.discounts -%}
    {%- assign discount = discount | plus: discount.savings -%}
    {%- assign discountCode = discountCode | append: discount.code -%}
    {%- assign discountCode = discountCode | append: ',' -%}
  {%- endfor -%}

  (function(d, w, s) {

    var items = [];
    {%- for item in order.line_items -%}
    items.push({
      id: "{{ item.product_id }}",
      sku: "{{ item.sku }}".replace(/&quot;/g, '"').replace(/&#39;/g, "'"),
      price: {{ item.price }} / 100 || 0,
      qty: {{ item.quantity }},
      name: "{{ item.title}}".replace(/&quot;/g, '"').replace(/&#39;/g, "'"),
      url: "//" + window.location.hostname + "{{ item.url }}",
      image: "{{ item | img_url }}"
    });
    {%- endfor -%}

    if ( !w.fp_sales_orders ) {
      w.fp_sales_orders = {
        version: 3,
        accountKey: 'ACCOUNT_KEY',
        storeDomain: 'STORE_DOMAIN',
        data: {
          orderId: '{{ order.order_number }}',
          orderNumber: '{{ order.order_number }}',
          subTotal: (parseFloat('{{ order.total_price }}') / 100 || 0) - (parseFloat('{{ order.tax_price }}') / 100 || 0) - (parseFloat('{{ order.shipping_price }}') / 100 || 0) + (Math.abs(parseFloat('{{ discount }}') / 100 || 0)),
          total: parseFloat('{{ order.subtotal_price }}') / 100 || 0,
          discount: Math.abs(parseFloat('{{ discount }}') / 100 || 0),
          discountCode: '{{ discountCode | replace: "'", "&#39;" }}'.replace(/&#39;/g, "'").substr(0, '{{ discountCode | replace: "'", "&#39;" }}'.replace(/&#39;/g, "'").length - 1),
          shipping: parseFloat('{{ order.shipping_price }}') / 100 || 0,
          tax: parseFloat('{{ order.tax_price }}') / 100 || 0,
          currency: '{{ shop.currency }}',
          orderEmail: '{{ order.email | replace: "'", "&#39;" }}'.replace(/&quot;/g, "'").replace(/&#39;/g, "'"),
          firstName: '{{ order.customer.first_name | replace: "'", "&#39;" }}'.replace(/&quot;/g, '"').replace(/&#39;/g, "'"),
          lastName: '{{ order.customer.last_name | replace: "'", "&#39;" }}'.replace(/&quot;/g, '"').replace(/&#39;/g, "'"),
          customerEmail: '{{ order.customer.email| replace: "'", "&#39;" }}'.replace(/&quot;/g, '"').replace(/&#39;/g, "'"),
          customerId: '{{ order.customer.id }}',
          products: items,
          cartAction: 'override'
        }
      };
      var js = d.createElement(s);
      var fjs = d.getElementsByTagName(s)[0];
      js.async = true;
      js.src = 'LOADER_URL';
      fjs.parentNode.insertBefore(js, fjs);
    }
  })(document, window, 'script');
</script>

注文トラッキング - Checkout Extensibility

注文トラッキングはCustom Pixelとして有効化されます。

設定に移動します。
次に、顧客イベント に移動します。
カスタムピクセルを追加 をクリックし、「Fanplayr Order Tracking」と名前を付けます。
許可を不要に設定します。
データ販売 を 収集されたデータはデータ販売に該当しません に設定します。
以下のJavaScriptコードをコードエディターにコピー＆ペーストします。コード内のACCOUNT_KEYとSTORE_DOMAIN変数をFanplayrから提供された値で更新してください。
新しいカスタムピクセルを保存します。
接続をクリックしてピクセルを有効にします。

analytics.subscribe('checkout_completed', (event) => {
  const checkout = event.data.checkout;

  const allDiscountCodes = (checkout.discountApplications ?? [])
    .filter(
      (discount) =>
        discount.type === 'DISCOUNT_CODE' || discount.type === 'MANUAL'
    )
    .map((discount) => discount.title);

  const resolveUrl = (url) => {
    return new URL(
      url,
      event.context?.document?.location?.origin ?? document.location.origin
    ).toString();
  };

  const products = [];
  let discountTotal = 0;
  for (const item of checkout.lineItems) {
    const product = {
      id: item.variant?.product?.id,
      sku: item.variant?.sku,
      name: item.title,
      price: item.variant?.price?.amount,
      qty: item.quantity ?? 1,
      url: resolveUrl(item.variant?.product?.url),
      image: item.variant?.image?.src
    };
    if (item.discountAllocations) {
      for (const entry of item.discountAllocations) {
        discountTotal += entry?.amount?.amount ?? 0;
      }
    }
    products.push(product);
  }
  window.fanplayr = {
    allowInFrame: true
  };

  window.fp_sales_orders = {
    version: 3,
    accountKey: 'ACCOUNT_KEY',
    storeDomain: 'STORE_DOMAIN',
    data: {
      orderId: checkout.order?.id,
      orderNumber: checkout.order?.id,
      gross: (checkout.totalPrice?.amount ?? 0) + discountTotal,
      discount: discountTotal,
      discountCode: allDiscountCodes.join(','),
      shipping: checkout.shippingLine?.price?.amount,
      tax: checkout.totalTax?.amount,
      currency: checkout.currencyCode,
      products: products,
      cartAction: 'override'
    }
  };

  var js = document.createElement('script');
  var fjs = document.getElementsByTagName('script')[0];
  js.async = true;
  js.src = 'https://cdn.fanplayr.com/client/production/fp_custom_orders.js';
  fjs.parentNode.insertBefore(js, fjs);
});

Shopify Plusのチェックアウト

Shopify Plusアカウントをお持ちの場合、Fanplayrウィジェットをチェックアウトに追加できます。これにより、ユーザーが訪問中に収集した割引を思い出させ、割引の適用を支援します。

テーマテンプレートの検索

Shopifyストアの管理画面にログインします
オンラインストア / テーマ に移動します

"..."をクリックして、HTML/CSSを編集を選択します。

checkout.liquid テンプレートを選択します

トラッキングテンプレートの追加

次のコードをcheckout.liquidに追加し、ファイルを保存します。閉じタグの**</body>の直前に追加する必要があります**。

html

<script>
  (function (d, w, s) {
    var f = (w.fanplayr = w.fanplayr || { _i: [] });

    var noDiscountApplied = true;
    var spans = document.getElementsByTagName('span');
    for (var i in spans) {
      if (!spans[i].getAttribute) {
        continue;
      }
      var attr = spans[i].getAttribute('data-checkout-discount-amount-target');
      if (attr) {
        noDiscountApplied = false;
      }
    }

    var checkForCouponApplication = function () {
      var m = window.location.hash.match(/coupon=([^&]+)/);
      if (m && m.length == 2) {
        window.location.hash = '';
        var el = document.getElementById('checkout_reduction_code');
        if (el) {
          el.value = m[1];
          var btn = el.parentNode.parentNode.getElementsByTagName('button');
          if (btn.length) {
            btn[0].removeAttribute('disabled');
            btn[0].click();
          }
        }
      }
    };
    var couponInterval = setInterval(checkForCouponApplication, 100);

    f._i.push({
      version: 3,
      accountKey: 'ACCOUNT_KEY',
      storeDomain: 'STORE_DOMAIN',
      applyToCartUrl: '#coupon=%c',
      allowOfferPrompt: noDiscountApplied,
      data: {
        pageType: 'checkout',
        currency: '{{ shop.currency }}',
        cartAction: 'repeat'
      }
    });
    var js = d.createElement(s);
    var fjs = d.getElementsByTagName(s)[0];
    js.async = true;
    js.src = 'LOADER_URL';
    fjs.parentNode.insertBefore(js, fjs);
  })(document, window, 'script');
</script>

ダッシュボード

セグメンテーション

ウィジェットの編集

ウィジェットの管理

詳細なトピック

付録

コンポーネントの参照

アカウント

ストア

請求

その他

Magento 1

ページトラッキング

データタイプ

強化ユーザー識別

ヴァージョンのカスタムデータ

Salesforce Marketing Cloud

APIアクセス

フィルター

アイデアー

自動化

パイプライン

エクスポート

プロファイル

ソース

ディストリビューション

カタログ

マッピング

データ辞書

コンプライアンス

アカウント設定

Javascript API

カスタムAPI

意味的データ

意味的イベント

Shopify ​

ユーザートラッキング ​

テーマテンプレートの検索 ​

トラッキングテンプレートの追加 ​

注文トラッキング - レガシー ​

注文トラッキング - Checkout Extensibility ​

Shopify Plusのチェックアウト ​

テーマテンプレートの検索 ​

トラッキングテンプレートの追加 ​

Shopify

ユーザートラッキング

テーマテンプレートの検索

トラッキングテンプレートの追加

注文トラッキング - レガシー

注文トラッキング - Checkout Extensibility

Shopify Plusのチェックアウト

テーマテンプレートの検索

トラッキングテンプレートの追加