ランディングページ用JavaScriptブリッジ

ランディングページは、カスタムコード（HTML、CSS、JavaScript）をBraze SDKと連携するためのJavaScript「ブリッジ」をサポートしています。

カスタムコードブロックでbrazeBridgeを使用してブリッジにアクセスし、訪問者がランディングページとインタラクションした際にイベントのログ記録、カスタム属性の設定、ユーザーの識別などを行えます。

仕組み

ランディングページでは、カスタムHTML、CSS、JavaScriptをカスタムコードブロックに追加して、ページの外観や動作をより細かくコントロールできます。カスタムコードブロックはJavaScriptブリッジを使用して、イベントのログ記録、カスタム属性の設定、ユーザーの識別などを行えます：

• カスタムイベントと購入のログ記録
• 標準およびカスタムユーザー属性の設定
• クリックとフォーム送信のトラッキング
• ユーザーの識別

In-App MessagesやバナーのbrazeBridgeコードを再利用する場合、ランディングページでもそのまま実行できます。ランディングページに適用されないメソッドは無視され、エラーを発生させる代わりにブラウザコンソールの警告がログに記録されます。詳細については、ランディングページでサポートされないメソッドを参照してください。

重要

ランディングページのブリッジは非同期です。各メソッドはPromiseを返します。これは、メソッドが即座に値を返すカスタムHTMLアプリ内メッセージブリッジとは異なります。スクリプトの次のステップがブリッジ呼び出しの完了に依存する場合（ページのリダイレクト、フォームの送信、Brazeへのデータ送信など）、awaitまたは.then()を使用し、呼び出しが同期的に完了したと想定しないでください。

ブリッジの利用可能性

訪問者がランディングページを開くと、brazeBridgeはカスタムコードのJavaScript内ですでに利用可能です。ランディングページではブリッジメソッドを直接呼び出すことができます。アプリ内メッセージがab.BridgeReadyで使用するような個別のreadyイベントを待つ必要はありません。

ブリッジオブジェクトが利用可能であっても、その訪問者に対してBraze SDKが初期化されているとは限りません。SDKがランディングページ訪問時に初期化されるのは、以下のいずれかの場合です：

• 訪問者がBrazeチャネル（メール、SMS、プッシュなど）を通じて送信されたランディングページLiquidタグからページを開いた場合。SDKはページ読み込み時に自動的に初期化されます。
• 訪問者がページのフォームを送信した場合（例えば、フォームデータを送信する送信ボタンをクリックした場合）。これには、カスタムフォームブロックのregisterFormInputコールバック内で行われるbrazeBridge呼び出しも含まれます。これらはフォーム送信の一部として実行されるためです。

訪問者がランディングページLiquidタグを使用せずにランディングページを直接開き、フォームを送信しなかった場合、そのページはBrazeにとって匿名であり、ブリッジメソッドの呼び出しは効果がありません。

注

window.lpBridgeとwindow.appboyBridgeは同じブリッジオブジェクトを参照しますが、どちらも非推奨です。window.brazeBridgeを使用してください。

例

メソッドは非同期であるため、順序や完了が重要な場合は非同期ハンドラーを使用し、呼び出しをawaitしてください：

1
2
3
4
5
6
7
8
9
10
11
12
13

<button id="button">Set Favorite Color</button>
<script>
  document.querySelector("#button").onclick = async function () {
    // Track a click for analytics
    await brazeBridge.logClick("set-favorite-color");
    // Set the user's custom attribute
    await brazeBridge.getUser().setCustomUserAttribute("favorite color", "blue");
    // Track a custom event
    await brazeBridge.logCustomEvent("completed survey");
    // Send the enqueued data to Braze
    await brazeBridge.requestImmediateDataFlush();
  };
</script>

サポートされているメソッド

以下のbrazeBridgeメソッドはPromiseを返し、ランディングページのカスタムコードブロックでサポートされています。処理を順序付けたり、完了を保証したりする必要がある場合は、awaitするか.then()を使用してください。

トップレベルメソッド

getUser()メソッド

注

brazeBridge.getUser()は同期的にプレーンオブジェクトを返すため、getUser()をawaitする必要はありません。返されたオブジェクトのメソッド（getUser().setEmail(email)など）がPromiseを返します。

getUser()は、以下のユーザーメソッドを公開するオブジェクトを返します。各メソッドはPromiseを返します。

クリックトラッキング

brazeBridge.logClick(trackingId) を使用して、ランディングページのクリックを追跡します。各呼び出しは、渡したトラッキングIDでタグ付けされたランディングページクリックイベント（lp_c）を記録します：

1

<a href="#" onclick="brazeBridge.logClick('cta-hero')">Get started</a>

注

ランディングページのクリックトラッキングは、「Button 1」と「Button 2」の慣例的なIDとしてlogClick('0')とlogClick('1')を使用するアプリ内メッセージとは異なります。ランディングページには、同等の特殊なボタンIDはありません。すべてのlogClick(trackingId)呼び出しは、指定したトラッキングIDをキーとするlp_cイベントを記録します。

ランディングページでサポートされていないメソッド

以下のメソッドはアプリ内メッセージとバナーでは動作しますが、ランディングページではサポートされていません。ランディングページでコードがこれらのメソッドを呼び出した場合、Brazeはその呼び出しを無視します。ページは引き続き動作しますが、ブラウザの開発者コンソールに警告が表示されることがあります。

関連コンテンツ

• カスタムフォームブロックの作成完全にカスタムなUIをランディングページフォームに接続します。
• ランディングページの作成