パラメーターとコールバック

以下の記事で概説されているパラメーターとコールバックは、通常、PDP（クライアントのWebサイトの商品詳細ページ）のロジックをTangibleeプラットフォームのロジックにマップする統合ファイルで設定されます。このファイルには通常、次のような名前が付けられています。 tangiblee-mapper.js。

にとって tangiblee-mapper.js 正しく動作させるには、ウェブページに Tangiblee API スクリプトタグを含める必要があります。この記事のパラメーターとコールバックはすべて、Tangiblee API スクリプトが使用可能で読み込まれている必要があります。

以下は、Tangiblee API スクリプトを組み込んで、そのメソッドをで使用できるようにする方法の例です tangiblee-mapper.js:

<script async src="https://cdn.tangiblee.com/integration/3.1/tangiblee.min.js"></script>

[.悪い]重要: Tangiblee API スクリプトは新しいバージョンで更新されることがあります。セミマネージド統合またはセルフサービス統合を使用している場合は、必ず最新バージョンの Tangiblee API スクリプトを使用してください。よくわからない場合は、アカウントマネージャーに問い合わせてください。[.bad]

マネージドインテグレーション (1 行のタグで囲まれているもの) を使用しているクライアント tangiblee-mapper.js) Tangiblee API スクリプトや、この記事のパラメーターやコールバックについて心配する必要はありません。Tangiblee チームは tangiblee-mapper.js Tangiblee API スクリプトにバンドルされているお客様用 (tangiblee.min.js) をシングルに タンジブル・バンドル.min.js ファイル。

セミマネージド統合を使用している場合、Tangiblee チームは必ず Tangiblee API スクリプトタグと tangiblee-mapper.js。Tangiblee API スクリプトが更新された場合、Tangiblee チームは新バージョンの詳細とリリースノートについて連絡します。

最後に、自分で実装するセルフサービス統合について tangiblee-mapper.js、必ず最新バージョンのTangiblee APIスクリプトをPDPに含めてください。パスがわからない場合は、アカウントマネージャーに詳細を問い合わせてください。

SKU とカタログ

SKU で起動 (SKU: 配列)

StartOnSKUSはドキュメントで最も重要なパラメータです。

[.悪い]必須: Tangiblee インテグレーションが機能するには、このパラメータを設定する必要があります。[.bad]

このパラメーターは最初ですが、呼び出されるまでに他の Tangiblee パラメーターがすべて設定されるように、統合スクリプトの最後に追加することをおすすめします。このパラメーターは、PDP で使用可能な SKU ID を Tangiblee API スクリプトに渡します。

毎回 SKU で始める パラメータが設定されると、Tangiblee APIスクリプトは、SKUが存在し、Tangibleeプラットフォーム上に準備が整っていることを検証します。

これは次の方法で行われます HTTP GET https://api.tangiblee.com へのリクエスト。以下は例です。

https://api.tangiblee.com/api/tngimpr?ids=GREEN_PRODUCT_SKU,WHITE_PRODUCT_SKU,LIME_PRODUCT_SKU&domain=www.example.com&locale=en-US

Tangiblee API スクリプトが HTTP GET レスポンスを受け取ると、起動します。 オンSKU検証済み () イベント。HTTP GET レスポンスを受け取ると、Tangiblee API スクリプトは、どのSKUが現在アクティブで、Tangiblee UXに表示すべきかを判断する準備が整いました。

PDP に SKU が 1 つしかない単純なケースでは、 SKU () で始める は、デフォルトでアクティブな SKU が 1 つだけに設定されています。この場合、明示的に設定する必要はありません。 アクティブスクー ()。

PDP に複数の SKU がある場合は、 SKU () で始める に設定する必要があります アレイ PDPで現在入手可能なすべてのSKUの数。 アクティブスクー () 次に、アレイ上のどのSKUをデフォルトで選択するかを設定する必要があります。

そのため、常に設定することが重要です アクティブスクー () 前 SKU () で始める PDPに複数のSKUが登録されている場合。

