Skip to content

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

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

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

仕組み

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

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

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

ブリッジの利用可能性

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

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

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

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

例

メソッドは非同期であるため、順序や完了が重要な場合はasyncハンドラーを使用し、呼び出しを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()を使用してください。

トップレベルメソッド

メソッド 説明
brazeBridge.changeUser(userId, signature?) 一意のIDでユーザーを識別します。
brazeBridge.logCustomEvent(eventName, eventProperties?) カスタムイベントをログに記録します。
brazeBridge.logPurchase(productId, price, currencyCode?, quantity?, purchaseProperties?) 購入をログに記録します。
brazeBridge.requestImmediateDataFlush(callback?) キューに入れられたデータをBrazeサーバーにフラッシュします。
brazeBridge.logClick(trackingId) 指定されたトラッキングIDでランディングページクリック（lp_c）をログに記録します。クリックトラッキングを参照してください。
brazeBridge.logSubmit() ランディングページのフォーム送信（lp_fs）をログに記録します。ランディングページ固有のメソッドです。

getUser()メソッド

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

メソッド 説明
getUser().setFirstName(firstName) ユーザーの名を設定します。
getUser().setLastName(lastName) ユーザーの姓を設定します。
getUser().setEmail(email) ユーザーのメールアドレスを設定します。
getUser().setPhoneNumber(phoneNumber) ユーザーの電話番号を設定します。
getUser().setGender(gender: "m" \| "f" \| "o" \| "u" \| "n" \| "p") ユーザーの性別を設定します。それぞれ男性、女性、その他、不明、該当なし、回答しないを表します。
getUser().setDateOfBirth(year, month, day) ユーザーの生年月日を設定します。
getUser().setCountry(country) ユーザーの国を設定します。
getUser().setHomeCity(city) ユーザーの居住市区町村を設定します。
getUser().setLanguage(language) ユーザーの言語を設定します。
getUser().setCustomUserAttribute(key, value, merge?) カスタムユーザー属性を設定します。
getUser().addToCustomAttributeArray(key, value) カスタム属性配列に値を追加します。
getUser().removeFromCustomAttributeArray(key, value) カスタム属性配列から値を削除します。
getUser().incrementCustomUserAttribute(key, incrementValue?) 数値カスタム属性をインクリメントします。
getUser().setCustomLocationAttribute(key, latitude, longitude) カスタムロケーション属性を設定します。
getUser().addToSubscriptionGroup(subscriptionGroupId) メールまたはSMS購読グループにユーザーを追加します。
getUser().removeFromSubscriptionGroup(subscriptionGroupId) メールまたはSMS購読グループからユーザーを削除します。
getUser().setEmailNotificationSubscriptionType(type: "opted_in" \| "subscribed" \| "unsubscribed") メール通知の購読ステータスを設定します。
getUser().setPushNotificationSubscriptionType(type: "opted_in" \| "subscribed" \| "unsubscribed") プッシュ通知の購読ステータスを設定します。

クリックトラッキング

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

1

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

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

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

メソッド 備考
brazeBridge.closeMessage() ランディングページには閉じるメッセージUIがありません。
brazeBridge.requestPushPermission(successCallback?, deniedCallback?) ランディングページからプッシュ許可はリクエストされません。
brazeBridge.web.registerAppboyPushMessages(successCallback?, deniedCallback?) ランディングページではWebプッシュ登録は利用できません。

関連コンテンツ
New Stuff!