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>

注文トラッキング - チェックアウト拡張機能

注文トラッキングはカスタムピクセルとして有効化されます。

設定 / カスタムイベント に移動します
カスタムピクセルを追加 をクリックし、「Fanplayr Order Tracking」と名前を付けます
権限を「不要」に設定します
以下のスクリプトをコード テキストエリアに追加します
新しいカスタムピクセルを保存します
接続をクリックしてピクセルをストアに接続します

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

javascript

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);

  var products = [];

  for (var i = 0; i < checkout.lineItems.length; i++) {
    var prod = checkout.lineItems[i];
    products.push({
      id: prod.id,
      sku: prod.id,
      price: parseFloat(
        (prod.finalLinePrice.amount / prod.quantity).toFixed(2)
      ),
      qty: prod.quantity,
      name: prod.title
    });
  }

  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.subtotalPrice.amount,
      discount: checkout.discountsAmount.amount,
      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 ​

ユーザートラッキング ​

テーマテンプレートの探し方 ​

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

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

注文トラッキング - チェックアウト拡張機能 ​

Shopify Plus チェックアウト ​

テーマテンプレートの探し方 ​

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

Shopify

ユーザートラッキング

テーマテンプレートの探し方

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

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

注文トラッキング - チェックアウト拡張機能

Shopify Plus チェックアウト

テーマテンプレートの探し方

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