ショッピファイ

Shopifyストアとの連携は簡単です。現在、Shopifyアプリとしてはまだ利用できませんが、Fanplayr 360をお客様のストアで動作させるのは、2つのコードスニペットをコピー＆ペーストするだけで済みます。

開始方法

新しいShopify連携を追加するには：

• 連携 / カタログ / ウェブ、アプリ、その他の順に移動します。
• Shopify連携をクリックします。
• ソースの下にある、ウェブサイトイベント追跡アイテムの「追加」をクリックします。
• ソース連携に名前を追加します。これは、Fanplayr 360システム全体で参照する方法になります。
• 保存をクリックします。
• 書き込みキーと_エンドポイント_が生成され表示されます。これらは以下の手順で、_WRITE_KEY_および_ENDPOINT_として参照されます。

ページ右上のスイッチで、この連携を使用する準備ができたらいつでも有効にすることを忘れないでください。

ページトラッキング

1. ストア管理画面にログインします。
2. オンラインストア > テーマの順に移動します。
3. 3つの点をクリックし、コードを編集をクリックします。

• theme.liquidをクリックします。

• ページの最下部、閉じ</body>タグの直前に以下のコードを追加してください。

INFO

WRITE_KEYを以前作成したものに置き換えるのを忘れないでください。

<script>
  (function(t,n){const e=window;let r=e[n];if(!r){r=e[n]=[]}let o=false;try{for(const t of[1]){}crypto.subtle.digest("SHA-256",new ArrayBuffer(0))}catch(t){o=true}if(o){console.log("Fanplayr ignoring old browser");return}const c=["identify","page","track","setConfig","user.set","user.setOnce","user.unset","user.increment"];function s(t){const n=t.split(".");let e=n[0];let o=r;if(n.length===2){o=r[e]=r[e]||{};e=n[1]}o[e]=function(){const n=[t];n.push(...Array.prototype.slice.call(arguments));r.push(n);return r}}for(let t=0;t<c.length;t++){var f=c[t];s(f)}r.init=function(e,o){const c=t.createElement("script");c.type="module";c.async=true;c.dataset["fpLibName"]=n;c.src=typeof FANPLAYR_CUSTOM_LIB_URL!=="undefined"?FANPLAYR_CUSTOM_LIB_URL:"https://cdn.fanplayr.com/cdp/fanplayr-latest.min.js";const s=t.getElementsByTagName("script")[0];s.parentNode.insertBefore(c,s);r["_options"]=o;r["_writeKey"]=e;r["_stubVersion"]="1.0.0"};return r})(document,"fp360");

  fp360.init({
    writeKey: "WRITE_KEY",
    endpoint: "ENDPOINT",
    debug: true
  });

{%- assign pageType = "other" -%}
  {%- case template -%}
    {%- when "index" -%}
        {%- assign pageType = "home" -%}
    {%- when "product" -%}
        {%- assign pageType = "product" -%}
    {%- when "collection" -%}
        {% assign pageType = "category" -%}
    {%- when "cart" -%}
        {% assign pageType = "cart" -%}
    {%- when "search" -%}
        {% assign pageType = "search" -%}
    {%- when "blog" -%}
        {%- assign pageType = "blog" -%}
  {%- endcase -%}

  fp360.page({
    type: {{ pageType | json }}
  });

  {% if template == "collection" %}
  (function(){
    var products = [];
    {%- for product in collection.products -%}
    products.push({
      id: {{ product.id | json }},
      name: {{ product.title | json }},
      price: {{ product.price | divided_by: 100 | json }},
      url: new URL({{ product.url | json }}, location).href,
      imageUrl: new URL({{ product.featured_image | img_url | json }}, location).href
    });
    {%- endfor %}
    fp360.track("Product List Viewed", {
      $products: products
    });
  })();
  {% endif %}

  {% if template == "cart" %}
  (function(){
    var products = [];
    {%- for item in cart.items -%}
    products.push({
      id: {{ item.product_id | json }},
      name: {{ item.title | json }},
      price: {{ item.price | divided_by: 100 | json }},
      url: new URL({{ item.url | json }}, location).href,
      imageUrl: {{ item | img_url | json }},
      quantity: {{ item.quantity | json }}
    });
    {%- endfor %}
    fp360.track("Cart Viewed", {
      $cart: {
        currency: "USD",
        products: products
      }
    });
  })();
  {% endif %}

  {% if template == "product" %}
  fp360.track("Product Viewed", {
    $product: {
      id: {{ product.id | json }},
      name: {{ product.title | json }},
      price: {{ product.price | divided_by: 100 | json }},
      url: new URL({{ product.url | json }}, location).href,
      imageUrl: new URL({{ product.featured_image | img_url | json }}, location).href
    }
  });
  {% endif %}
