JavaScript API

ライブラリの初期化

このHTMLスクリプトタグをページの<head>タグ内に貼り付け、WRITE_KEY と ENDPOINT を作成した連携で生成された書き込みキーとエンドポイントに置き換えてください。

html

<script type="text/javascript">
  (function (r, t) {
    var e = window;
    var n = e[t];
    if (!n) {
      n = e[t] = [];
    }
    var a = [
      'identify',
      'page',
      'track',
      'flush',
      'setSessionId',
      'setUserId',
      'setConfig',
      'user.set',
      'user.setOnce',
      'user.unset',
      'user.increment'
    ];
    function s(r) {
      var e = r.split('.');
      var a = e[0];
      var s = n;
      if (e.length === 2) {
        s = n[a] = n[a] || {};
        a = e[1];
      }
      s[a] = function () {
        var t = [r];
        t.push.apply(t, Array.prototype.slice.call(arguments));
        n.push(t);
        return n;
      };
      s[a].toString = function () {
        return ''.concat(t, '.').concat(r, ' (stub)');
      };
    }
    for (var i = 0; i < a.length; i++) {
      var u = a[i];
      s(u);
    }
    n.init = function (e) {
      var a = r.createElement('script');
      a.type = 'text/javascript';
      a.async = true;
      a.setAttribute('data-fp-lib-name', t);
      a.src =
        typeof FANPLAYR_CUSTOM_LIB_URL !== 'undefined'
          ? FANPLAYR_CUSTOM_LIB_URL
          : 'https://cdn.fanplayr.com/cdp/fanplayr-latest.min.js';
      var s = r.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(a, s);
      n['_config'] = e;
      n['_snippetVersion'] = '1.0.4';
    };
    return n;
  })(document, 'fp360');

  fp360.init({
    writeKey: 'WRITE_KEY',
    endpoint: 'ENDPOINT',
    debug: true
  });
</script>

上記のコードが実行されると、fp360オブジェクトがJavaScriptでグローバルに利用可能になります。

DANGER

debugフラグは実装中に役立ちますが、本番環境での使用には削除することをお勧めします。

イベントをトラッキングする

Fanplayr 360ライブラリがページに読み込まれると、イベント名とプロパティを指定してfp360.trackを呼び出すことでイベントをトラッキングできます。

javascript

fp360.track('Product Viewed', {
  MyCustomAttribute: 'My Custom Attribute',
  $product: {
    name: 'Red Shoes'
  }
});

WARNING

トラッキングコールにはセマンティックデータを含めることができます。カスタム属性を送信する場合は、常にシンプルなキーと値のペアを送信する必要がありますが、セマンティックデータにはオブジェクトを含めることができます。

上記の例では、$product セマンティックオブジェクトを使用しています。

セッションの管理

JavaScriptライブラリは、セッションおよびユーザー識別子を自動的に管理します。PrivacyIDのようなサービスを使用している場合など、セッションまたはユーザー識別子を手動で設定する必要がある場合は、以下を呼び出すことができます。

javascript

// セッション識別子を設定
fp360.setSessionId('<SESSION IDENTIFER>');

// プライマリユーザー識別子を設定
fp360.setUserId('<USER IDENTIFIER>');

セッションは、指定されたセッション識別子で送信された最後のイベントから45分後に自動的に終了します。

INFO

ここで設定されるユーザーIDはユーザーIDの管理とは異なり、一般的にこれらの処理は不要です。

ページをトラッキングする

pageコールを使用すると、ユーザーがウェブサイトのページを閲覧するたびに、ページに関するオプションのプロパティと共に記録できます。

javascript

fp360.page({
  type: 'home',
  name: 'My Page Title'
});

typeには任意の値を提供できますが、以下のいずれかを使用すると、インサイトに機能を追加するために使用される場合があります。

"home"
"category"
"product"
"cart"
"search"
"blog"
"checkout"

ユーザーIDの管理

プライマリID

デフォルトでは、Fanplayr 360はユーザーの一意の識別子（UUID）を生成し、ブラウザのLocalStorageに保存します。この識別子は、ユーザーに独自の一意の値を指定することで上書きできます。

javascript

fp360.setUserId('UNIQUE_USER_ID');

セカンダリID

ユーザーは複数のデバイスを使用してビジネスとやり取りする可能性があり、setUserIdメソッドでユーザーの一貫したプライマリ識別子を提供しない限り、各デバイスで異なるユーザーとして表示されます。

各ページビューの開始時にすぐにプライマリ識別子を提供できない場合、代替策として、Fanplayr 360がプライマリ識別子を相互にリンクするために使用するセカンダリ識別子を提供する方法があります。これらはidentifyメソッドを使用して「キー」と「値」のペアとして提供されます。

たとえば、メールアドレスや顧客ロイヤルティ番号は、異なるデバイスやビジネス内のシステム間でユーザーに一意であり続けるはずなので、優れたセカンダリ識別子となり得ます。

javascript

fp360.identify('email', 'user@example.com');

上記の例は、セカンダリ識別子を現在のユーザーに関連付けます。Fanplayr 360が同じセカンダリ識別子のいずれかを持つ2人のユーザー（プライマリID）を認識すると、それらのユーザーをリンクし、すべてのイベントと属性が同じユーザープロファイルに関連付けられるようにします。