に設定されているSKUのリスト SKU () で始める 次のように設定された SKU を含む必要があります アクティブスクー ()、例えば:

tangiblee('activeSKU', 'WHITE_PRODUCT_SKU');
tangiblee('startOnSKUs', ['GREEN_PRODUCT_SKU', 'WHITE_PRODUCT_SKU', 'LIME_PRODUCT_SKU']);

[.good] 上記の例では、Tangiblee API スクリプトは 3 つの SKU を指定して HTTP GET リクエストを送信し、レスポンスが届くと、「WHITE_PRODUCT_SKU」製品が Tangiblee UX 内に表示されるように選択されます。[.good]

[.good] これは、「WHITE_PRODUCT_SKU」がTangibleeによって承認された場合にのみ発生します。それ以外の場合は ハイデクタ () コールバック関数が呼び出されます。[.good]

以下の例は、PDPがロードされたときにデフォルトで選択される製品を使用してTangiblee APIスクリプトを構成する方法を示しています。ユーザーが PDP 上のアクティブなプロダクトを変更しても、設定する必要はありません。 SKU () で始める 新しいアクティブなSKUが前のSKUのリストにある場合は再度 SKU () で始める ステートメント。

設定するだけで新しいアクティブなSKUを設定すれば十分です アクティブスクー () 繰り返しますが、すなわち：

// PDP loaded, 'WHITE_PRODUCT_SKU' is a default SKU
tangiblee('activeSKU', 'WHITE_PRODUCT_SKU');

// Tangiblee API script configured to use following SKUs available on the PDP:
tangiblee('startOnSKUs', ['GREEN_PRODUCT_SKU', 'WHITE_PRODUCT_SKU', 'LIME_PRODUCT_SKU']);
...
// In a while, the user changes the color of the active product on the PDP, for example, to 'LIME_PRODUCT_SKU'.
// Tangiblee API script is configured to display new active SKU in Tangiblee UX:
tangiblee('activeSKU', 'LIME_PRODUCT_SKU');

有効なSKUがTangibleeによって承認されると、次のアクションが実行されます。

1. CTA () を表示 コールバック関数が呼び出されます。
2. 表示されているノクタ数 () CTA が表示されたときにイベントが発生します。

PDP が シングルページアプリケーション (SPA) それから SKU () で始める 毎回設定する必要があります PDP SKUの利用可能なリストが変更されます。同じことが以下にも当てはまります。 アクティブスクー () -アクティブなSKUが更新されるたびに設定する必要があります。両方 SKU () で始める そして アクティブスクー () 必要なだけ何度でも呼び出すことができます。

‍

SPA でパラメータとコールバックを使用する際の重要な注意事項:

• アクティブスクー () 設定する必要があります 前 SKU () で始める いつでも SKU () で始める が SKU の新しいリストに設定されます。それから アクティブスクー () 最後のSKUで定義されたリストのSKUの1つに設定されるまで、必要な回数だけ設定できます SKU () で始める ステートメント。
• SKU () で始める HTTP GET リクエストを実行し、応答を待ちます。短期間に頻繁に設定すべきではありません。‍

ドメイン (ドメイン:文字列)

[.悪い]必須: Tangiblee 統合が機能するには、このパラメータを実装する必要があります。[.bad]

Tangiblee プラットフォームへのすべての API リクエストのドメインを設定します。

の組み合わせ ドメイン パラメータ (SKU 付き)s 配列 (パラメータとして設定) SKU () で始める）は、Tangibleeのプラットフォーム上のSKU固有の識別子です。この識別子は次の目的で使用されます。

• どのSKUがTangibleeプラットフォームで実際に入手可能かを検証し、PDPに表示できます。
• 特定の SKU の Tangiblee UX の設定を取得します。
• 特定のSKUの有形インラインフレームURLを作成します。
• 分析、使用状況、eコマースのパフォーマンスデータを収集します。

[.良い]リマインダー: Tangibleeサーバーへのすべてのリクエストは、クライアントのカタログ内のSKUの一意の識別子としてドメイン+ SKU IDを使用します。[.good]

