Salesforce Commerce Cloud

概要

Fanplayrは、あなたのサイトにおけるユーザー行動を追跡し、これらのユーザーにオファーやコールトゥアクションを提示することを可能にします。

一般的なページビューと注文詳細の両方がFanplayrによって追跡されます。

また、「セッションクーポン」機能をサイトに追加するオプションもあります。これにより、Fanplayrを介して、そのユーザーのみに有効なオファーをユーザーに表示できます。この機能は、オファーがオファー共有サイトに掲載されるのを防ぎます。

このドキュメントでは、Fanplayrカートリッジのインストールと、SiteGenesisストアに統合できるポイントについて詳しく説明します。ストアの統合は異なる場合がありますのでご注意ください。

開始する前に、Fanplayrの担当者からACCOUNT KEYを入手する必要があります。

ダウンロード

https://cdn.fanplayr.com/integrations/sfcc/packages/commercecloud-20.3.zip

インストール

カートリッジをインストールし、ストアに統合するには、以下の手順を実行します。

サイト設定のインポート
UX Studioへのカートリッジのインポート
有効なカートリッジパスへの追加
サイト設定のセットアップ
テンプレートへのFanplayrタグの追加
トラッキングのテスト
「カートに適用」のテスト
セッションオファーのセットアップ
パイプラインの使用
コントローラーの使用
セッションオファーのテスト

サイト設定のインポート

最初に行うことは、設定のインポートです

Business Managerにログインします
管理 / サイト開発 / インポート&エクスポートに移動します
インポート&エクスポートファイルの「アップロード」をクリックします

ファイル _/metadata/fanplayr_preferences.xml_ を選択し、アップロードをクリックします
管理 / サイト開発 / インポート&エクスポートに戻り、インポートリンクをクリックします

新しくアップロードしたファイルを選択します。「次へ >>」をクリックします。

ステップ3には以下の情報が表示されるはずです。右下の「インポート」リンクをクリックします。

これで、マーチャントツール / サイト設定 / カスタムサイト設定でFanplayr設定にアクセスできるはずです。

UX Studioへのカートリッジのインポート

UX Studioを使用してサイトを操作している場合、これらの手順は、スクリプト、コントローラー、パイプラインを含むカートリッジをインポートする方法を示しています。別の手法を使用してサイトを開発している場合は、ヘルプについてはお問い合わせいただくか、そこにカートリッジを追加するための一般的なルールに従ってください。

UX Studioを開きます
ファイル / インポートメニューに移動します
一般 / 既存のプロジェクトをワークスペースにを選択し、「次へ」をクリックします

ディレクトリ /int_fanplayr/ を選択し、Fanplayrのリストの横にあるチェックボックスをオンにします。「完了」をクリックします。これにより、Fanplayrコンポーネントがプロジェクトに追加されるはずです。これをストアと同期するかどうかを尋ねられる場合がありますので、その場合は同期してください。

有効なカートリッジパスへの追加

次に、Fanplayrを有効なカートリッジパスに追加する必要があります。これにより、サイトはFanplayrとともにインポートされたコードをサイト上で実行することを認識します。

Business Managerにログインします
管理 / サイト / サイト管理に移動します

あなたのサイトを選択します
設定に移動します
Cartridgesフィールドの先頭に「int_fanplayr:」（引用符なし、末尾にコロンがあることを確認）という文字列を追加します。

Fanplayrのコードがサイト上で実行されているはずです。/Fanplayr-Apply/ URLにアクセスして、実行されていることを確認できます。これが機能している場合はカートに移動し、機能していない場合はエラーページに移動します。

サイト設定のセットアップ

Fanplayrがトラッキングを開始する前に、FanplayrのACCOUNT KEYを環境設定に追加する必要があります。ACCOUNT KEYをお持ちでない場合は、Fanplayrの担当者にご連絡ください。

Business Managerにログインします
マーチャントツール / サイト設定 / カスタム設定に移動します

Fanplayrをクリックします

「Fanplayrを有効にする？」と「Fanplayrアカウントキー」の最初の2つの値は、Fanplayrがサイト上でトラッキングを開始するために必要です。

以下に、各オプションの詳細をリストします。

Fanplayrを有効にする？ (必須)

Fanplayrトラッキングを有効にするには、この値をtrueに設定します。

Fanplayrアカウントキー (必須)

Fanplayrでトラッキングを開始するには、アカウントキーを供給する必要があります。まだアカウントキーをお持ちでない場合は、Fanplayrのアカウントマネージャーにご連絡ください。