INFO

これは複数回呼び出しても問題ありません。たとえば、実装を簡素化するためにすべてのページビューでこれを呼び出すこともできます。JavaScriptライブラリは、変更があった場合にのみデータを送信するように処理します。

WARNING

emailまたはphoneを識別子として使用すると、これらはセマンティックユーザー属性$emailおよび$phoneとして自動的に追加されます。さらに、これらの識別子は自動的に識別子:$emailおよび$phoneにマッピングされます。

INFO

すべてのユーザーIDは自動的に中度PIIと見なされます。PIIの詳細についてはこちらをご覧ください。

ユーザープロファイルの管理

属性はuser.setコールを使用してユーザーに直接設定できます。また、まだ設定されていない情報のみを設定する場合はuser.setOnceコールを使用し、プロパティを削除する場合はuser.unsetコールを使用し、カウンターを増やす場合はuser.incrementコールを使用できます。

属性の設定

javascript

fp360.user.set({
  $firstName: 'John',
  $lastName: 'Doe',
  favoriteColor: 'red'
});

この例では、2つのセマンティック属性（$で始まるもの）をトラッキングしています。これらは、システム内で追加機能を追加するために使用されます。

一度に1つの属性を設定することもできます。

javascript

fp360.user.set('favoriteColor', 'green');

一度だけ設定

属性がまだ存在しない場合にのみ設定したい場合は、次のようにします。

javascript

fp360.user.setOnce({
  $firstName: 'Jan',
  favoriteColor: 'purple'
});

または、一度に1つの項目を設定する場合:

javascript

fp360.user.setOnce("favoriteColor": "purple"})

有効期限

ユーザーに特定の日時までのみ有効な属性を設定したい場合があります。これは、JavaScriptのDateオブジェクト、エポックからのミリ秒数を示すtimestamp、またはYYYY-MM-DD HH:mm:ss形式のstringを送信することで実行できます。

複数の属性を一度に設定できます。以下の例はすべて同じ日付と時刻にマッピングされます。

javascript

// js date object
fp360.user.set(
  {
    favoriteColor: 'red'
  },
  { expires: new Date('2022-01-01 12:23:01') }
);

// timestamp
fp360.user.set(
  {
    favoriteColor: 'red'
  },
  { expires: 1641057781000 }
);

// relative time
fp360.user.set(
  {
    favoriteColor: 'red'
  },
  { expires: '1day' }
);

または、単一の属性の場合：

javascript

fp360.user.set('favoriteColor', 'red', { expires: '5min' });

相対時間には、整数とその後に続く以下のいずれかを使用できます。ただし、最初の文字のみを指定すれば十分です。

second(s) (秒)
minute(s) (分)
hour(s) (時間)
day(s) (日)
week(s) (週)
year(s) (年)

たとえば、「今から3分後」の場合は、expiresを「3m」、「3 minutes」などに設定できます。

属性の削除

ユーザーの複数の属性を、キーを配列として送信することで削除できます。

javascript

fp360.user.unset(['favoriteColor', '$firstName']);

または、キーのみを指定して単一の属性を削除できます。

javascript

fp360.user.unset('favoriteColor');

属性のインクリメント

属性のインクリメントは、ユーザーに直接カウントを追加するために使用できます。

javascript

fp360.user.increment('numberOfGoodChoices');

ユーザープロファイルにその属性がまだ存在しない場合、値は1に設定されます。

WARNING

同名の属性が既に存在し、それが整数ではない場合、その値も1に設定されます。これは、値が実際の1ではなく文字列の"1"である場合でも同様です。また、10.5のような浮動小数点値も、最初のインクリメント呼び出しで1にリセットされます。

属性を1より大きくインクリメントすることもできます。

javascript

fp360.user.increment('numberOfGoodChoices', 10);

ユーザーの同意の管理

ユーザーの同意を追跡することは、GDPRやCCPAなどの規制を遵守し、ユーザーを満足させるために非常に重要です。当社は、詳細な同意追跡を広範囲にサポートしています。

同意の追加

ユーザーの同意を追加するには、最低でも「email」や「phone」などのtypeと、「person@example.com」などのvalueが必要です。

javascript

fp360.consent.set('email', 'person@example.com');

上記は、ユーザーが指定されたメールアドレスであなたの会社からメールで連絡を受けることに同意したことを示すだけです。どのようなpurpose（目的）や特定のtopics（トピック）に興味があるかは示していません。

目的の追加

javascript

fp360.consent.set('email', 'person@example.com', {
  purpose: [
    {
      type: 'marketing'
    },
    {
      type: 'transactional'
    }
  ]
});

上記のコードは、ユーザーが特定のメールアドレスで、「マーケティング」と「トランザクション」（注文確認などのメール）の両方のpurposeで、メールによる連絡を許可したことを示します。

トピックの追加

ユーザーが特定の目的、または特定の製品に関してのみ連絡を受けたい場合があります。これには以下を使用できます。

javascript