tangiblee('domain', 'www.tangiblee-integration.com');

‍

プライバシー

クッキーを使う (クッキーを使う:BOOL)

‍

Tangiblee UX がクッキーを使用できるかどうかを決定します。

もし クッキーを使う FALSE に設定すると、

• Google アナリティクスはデータを収集しません。
• Tangibleeは、PDP訪問の合間にユーザーデータを保存しません。つまり、Tangiblee履歴機能は使用できません。

tangiblee('useCookies', false);

iframe 配置

コンテナ (コンテナ:文字列)

‍

Tangiblee iframeをTangibleeポップアップに表示するか、他のモーダルウィンドウに表示するか、PDP上の特定の要素に直接埋め込むかを決定します。

デフォルトでは、有形iframeは次の場所に配置されます . タンジブル・モーダル-iframe-コンテナ 要素。他の CSS セレクターが設定されている場合、Tangiblee モーダルウィンドウは作成されません。

// in this example the Tangiblee modal dialog will not be created
// and Tangiblee UX will be placed inside #tangiblee_app element
tangiblee('container', '#tangiblee_app');

‍

CTA (コール・トゥ・アクション) コールバック

CTA を表示 (CTA を表示:関数)

‍

[.悪い]必須: このパラメータ 実装する必要があります 有形統合が機能するようにしてください。[.bad]

ビジュアル（画像、テキストなど）とPDP上の配置の両方の観点から、Tangiblee CTA（またはCTA）がどのように見えるべきかを定義します。

CTA（またはCTA）はHTML（プレースホルダーなど）コードにすでに存在していて、デフォルトで非表示になっている場合があります。その場合、ShowCTAはCTAを表示するために必要なアクションを定義します。

返品について

var showCTA = function(activeSKU, thumbUrl) {
     var ctaCssClass = 'tangiblee-cta',
         cta = document.getElementsByClassName(ctaCssClass)[0];
     if (cta) {
         cta.style.display = 'block';
     } else {
         var cta = document.createElement('button');
         cta.className = ctaCssClass;
         cta.innerText = 'Will it fit?';
         cta.style.backgroundImage = 'url(' + thumbUrl + ')';
         //...
         document.body.appendChild(cta);
     }
     return ctaCssClass;
};
tangiblee('showCTA', showCTA);

同じ PDP に同時に CTA をいくつでも配置できます。

たとえば、1つのPDPには、白黒と白の2つのSKUがあるとします。PDP には、SKU ごとに 1 つずつ、合計 2 つの CTA があり、背景はそれぞれ黒と白です。

var showCTA = function(activeSKU, thumbUrl) {
    var ctaCssClass = 'tangiblee-cta',
        CTAs = document.querySelectorAll(ctaCssClass);
    if (CTAs.length) {
        for (var i = 0; i < CTAs.length; i++) {
            CTAs[i].style.display = 'block';
        }
    } else {
        var cta = document.createElement('button');
        cta.className = ctaCssClass + ' sku-black';
        cta.innerText = 'Will it fit?';
        cta.style.backgroundColor = 'black';
        //...
        document.body.appendChild(cta);
        var cta = document.createElement('button');
        cta.className = ctaCssClass + ' sku-white';
        cta.innerText = 'Will it fit?';
        cta.style.backgroundColor = 'white';
        //...
        document.body.appendChild(cta);
    }
    return ctaCssClass;
};

// Set active SKU depending on which CTA is clicked
var onCtaClicked = function(cta) {
    if (cta.className.indexOf('black') > -1) {
        tangiblee('activeSKU', 'sku-black');
    }
    if (cta.className.indexOf('white') > -1) {
        tangiblee('activeSKU', 'sku-white');
    }
}

tangiblee('showCTA', showCTA);
tangiblee('onCtaClicked', onCtaClicked);

‍

ハイドクタ (ハイドクタ:ファンクション)

有形CTA（またはCTA）をPDPから削除する方法を定義します。