カートへの適用を有効にする？

この値をtrueに設定すると、Fanplayrウィジェットに「カートに追加」ボタンが表示され、現在のクーポンを適用しようとして、ユーザーをカートページに誘導します。

セッションオファーを有効にする？

Fanplayrには、Fanplayrを介してユーザーに与えられた（訪問者のセッションでFanplayrによって有効にされた）場合にのみクーポンを有効にする機能があります。セッションオファーの設定については、以下のセクションをご覧ください。これはデフォルトでtrueです。

セッションオファーのプレフィックス

セッションオファーには、クーポンにプレフィックスが必要です。このプレフィックスを持つクーポンは、Fanplayrスクリプトによって有効にされない限り、ユーザーに対して無効になります。これはデフォルトで"FPTEST_"であり、本番環境で使用するために変更する必要があります。

チェックアウト中に追跡しますか？

デフォルトでは、これはfalseに設定されています。PCI準拠を支援するため、チェックアウト中は追跡しません。チェックアウト中にFanplayrに追跡させたい場合は、このオプションを有効にしてください。支払い方法や詳細に関する情報は送信しませんのでご注意ください。

カスタムJS (非推奨)

ユーザーと注文の両方の追跡に追加されるJSを入力します。二重引用符とコメントはサポートされていません。

カスタムローダーJS URL

SFCCサイトからのデータがFanplayrに送信される前に処理される必要がある場合があります。この場合、Fanplayrはここに配置するJavaScriptファイルのURLを提供します。

商品画像ビュータイプ

商品の画像リンクを取得する際に、デフォルトの「large」を上書きします。

リダイレクトでHTTPSを強制しますか？

（例：カートへの）リダイレクトは、安全でないページから来た場合でも、HTTPからHTTPSに強制されます。画像と製品URLにもHTTPSを強制します。

「ORDER_STATUS_NEW」の注文のみを追跡しますか？

注文ステータスがNEWの場合にのみ注文を追跡します。一部のサイトでは、クレジットカードの失敗した注文を完了した注文として追跡する場合があります。

テンプレートにFanplayrタグを追加する

Fanplayrがトラッキングを開始するための最後のステップは、テンプレートにタグを追加することです。これは、すべてのページにあるテンプレートで行う必要があります。通常、これはヘッダーまたはフッターファイルにあり、場所は以下のとおりです。

ヘッダー: Templates/components/header/htmlhead.isml
フッター: Templates/components/footer/footer.isml

含めるタグは以下のとおりです。

html

<isinclude template="util/FanplayrTracking.isml" />

このテンプレートは、通常のユーザートラッキングと注文トラッキングの両方を追跡します。

トラッキングのテスト

この時点で、Fanplayrが期待どおりに詳細を追跡していることを確認することをお勧めします。これにはクーポンを設定する必要があります。

簡単にするために、次のようにクーポンを設定してみましょう。

カートから10%オフ
クーポンコードとして「FPTEST_10OFF」

商品をカートに追加し、通常のクーポン入力フィールドで入力されたコードがカートに適用されることを確認してください。

Fanplayrが追跡しているデータは、お気に入りのブラウザでJavascriptコンソールを開き、次の変数を検査することで確認できます。

javascript

window.fanplayr._i[0].data;

すると、次のようなものが表示されるはずです。

この変数を各ページタイプ（ホームページ、カテゴリページ、商品ページ、カート）で確認する必要があります。変更されるデータは以下のとおりです。

ホームページ
- pageType: "home"
カテゴリページ
- pageType: "cat"
- categoryId と categoryName が設定される
商品ページ
- pageType: "prod"
- productId, productImage, productName, productPrice, productSku, productUrl が設定される
カート
- pageType: "cart"

次に、注文を完了し、注文確認ページでJavascriptオブジェクトを検査します。

javascript

window.fp_sales_order.data;

次のようなものが表示されるはずです。

これで正しく追跡されているはずです。

カートに適用URLのテスト

次に、「カートに適用」ボタンが期待どおりに機能することを確認します。以下を実行してください。

商品をカートに追加します。
サイトのURLの末尾に「/Fanplayr-Apply?code=FPTEST_10OFF」を付けて移動します。

以前使用したのと同じクーポンコードを使用していることに注意してください。別のコードを使用した場合は、そのコードを使用してください。

これによりクーポンが適用され、カートページに移動したはずです。

セッションオファーのセットアップ