</script>

注文確認ページ

• ストア管理画面の左下にある設定をクリックします。

• チェックアウトとアカウントをクリックします。

• 注文状況ページの入力欄までスクロールし、注文を追跡するために以下のスクリプトを追加します。

INFO

繰り返しますが、WRITE_KEYを以前作成したものに置き換えるのを忘れないでください。

<script>
  (function(t,n){const e=window;let r=e[n];if(!r){r=e[n]=[]}let o=false;try{for(const t of[1]){}crypto.subtle.digest("SHA-256",new ArrayBuffer(0))}catch(t){o=true}if(o){console.log("Fanplayr ignoring old browser");return}const c=["identify","page","track","setConfig","user.set","user.setOnce","user.unset","user.increment"];function s(t){const n=t.split(".");let e=n[0];let o=r;if(n.length===2){o=r[e]=r[e]||{};e=n[1]}o[e]=function(){const n=[t];n.push(...Array.prototype.slice.call(arguments));r.push(n);return r}}for(let t=0;t<c.length;t++){var f=c[t];s(f)}r.init=function(e,o){const c=t.createElement("script");c.type="module";c.async=true;c.dataset["fpLibName"]=n;c.src=typeof FANPLAYR_CUSTOM_LIB_URL!=="undefined"?FANPLAYR_CUSTOM_LIB_URL:"https://cdn.fanplayr.com/cdp/fanplayr-latest.min.js";const s=t.getElementsByTagName("script")[0];s.parentNode.insertBefore(c,s);r["_options"]=o;r["_writeKey"]=e;r["_stubVersion"]="1.0.0"};return r})(document,"fp360");

  fp360.init({
    writeKey: "WRITE_KEY",
    endpoint: "ENDPOINT",
    debug: true
  });

  fp360.page({
    type: "Order Completed"
  });

  (function() {
    var order_number = {{order.order_number | json}};
    var subtotal_price = parseFloat("{{order.subtotal_price}}") / 100 || 0;
    var total_price = parseFloat("{{order.total_price}}") / 100 || 0;
    var tax_price = parseFloat("{{order.tax_price}}") / 100 || 0;
    var shipping_price = parseFloat("{{order.shipping_price}}") / 100 || 0;
    var discount = parseFloat("{{order.discount}}") / 100 || 0;
    var discountCode = {{discountCode | json}};
    var currency = {{shop.currency | json}};

    var products = [];
{%- for item in order.line_items -%}
    products.push({
      id: {{ item.product_id | json }},
      price: {{ item.price | divided_by: 100 | json }},
      quantity: {{ item.quantity | json }},
      name: {{ item.title | json}},
      url: "//" + window.location.hostname + {{ item.url | json }},
      imageUrl: {{ item | img_url | json }}
    });
    {%- endfor %}

    fp360.track("Order Completed", {
      $order: {
        orderNumber: order_number,
        revenue: subtotal_price,
        discount: discount,
        discountCode: discountCode,
        shipping: shipping_price,
        tax: tax_price,
        currency: currency,
        products: products
      }
    });
  })();
</script>