fp360.consent.set('email', 'person@example.com', {
  purpose: [
    {
      type: 'marketing',
      topics: ["Men's Clothing", "Men's Accessories"]
    }
  ]
});

上記のコードは、ユーザーが特定のメールアドレスで、「マーケティング」のpurposeで、ただし「Men's Clothing」または「Men's accessories」のtopicsに限定して、メールによる連絡を許可したことを示します。

INFO

既に存在するtype / valueに対して同意を設定すると、現在のpurposeとtopicsが上書きされます。各呼び出しで常にこれらのすべてのプロパティを設定していることを確認してください。

同意の削除

ユーザーの同意を削除するのは簡単で、typeとvalueのみが必要です。

javascript

fp360.consent.unset('email', 'person@example.com');

メッセージキューのフラッシュ

Fanplayr 360は、イベントやその他の追跡されるデータをキューに入れ、バッチ処理して、追跡コールを最適化し、ウェブサイト訪問者へのネットワークリクエストの負荷を軽減します。

場合によっては、すべてのメッセージが追跡されたことを知って、他のページへのナビゲーションを許可する必要があるかもしれません。たとえば、フォーム送信を表すイベントを追跡していて、ユーザーをウェブサイトの別の部分にナビゲートする前に追跡が完了するのを待ちたい場合などです。この場合、flush APIを使用します。

javascript

fp360.track('Contact Form Submitted', {
  email: 'me@domain.com',
  message: 'Helloworld!'
});

fp360.flush(function () {
  // Fanplayr 360のイベントは正常に追跡され、ユーザーは
  // 別のページにナビゲートできます。
});

Fanplayrターゲティングとの併用

Fanplayr 360は、Fanplayrターゲティングの連携によって既にキャプチャされているデータを簡単に追跡するように設定できます。これは次のように機能します。

ブラウザ内: FP 360は、FPターゲティングが管理するユーザーIDとセッションIDを割り当てるのを待つように設定されています。
FP 360トラッキングAPI（イベントのトラッキング、ユーザーデータの管理など）はいつでも呼び出すことができ、これらの呼び出しはFPターゲティングがユーザーIDとセッションIDを同期するまで自動的にキューに入れられます。
FPターゲティングセッションの有効期限切れ後: 完了したFPターゲティングセッションの処理中に、Fanplayrのサーバーは、発生したページビュー、注文、その他のイベントをFP 360内の同等のイベントと操作に自動的に変換します。

ステップ1：Fanplayr 360の設定

FP 360の初期化スニペットを更新して、autoStartSessionをfalseに設定することでブラウジングセッションの自動開始を無効にします。これにより、ライブラリはFanplayrターゲティングによってsetSessionIdおよびsetUserIdメソッドが呼び出されるまで待機するように指示されます。

javascript

fp360.init({
  writeKey: 'WRITE_KEY',
  endpoint: 'ENDPOINT',
  autoStartSession: false
});

ステップ2：FanplayrターゲティングでID同期を有効にする

INFO

現在、Fanplayrターゲティングポータル内でID同期を有効にするためのユーザーがアクセスできるコントロールはありません。この機能をお客様のアカウントで有効にするには、カスタマーサクセスマネージャーにご連絡ください。

これが完了すると、FanplayrターゲティングはユーザーIDとセッションIDをFanplayr 360 JavaScript連携と自動的に同期します。

セグメンテーション

ウィジェットの編集

ウィジェットの管理

詳細なトピック

付録

コンポーネントの参照

アカウント

ストア

請求

その他

Magento 1

ページトラッキング

データタイプ

強化ユーザー識別

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

Salesforce Marketing Cloud

APIアクセス

フィルター

アイデアー

自動化

パイプライン

エクスポート

プロファイル

ソース

ディストリビューション

カタログ

マッピング

データ辞書

コンプライアンス

アカウント設定

Javascript API

カスタムAPI

意味的データ

意味的イベント

JavaScript API ​

ライブラリの初期化 ​

イベントをトラッキングする ​

セッションの管理 ​

ページをトラッキングする ​

ユーザーIDの管理 ​

プライマリID ​

セカンダリID ​

ユーザープロファイルの管理 ​

属性の設定 ​

一度だけ設定 ​

有効期限 ​

属性の削除 ​

属性のインクリメント ​

ユーザーの同意の管理 ​

同意の追加 ​

目的の追加 ​

トピックの追加 ​

同意の削除 ​

メッセージキューのフラッシュ ​

Fanplayrターゲティングとの併用 ​

ステップ1：Fanplayr 360の設定 ​

ステップ2：FanplayrターゲティングでID同期を有効にする ​

JavaScript API

ライブラリの初期化

イベントをトラッキングする

セッションの管理

ページをトラッキングする

ユーザーIDの管理

プライマリID

セカンダリID

ユーザープロファイルの管理

属性の設定

一度だけ設定

有効期限

属性の削除

属性のインクリメント

ユーザーの同意の管理

同意の追加

目的の追加

トピックの追加

同意の削除

メッセージキューのフラッシュ

Fanplayrターゲティングとの併用

ステップ1：Fanplayr 360の設定

ステップ2：FanplayrターゲティングでID同期を有効にする