Fanplayrは、特定のプレフィックスを持つクーポンを、ユーザーに提供される（Fanplayrによって有効にされる）まで無効にする機能を提供します。これが一般的にどのように実装されるかの詳細については、セッションオファーを参照してください。

CommerceCloudでは、パイプラインとコントローラーの両方を使用したセッションオファーをサポートしています。サイトに適した方法でセッションオファーを実装してください。

本番環境で使用するために、設定のプレフィックスを変更してください（上記参照）。デフォルトでは「FPTEST_」に設定されており、そのプレフィックスを持つクーポンのみがセッションオファーとして扱われます。

注意: 以下の詳細な指示は、GenesisStoreに基づいてセッションクーポンを設定する方法を示しています。ここでの詳細な指示に続いて、セッションクーポンを実装する必要がある他の場所に関する情報があります。

パイプラインの使用

Cartパイプライン（おそらくPipelines/Checkout/Cartにある）を開きます。AddCouponおよびAddCouponJsonサブパイプラインを見つけます。

CouponCodeパイプライン辞書変数が設定され、それがチェックされるかカートに適用されるまでの間に、Script Pipelet Nodeを追加する必要があります。SiteGenesis実装では、これがどこに追加されるかを以下の画像で確認できます。

Script PipeletはFanplayrCheckSessionCoupon.dsスクリプトを実行する必要があります。

また、2つの辞書入力変数を次のように設定する必要があります。

CouponCode > CouponCode
CurrentSession > CurrentSession

CouponCodeパイプライン辞書変数は、システムによって異なる場合があります。もしそうであれば、実装されている変数名に置き換えてください。

コントローラーの使用

カートにコントローラーを使用する場合は、以下のコードを使用してセッションオファーを実装してください。SiteGenesis実装の/controllers/Cart.jsに、Fanplayrセッションオファー処理コードを挿入してください。

一般的なクーポン追加

コードは、_クーポン値が提供されたことの確認_と_cart.addCouponメソッドの呼び出し_の間に、submitForm関数内に挿入する必要があります。以下は、2016年9月時点のデフォルトコントローラーコードにコードを追加すべき場所です。

javascript