PDPにSKUが1つしかなく、ユーザーがPDPを操作しても（ドロップダウンやカラーバリエーションのクリックなど）、TangibleeのCTA配置が変わらない場合は、このコールバック関数を省略できます。クライアント側でJavaScriptコードを使用してCTAを作成する必要がある場合、この関数を使用してTangiblee CTAを正しく削除する必要があります。アクティブ SKU が最初のパラメーターとして関数に渡されます。

var hideCTA = function(activeSKU) {
     var cta = document.getElementsByClassName('tangiblee-cta')[0];
     if (cta) {
         cta.parentNode.removeChild(cta);
     }
};
tangiblee('hideCTA', hideCTA);

‍

UX カスタマイズ

ウィジェットバージョン (ウィジェットバージョン:文字列)

‍

Tangiblee UX のバージョンを設定し、Tangiblee が表示されたときに読み込まれる UX のバージョンを決定します。

[.良い]注釈: v3 は Tangiblee UX の最新バージョンであり、このパラメータの推奨値です [.good]

tangiblee('widgetVersion', 'v3');

‍

PDP の変更をタンジブル UX と同期する

アクティブ SKU (アクティブ SKU: ストリング)

‍

Tangibleeによって承認されたPDPに複数のSKUがある場合に便利です。

PDP に SKU が 1 つしかない場合は、このパラメータを省略できます。「」を参照してください。 SKU () で始める 使用方法の詳細については、ドキュメントセクションを参照してください SKU () で始める そして アクティブスクー () 一緒に。

PDPでアクティブなSKUが変更されるたびに設定する必要があります。

tangiblee('activeSKU', 'WHITE_PRODUCT_SKU');

‍

アクティブロケール (アクティブロケール:String)

このパラメータは、アクティブドキュメントの ActiveLocale を設定します。クライアントのウェブサイトに複数の ActiveLocale が設定されている場合に、ローカライズ版の SKU を識別するために使用されます。

ドキュメント.ドキュメント要素.lang デフォルトで使用されます。

PDP でアクティブなロケールが変更されるたびに設定する必要があります。

tangiblee('activeLocale', 'en-US');

‍

アクティブプライス (アクティブプライス:文字列)

SKU の価格をタンジブル UX で設定します。

PDPでアクティブなSKUの価格が変更されるたびに設定する必要があります。

tangiblee('activePrice', '42');

‍

アクティブ通貨 (アクティブ通貨:文字列)

Tangiblee UX で使用されるアクティブ通貨を設定します。

PDPでアクティブなSKUの通貨が変更されるたびに設定する必要があります。

tangiblee('activeCurrency', '$');

‍

アクティブ ATC (アクティブ ATC: ストリング)

PDP のアクティブなカートへの追加 (ATC) セレクターを設定します。Tangiblee UX に ATC ボタンが表示されている場合、その ATC をクリックすると、次のように設定されたセレクターがトリガーされます。 アクティブ ATC。

PDPでアクティブなSKUのカートに追加（ATC）セレクターが変更されるたびに設定する必要があります。

tangiblee('activeATC', '.btn-cart');

‍

Google アナリティクスインテグレーション (GA インテグレーション)

セルフサービス、セミマネージド、マネージドインテグレーションの各タグには、一般的な Tangiblee Analytics API コードのみが含まれており、Tangiblee Analytics マッピングコードは含まれていません。ジェネリック Tangiblee Analytics API コードでは、ページビュー数などの一般的なパラメータを追跡できます。オーダートラッキングを行うには、Tangiblee Analytics のマッピングコードを作成する必要があります。通常、このコードには注文データを Analytics システムに送信するのに必要なコードが含まれています。

Tangiblee Analyticsのマッピングコードは、個別のTangiblee Analyticsタグを使用して関連ページ（サンキューページ、注文レビューページなど）に追加する必要があります。

を参照してください 具体的なパフォーマンス指標の収集 Tangiblee Analytics タグをウェブページに追加して設定する方法の詳細については、セクションを参照してください。