if (formgroup.couponCode.htmlValue) {
    // Fanplayrコードをここに挿入
    status = cart.addCoupon(formgroup.couponCode.htmlValue);

セッションオファー処理コードは以下のとおりです。

javascript

/*
 * Fanplayr セッションオファー処理開始
 */
var preferences = dw.system.Site.current.preferences.custom;
var sessionCouponPrefix : String = preferences.fanplayrSessionCouponPrefix && preferences.fanplayrSessionCouponPrefix.toLowerCase() || null;
var currentCouponCode = formgroup.couponCode.htmlValue && formgroup.couponCode.htmlValue.toLowerCase();

if ( currentCouponCode && sessionCouponPrefix && currentCouponCode.indexOf(sessionCouponPrefix) === 0 ) {
    // セッションから許可されたセッションクーポンを取得
    var sessionCodesString = session && session.custom && session.custom.fanplayrSessionCodes || '[]';
    var sessionCodes : Array = new Array();
    try {
        sessionCodes = JSON.parse(sessionCodesString);
    } catch (e) {}
    // ユーザーが適用しようとしたセッションクーポンがセッションに存在しない場合、コードを単に削除する
    if ( sessionCodes.indexOf(currentCouponCode) === -1 ) {
        return {
            cart: cart,
            CouponError: 'NO_ACTIVE_PROMOTION'
        };
    }
}
/*
 * Fanplayr セッションオファー処理終了
 */

JSONを使用したクーポン追加

お使いのシステムでは、ページの再読み込みなしでJSONを使用してクーポンを適用するためにJavaScriptを使用している場合もあります。これもCart.jsコントローラーのaddCouponJson関数内で処理されます。

このコードは、次の行の後に挿入する必要があります。

javascript

couponCode = request.httpParameterMap.couponCode.stringValue;

そして、この呼び出しが発生する前です。

javascript

Transaction.wrap(function () {
  couponStatus = cart.addCoupon(couponCode);
});

挿入するコードは上記のコードとほぼ同じですが、エラーを_返す_代わりに、許可されていない場合はcouponCodeを空の文字列に設定するだけです。

javascript

/*
 * Fanplayr セッションオファー処理開始
 */
var preferences = dw.system.Site.current.preferences.custom;
var sessionCouponPrefix : String = preferences.fanplayrSessionCouponPrefix && preferences.fanplayrSessionCouponPrefix.toLowerCase() || null;
var currentCouponCode = couponCode && couponCode.toLowerCase();

if ( currentCouponCode && sessionCouponPrefix && currentCouponCode.indexOf(sessionCouponPrefix) === 0 ) {
    // セッションから許可されたセッションクーポンを取得
    var sessionCodesString = session && session.custom && session.custom.fanplayrSessionCodes || '[]';
    var sessionCodes : Array = new Array();
    try {
        sessionCodes = JSON.parse(sessionCodesString);
    } catch (e) {}
    // ユーザーが適用しようとしたセッションクーポンがセッションに存在しない場合、コードを単に削除する
    if ( sessionCodes.indexOf(currentCouponCode) === -1 ) {
        couponCode = '';
    }
}
/*
 * Fanplayr セッションオファー処理終了
 */

セッションクーポンのテスト

セッションオファーコードを実装した後、セッションオファープレフィックスで始まるコードは、ユーザーがカートに適用しようとしたときに拒否されるはずです。デフォルトでは、プレフィックスは「FPTEST_」であり、本番環境で使用するために設定で変更する必要があります。

以下を試してみましょう。

商品をカートに追加します。
クーポン「FPTEST_10OFF」（テストで以前使用したクーポンと仮定）を適用します。

このクーポンは適用されなくなるはずです。

次に、サイトのURLの末尾に「/Fanplayr-Session?code=FPTEST_10OFF」を付けて移動します。
クーポン「FPTEST_10OFF」を適用します。

これで、クーポンがユーザーおよび商品に対して有効なクーポンである場合、カートに適用されるはずです。

GenesisStore以外のセッションクーポン

上記は、CommerceCloudに付属するデフォルト実装であるGenesisStoreでセッションクーポンを実装する方法を詳述しています。また、セッションクーポンはカート内でのみ実装されており、チェックアウト中は実装されていません。以下に、セッションクーポンを実装する必要がある他の場所についての詳細をいくつか示します。

パイプラインの使用

Cart-AddCouponパイプラインを呼び出している限り、追加の変更は必要ありません。適用を処理するためにこれを使用していない場合は、許可されたクーポンのチェックを処理するために同じFanplayrCheckSessionCouponスクリプトを追加する必要があります。

コントローラーの使用

一部のコントローラーには、セッションクーポンのチェックのためにコードを追加する必要がある場合があります。GenesisStoreにも存在する可能性のある例としては、COBilling.jsがあります。クーポンをJSONで追加する場合と同じコードを使用し、applyCoupon関数内のこの行の間に挿入します。

javascript

var couponCode =
  request.httpParameterMap.couponCode.stringValue ||
  request.httpParameterMap.dwfrm_billing_couponCode.stringValue;

そして、この行の前です。

javascript

app.getController('Cart').AddCoupon(couponCode);

ダッシュボード

セグメンテーション

ウィジェットの編集

ウィジェットの管理

詳細なトピック

付録

コンポーネントの参照

アカウント

ストア

請求

その他

Magento 1

ページトラッキング

データタイプ

強化ユーザー識別

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

Salesforce Marketing Cloud

APIアクセス

フィルター

アイデアー

自動化

パイプライン

エクスポート

プロファイル

ソース

ディストリビューション

カタログ

マッピング

データ辞書

コンプライアンス

アカウント設定

Javascript API

カスタムAPI

意味的データ

意味的イベント

Salesforce Commerce Cloud ​

概要 ​

ダウンロード ​

インストール ​

サイト設定のインポート ​

UX Studioへのカートリッジのインポート ​

有効なカートリッジパスへの追加 ​

サイト設定のセットアップ ​

テンプレートにFanplayrタグを追加する ​

トラッキングのテスト ​

カートに適用URLのテスト ​

セッションオファーのセットアップ ​

パイプラインの使用 ​

コントローラーの使用 ​

一般的なクーポン追加 ​

JSONを使用したクーポン追加 ​

セッションクーポンのテスト ​

GenesisStore以外のセッションクーポン ​

パイプラインの使用 ​

コントローラーの使用 ​

Salesforce Commerce Cloud

概要

ダウンロード

インストール

サイト設定のインポート

UX Studioへのカートリッジのインポート

有効なカートリッジパスへの追加

サイト設定のセットアップ

テンプレートにFanplayrタグを追加する

トラッキングのテスト

カートに適用URLのテスト

セッションオファーのセットアップ

パイプラインの使用

コントローラーの使用

一般的なクーポン追加

JSONを使用したクーポン追加

セッションクーポンのテスト

GenesisStore以外のセッションクーポン

パイプラインの使用

コントローラーの使用