マーケティングキャンペーンにヘッドレスコマースプラットフォームを使用する方法は?

公開: 2022-04-18

ヘッドレスコマースプラットフォームとは何ですか?

ヘッドレスeコマースプラットフォームまたはAPIベースのプラットフォーム-フロントエンド(または「ヘッド」)が分離されているか、完全に削除されており、バックエンドのみが残っているソフトウェア。

これらのプラットフォームを支えるアーキテクチャの概念は、CMSの世界から始まりました。 レイヤーを分離することで、ビジネスは、スマートフォンが最初のフィドルを演じることで、新しいマーケティングチャネルでのコンテンツ配信を高速化するための障害と戦うことを望んでいました。

従来のCMSソフトウェアでは、開発者が直面した低レベルの問題は次のとおりです。

  • 設計はレガシーフレームワークによって制約され、事前定義された一連のエクスペリエンスのみが利用可能です。
  • フロントエンドの小さな変更には、データベースとバックエンドコードの変更が必要になる場合があり、テスト時間が長くなり、タスクの総コストが増加します。
  • バックエンドコードを変更すると、フロントエンドで予期しないエラーが発生する可能性があります。

時間をかけて蓄積し、ビジネス用のハンドブレーキに変換しました:

  • パーソナライズの余地はほとんどまたはまったくありません。
  • 小さなソフトウェアの変更が完了するまでに何年もかかる理由についての混乱と相互の誤解。
  • 手遅れになる未開発またはバイパスされた優先度の低いソフトウェアの新しいマーケティングチャネル。

その結果、「APIファースト」、「APIベース」、「ヘッドレスCMS」が花開きました。 しかし、それはすぐに電子商取引やマーケティングを含む他のデジタル分野に拡大しました。

ヘッドレスプラットフォームに出会ったのがこれが初めての場合は、私の最後の記事「APIベースのプラットフォームを理解する」がおもしろいと思うかもしれません。 また、Paulは、Headless eCommerceの紹介で、APIベースのツールで構築されたアプリケーションの実際の例をいくつか示しています。

ヘッドレスプラットフォーム–アイデアから本番環境に対応したPOCまで1日で

柔軟なソフトウェアをこれほど速く構築できるかどうかを確認しましょう。 最近のトップブランドのマーケティング戦略を再現していきます。 一言で言えば、それは:

  • 顧客をジオロケートします。
  • それらにパーソナライズされた割引クーポンを割り当てます。
  • プッシュ通知付きの一意のクーポンコードを配信します。
APIワークフロー

Uberのような企業がこのソフトウェアに数十人以上の開発者を投資したに違いないことを想像するのは難しいことではありません。

最も単純なタスク(ランダムな割引コードの割り当て)のように見えるかもしれませんが、注意が必要です。 私たちのチームが3年間取り組んできたので、私はこれを難しい方法で学びました。 増え続ける新しいコーナーケースの数と管理オーバーヘッドは、単純なシステムのように見えるものでさえも燃やす可能性があります。

幸いなことに、ヘッドレスプラットフォームは私たちを助けるためにここにあります。

開発者向けの3つのSaaSプラットフォームを使用して、実用的なソリューションを作成します。

  • レーダー-ジオロケーションAPI
  • Voucherify-プロモーション管理API
  • ブレイズ-通知API

ヘッドレスアプローチを通じて提供される真にパーソナライズされたプロモーションで顧客を畏敬の念を抱かせるために、それらをどのように融合できるかを見てみましょう。

注:次のソリューションは、Radar、Voucherify、およびBrazeにアクティブなアカウントがあることを前提としています。 また、個人を一意に識別するために使用できるフィールドを含め、それらすべてに顧客データベースを入力する必要があります。

レーダーで顧客があなたの場所に入る瞬間を検出する-ヘッドレスジオロケーション

レーダーの背後にある概念は単純明快です。 プラットフォームは、次の3つのコンテキストタイプを使用してアプリをジオロケートします。

  • ジオフェンス-レーダーは、ネイティブのiOSまたはAndroidジオフェンスよりも強力であり、無制限のジオフェンス、ポリゴンジオフェンス、および停止検出をクロスプラットフォームでサポートしていることを誇りにしています。 これは、すべてのジオフェンスとイベント生成がサーバー側で行われるためです。
  • 場所-レーダーはFacebookデータベースを使用しているため、場所の広範なリストを認識できます。 そして、それについての最もクールなことは、組み込みのカテゴリ(たとえば、主要空港)またはチェーン(たとえば、スターバックス)で作業できることです。
  • インサイト-彼らのロケーションエンジンは、ユーザーが自宅やオフィスに出入りする方法を概算する方法も学習できます。

Radarは、ユーザーがその場所を訪れたり離れたりしたことを検出すると、Webhookを使用してアプリケーションに通知できます。

開発者として行う必要があるのは、ソフトウェア開発キット(iOS、Android、Web)のいずれかを使用して、追跡オプションを認証および構成し、微調整することです。たとえば、バックグラウンドまたはフォアグラウンドで追跡する場合などです。

それでは、レーダーヘッドレスプラットフォームの動作を見てみましょう!

1.アカウントを設定します

以下に示すように、radar.ioにアクセスしてアカウントにサインアップし、テストAPIキーを使用してRadarウィジェットを初期化します。

{{コード}}

<script src = "https://js.radar.io/v1.0.0/radar.min.js" Integrity = "sha384-TFQktvQ2F2ST3MCcepqaOHqwc36jDy7r / gAj7dOvU6VXtJ4m4Dj2hByxZ59d4MjK" crossorigin = "anonymous"> </ script>

<script type = "text / javascript">

Radar.initialize( "YOUR_KEY");

</ script> {{ENDCODE}}

2.ユーザーを追跡する

最後のステップは、追跡が機能するかどうかを確認することです。 そのために、レーダーが場所の変更を検出した場合に呼び出されるtrackOnceメソッドを使用します。

コードを実行して、レーダーが提供する情報を確認しましょう(ブラウザーで位置追跡を許可することを忘れないでください)。

{{コード}}

Radar.trackOnce(function(status、location、user、events){console.log({status、location、user、events});});

{{ENDCODE}}

出力:

{{コード}}

イベント:[](0)

場所:座標{緯度:50.25462479999998、経度:19.061743829999994、高度:null、精度:165、altitudeAccuracy:null、…}

ステータス:「成功」

user:{userAgent: "Mozilla / 5.0(Macintosh; Intel Mac OS X 10_14_4)Ap…(KHTML、Geckoなど)バージョン/12.1 Safari / 605.1.15"、ip: "93.179.216.18"、locationAccuracy:165、deviceType: 「Web」、停止:true、…}

{{ENDCODE}}

OK-レーダーは私たちの隠れ家を見つけました。 しかし、コンテキストがなければ、この情報をどう処理するかがわかりません。 レーダーの情報に取り組みましょう。

チェックインした場所の名前を付けます-一般的に(レーダーでも)この場所のコンテキストはジオフェンスと呼ばれます。 これを行う方法は次のとおりです。

  • ジオフェンスの作成者に移動します。
  • それぞれのソースタイプを選択します。Placeに移動し、会社をクエリとして入力します。
  • その結果、レーダーは地理座標を検索し、ジオフェンスの境界線を提案します。
レーダーAPIジオロケーション
  • 場所が適切な場合は、CREATEでジオフェンスを確認します。

それでは、ページを更新してコンソールを見てみましょう。 レーダーは私たちにいくつかのイベントを送信します:

{{コード}}

{{

"createdAt": "2019-04-16T16:08:49.645Z"、

"live":false、

"type": "user.entered_geofence"、

"位置":{

"座標":[

19.062212、

50.254927099999996

]、

"タイプ":"ポイント"

}、

"locationAccuracy":20、

「自信」:3、

"actualCreatedAt": "2019-04-16T16:08:49.645Z"、

"ユーザー":{

"_id": "5cb5f2ba36581b002a3534ca"、

"userAgent": "Mozilla / 5.0(Macintosh; Intel Mac OS X 10_14_4)AppleWebKit / 537.36(KHTML、Geckoなど)Chrome / 73.0.3683.103 Safari / 537.36"、

"deviceId": "a96ec0db-969c-4a77-996c-361a0530660a"

}、

「ジオフェンス」:{

"_id": "5cb5f7d3a60e95002b009ebd"、

「説明」:「視点」、

"タイプ": "円"、

"geometryRadius":100、

"geometryCenter":{

"タイプ": "ポイント"、

"座標":[

19.062346299999945、

50.25495069999999

]

}

}、

"_id": "5cb5fe117cd3430025b9ee0d"

}

{{ENDCODE}}

新しく作成したジオフェンスに入ったことを理解しているようです。 同じ場所に座っているので、その後の更新で新しいイベントが発生することはありません。 ただし、場所を変更すると、レーダーもそれを検出します。

テストするには、マシンを手に取り、ジオフェンスエリアの外に出て、そこに再度ログインします。または...Chromeツールのセンサーを使用できます。

Chromeでのジオロケーション

十分に離れた場所を選択して現在地を偽造し、ページをもう一度更新します。 今レーダーはそのuser.exited_geofenceを示しています

便利なレーダーのダッシュボードを使用して、登録済みおよび未登録のすべてのユーザーのジオロケーションイベントをリアルタイムで追跡できます。

レーダーAPIでの追跡

ヘッドレスメッセージングによる外部アプリへの通知

したがって、レーダーの追跡は、現在の場所のコンテキストを理解しています。 しかし、私たちのシナリオでそれを利用するには、レーダーはそれを外の世界と共有する必要があります。 そしてそれは多くの方法でそうします。 それらの1つは、Webhookを使用することです。

Webhookは、アプリケーションが他のアプリケーションにリアルタイムの情報を提供する方法を提供するAPIの概念です。

多くのシステム間で顧客データを収集および交換するのに役立つプラットフォームであるSegmentによると、Webhookの人気は急速に高まっています。

WebhookとAPI/ヘッドレスコマース

典型的なWebhookの実装により、アプリケーションのユーザーは次のことが可能になります。

  • 外部システム(または多くのシステム)に通知する
  • API呼び出しを使用
  • 特定のイベントが発生した瞬間。

このようなメカニズムが導入されていれば、アプリユーザーは、リアルタイムの変更をキャッチするためにデータを頻繁にポーリングする必要がありません。

外部APIにリクエストを送信することは、プロセスの片側にすぎません。 Webhookサイクルを完了するには、受信側のクライアントがWebhookを正常に消費する必要があります。

HTTPの世界では、これは通常2**ステータスで応答することを意味します。 そうでない場合、Webhookエンジンは後で再試行します(再試行ポリシーは、定義されたポリシー作成者によって異なります)。

この場合、レーダーは、場所を指定されたエンドポイントに変更したときに表示されたイベントペイロードを送信します。 1つ追加して、Webhookの動作を確認しましょう。

  1. 統合に移動します。
  2. テスト環境と単一イベント配信を選択します。
  3. 通知するエンドポイントを提供します。 ここにはいくつかのオプションがあります。 あなたはできる:
  • マシン上の単純なWebサーバーをスピンオフし、ngrokを使用してトラフィックをチャネル化します。
  • グリッチを使用してエンドポイントをすぐにデプロイし、
  • webhook.siteまたはrequestbinのようなオンラインWebhookキャッチャーの1つを利用します
  1. 一意のURLをフォームに貼り付けて確認します。
レーダーにWebhookを追加する
  1. [アクション]列から[テスト]をクリックして、最初のイベントを発生させます。 正しく設定すると、次の図に示すようにWebhookペイロードが表示されます。
Webhookのテスト

ここまでは順調ですね。 結果は非常に有望です、init? いくつかのコピーアンドペーストとJavaScriptのスニペットを使用して、ユースケースのジオロケーション部分について説明しました。 現段階では、レーダーはCookieに保存されているデバイスID以外のユーザーを識別できません。 より堅牢にするために、メールでユーザーを識別しましょう。 RadarのSDKを使用すると、ワンライナーになります。

{{コード}}

Radar.setUserId(“ [email protected]”);

{{ENDCODE}}

ダッシュボードに新しいIDがすぐに表示されます。

したがって、今度は個人割引の要件、つまり一意のクーポンコードに取り組む必要があります。

レーダーとVoucherifyヘッドレスプロモーションエンジンを接続する

レーダーと同様に、APIを備えたVoucherifyは、ゼロから始めた場合に発生するコストの何分の1かで柔軟なクーポン機能を提供します。

すぐに学習しますが、割引、紹介、ロイヤルティプログラムなど、現在の将来のマーケティングチャネルで提供できる他のプロモーションキャンペーンをサポートします。

Voucherifyのパーソナライズ機能を利用するには、最初にユーザーのデータをインポートして同期を維持する必要があります。

Voucherifyは、顧客データを顧客オブジェクトに保存します。顧客オブジェクトは、個人の属性、場所、およびVoucherifyの対話履歴に従ってセグメントにグループ化できます。

テスト顧客をすでにVoucherifyにインポートしていると仮定し、コードなしでその場所をレーダーと同期する方法を見ていきます。

Zapier –ウェブの接着剤

Webhookを公開するすべてのプラットフォームが、統一された構造とブロックのようにそれらを接続する機能を備えた単一のディレクトリにリストされていると想像してみてください-Zapierに会います。

Zapierは1000以上のWebアプリを接続し、それらがバックグラウンドで連携できるようにします。

すべてのZapは、ワークフローを開始するアプリの1つでイベントのトリガーから始まります。 Zapierのドキュメントからのいくつかの例を次に示します。

  • 新しいRSSアイテムを投稿としてFacebookに送信することにより、ソーシャルメディアのプレゼンスを自動化します。
  • 新しいTrelloカードをEvernoteにコピーして、プロジェクトを整理します。
  • Typeformのフォーム回答者をMailChimpのメーリングリストに追加して、見込み客と連絡を取り合いましょう。
  • Slackのチャンネルに今後のGoogleカレンダーのイベントを通知して、チームが会議を見逃さないようにします。
  • …などなど!

あなたはおそらく今、「Zapierは私たちを助けてくれますか?」と尋ねるでしょう。 はい、できます! ジオロケーションの変更をVoucherifyに更新するために、いくつかのZapを試してみましょう。

  1. 「ザップを作成」をクリックして、「Webhook」を選択します。
  2. このオプションを使用すると、Zapierは、レーダーからWebhookを使用するために使用できるエンドポイント(webhook.siteと同様)を作成できます。 これを行うには、キャッチフックを選択します。
  3. 次のビューでは、レーダーWebhookセットアップの古いURLを置き換えるエンドポイントURLが表示されます。
  1. レーダーへのリンクを貼り付けて、テストを再度実行します。 レーダーが緑色のフラッシュバーで新しいエンドポイントを確認した場合は、Zapierの次のステップに進みます。
  2. 次の画面で、テストリクエストのペイロードに気付くはずです。
  1. フォームを確認すると、Zapの最初のステップであるトリガーの準備が整います。

次に、消費されたメッセージを機能させる必要があります。 Zapを完了するには、少なくとも1つのアクションが必要です(1つのZapで複数のプラットフォームをチェーンできます)。

  1. アクションエクスプローラーからVoucherifyを選択します。 注VoucherifyZapは「招待により」利用できます。これは、入手するためのリンクです。
  1. [顧客の更新]オプションを選択して、[テンプレートの設定]フォームに進みます。
  2. これは重要な部分です。 このフォームでは、Zapierを使用して入力を出力にマッピングできます。 エディターは強力で直感的です。 キーと値の両方で着信JSONを参照できるスマート検索フィールドがあります。 2つ以上の入力フィールドを1つの送信フィールドに簡単に連結することもできます。

この例では、source_idで顧客を識別し、イベントに応じてカスタムフィールド「rspectiveHQ」を更新するだけなので、マッピングは次のようになります。

Voucherify:ソースID-レーダー:ユーザーID
Voucherify:メタデータ-> rspectiveHQ-レーダー:イベントタイプ

  1. テストをスキップしてフォームに記入してください-ZAPがオンになっていて待機しています!

レーダーのWebhookを構成し、VoucherifyZapをオンに設定しました。 パイプライン全体が機能するかどうかをテストしてみましょう。 Webアプリにアクセスし、場所をもう一度変更して、レーダーの検出器に通知してみてください。

従うべきことは次のとおりです。

  • レーダーは2つのイベントを追跡し、ユーザーは外出してジオフェンスに入ります。
  • Zapierはそれに応じて2つのWebhookをキャッチします。
  • トラックを顧客プロファイルの更新に保証します。
フロー-レーダー

Zapierはそれだけではありません。 ワークフロー構成のオプションを見ると、かなり複雑なプロセスを構築できる歯車に気付くでしょう。 条件、フィルター、遅延などのヘルパーステップは、入力データのクランチとダイジェスト、およびそれに応じた出力のフォーマットに役立ちます。

ステップの1つでより柔軟性が必要な場合は、カスタムコード(JavaScriptおよびPython)を作成することもできます-一連のトリガーとアクションのペアをチェーンできることはすでに説明しましたか?

Zapierのクイックスタートドキュメントに、それがどのような時間節約になるかを理解する機会を与えてください。

ヘッドレスプロモーションエンジンを介して地理的に配置されたユーザーのためのユニークなクーポンを生成する

Voucherifyの重要な機能の1つは、顧客のプロファイルに基づいてリアルタイムで割引をパーソナライズすることです。 これは、顧客の属性と顧客がショッピングカートに入れたものを監視し、いくつかのビジネスルールに従ってアクションをトリガーする動的なセグメントのために可能です。

この例では、カスタムフィールド(rspectiveHQ)をチェックするセグメントを作成します。このセグメントには、顧客がジオフェンスに入った場合に情報が格納されます。 Voucherify APIの単一のエンドポイントでそれを実現できますが、最速の方法は単にダッシュボードを使用することです。

顧客に移動し、セグメント作成者を開きます。 次に、次の図のように、対応するメタデータフィールドを使用して顧客を除外します。

フィルタを確認し、リロードを押すと、セグメントに一致するすべての顧客が表示されます。 テストユーザーにジオフェンスを離れてセグメントをリロードするように「依頼」して、統合が期待どおりに機能するかどうかを確認できます。

表示されている内容が現実を反映している場合は、セグメントを保存します。

次のステップは、場所に関する情報を使用して割引を調整することです。

ただし、詳しく説明する前に、少し立ち止まって、バックエンドコードを1つも記述せずに、これまでに達成した成果を分析してください。 同時に、RadarとVoucherifyの両方が、必要なときにいつでもプラグインできる豊富なAPIとヘッドレスアーキテクチャを公開しているため、変更のためのソリューションを閉じていません。

最後のステップは、次のようなディストリビューションを設定することです。

  • 一意のクーポンコードを送信する
  • 検出された顧客へ
  • 事前定義されたチャネルを使用

まず、ユーザーごとに固有のプロモーションコードを生成しましょう。 10%オフの割引にしましょう。 キャンペーンの作成者に移動し、[バルクコード]オプションを選択して、定義する手順に従います。

  • 割引の種類と金額、
  • 時間枠、
  • 長さ、プレフィックス、サフィックス、文字セットを含むコードパターン、
  • コードの初期数、
  • およびその他の詳細。

作成者の第4段階である検証ルールは特に興味深いものです。 これは、誰がどのような条件でコードを引き換えることができるかを定義できる場所です。 償還は、ジオフェンスを訪れたお客様のみに限定したいことを忘れないでください。 このステップを完了するために、セグメントを使用します。

このツールは、はるかに多くのフィルタリングオプションを提供します。 顧客獲得キャンペーンや顧客維持キャンペーンに取り組んでいる場合は、コード行を大幅に節約できるため、検証ルールのリファレンスを確認することをお勧めします。

Voucherifyが一括生成を終了すると、次のリストが表示されます。

セグメントコードとプロモーションコードがあります。それをマーケティングアウトバウンドチャネルに接続しましょう。

Voucherify APIとWebhookを使用して実装できますが、より迅速な方法があります-ディストリビューションに対応します。

この機能を使用すると、セグメントに入った(または離れた)新しい顧客を検出し、一意のクーポンコードを割り当てて、電子メール、SMS、プッシュ通知、ライブチャット、またはソーシャルメディア広告で送信できます。 さらに、ビジュアルエディターは、パーソナライズされたプロモーションコピーを作成するのに役立ちます。

各チャネルにはメッセージの独自のテンプレートがあります。プッシュ通知をどのように検索するかを見てみましょう。 ただし、続行するには、Brazeアカウントにサインアップし、APIキーを使用してVoucherifyに接続する必要があります。

Brazeを使用したプッシュ通知によるプロモーションコードの送信

Braze(以前のAppBoy)は、モバイルマーケティングツールのリーダーの1つです。 使用する機能はごく一部であるため、ドキュメントを確認して、提供内容の詳細を確認することをお勧めします。

シナリオの構成には、次の3つのステップが必要です。

  • プッシュ通知キャンペーンの作成。
  • VoucherifyからBrazeにクーポンコードを送信する。
  • アプリでWebプッシュ通知を構成します。

プッシュ通知キャンペーン

Voucherifyと同様に、Brazeは、顧客の属性に対するリアルタイムの変更に基づいていくつかのアクションをトリガーできます。 この特定のケースでは、Voucherifyで作成したディストリビューションは、バルクコードキャンペーンからの一意のコードで満たされたカスタムフィールドを設定します。

この変更を検出し、顧客がログインしているアプリインスタンスにプッシュ通知を送信する方法でBrazeキャンペーンを定義します。

  1. [アプリグループの管理]を開いて、アプリのコンテキストを定義します。
  2. API公開鍵を取得するWebアプリを選択します。
  1. これで、キャンペーンに移動して、新しいプッシュ通知キャンペーンを作成できます。
  2. クーポンコード{{custom_attribute。${coupon}}}を含むメッセージを作成し、[テスト]タブを選択して、[テストを自分に送信]を使用します。 Web通知を許可する場合は、右上にスライドするメッセージに気付くはずです。
  1. このカスタム属性をどのユーザーにも追加していないため、テストメッセージのクーポンコードは空になります。 キャンペーンのドラフトを保存し、コードを使用して手動でテストユーザーを作成しましょう。

    次の行に沿って簡単なCSVファイルを作成します。

{{コード}}

external_id、クーポン

test @ example.com、xyz

{{ENDCODE}}

そして、ユーザーインポートに移動してアップロードします。

  1. テストデータと[受信者の属性を上書きする…]オプションがオンになっているので、変数が置き換えられていることがわかります。
  2. [配信]タブで、配信の種類をアクションベースのものに変更し、次の図のように[カスタム属性値トリガーの変更]を選択します。
  1. 次のステップで「すべてのユーザー」をキャンペーンに登録し、他の設定は変更しないでください。 準備ができたら、右下の[キャンペーンの起動]をクリックします。

ろう付けにクーポンコードを提供する

それが、VoucherifyをBrazeに接続する必要がある瞬間です。 幸い、Voucherifyはネイティブ統合でBrazeをサポートしています。 これら2つのマーケティングプラットフォームを接続するために残っているのは、統合に移動し、Brazeを選択して、APIエンドポイントとキーを提供することだけです。

これで、ディストリビューションのドラフトを再度開いて、最後のステップを完了することができます。 Voucherifyが一意のコードとその値を割り当てるカスタムフィールドの名前を指定します。

そしてそれをライブに設定します。 今後、レーダーがジオフェンスイベントを検出して顧客セグメントを更新するたびに、Voucherifyはこの顧客にクーポンコードを割り当て、Brazeのユーザープロファイルに公開します。

Brazeキャンペーンは、新しいフィールドの変更を検出し、Web通知を送信しようとします。

プッシュ通知の受信

もうすぐだ! プロモーションチェーンを完成させるための最後のステップは、プッシュ通知をアプリに流すことです。

ヘッドレスプラットフォームの場合と同様に、手動で実装する必要はありません。 真の開発者ファーストプラットフォームとしてのBrazeは、Web用のオープンソースSDKを提供します。

起動して実行するには、短いスニペットを貼り付けて、公開APIキーを入力する必要があります。

{{コード}}

<script type = "text / javascript">

const test_user = {

first_name: "マイク"、

last_name: "Sedzielewski"、

メール: "[email protected]"

}

+ function(a、p、P、b、y){appboy = {}; appboyQueue = []; for(var

s="初期化破棄getDeviceIdtoggleAppboyLoggingsetLogger

openSession changeUser requestImmediateDataFlush requestFeedRefresh

subscribeToFeedUpdates requestContentCardsRefresh

subscribeToContentCardsUpdates logCardImpressions logCardClick

logCardDismissal logFeedDisplayed logContentCardsDisplayed

logInAppMessageImpression logInAppMessageClick

logInAppMessageButtonClick logInAppMessageHtmlClick

subscribeToNewInAppMessages removeSubscription

removeAllSubscriptions logCustomEvent logPurchase isPushSupported

isPushBlocked isPushGranted isPushPermissionGranted

registerAppboyPushMessages unregisterAppboyPushMessages

submitFeedback trackLocation stopWebTracking resumeWebTracking

wipeData ab ab.DeviceProperties ab.User ab.User.Genders

ab.User.NotificationSubscriptionTypes ab.User.prototype.getUserId

ab.User.prototype.setFirstName ab.User.prototype.setLastName

ab.User.prototype.setEmail ab.User.prototype.setGender

ab.User.prototype.setDateOfBirth ab.User.prototype.setCountry

ab.User.prototype.setHomeCity ab.User.prototype.setLanguage

ab.User.prototype.setEmailNotificationSubscriptionType

ab.User.prototype.setPushNotificationSubscriptionType

ab.User.prototype.setPhoneNumber ab.User.prototype.setAvatarImageUrl

ab.User.prototype.setLastKnownLocation

ab.User.prototype.setUserAttribute

ab.User.prototype.setCustomUserAttribute

ab.User.prototype.addToCustomAttributeArray

ab.User.prototype.removeFromCustomAttributeArray

ab.User.prototype.incrementCustomUserAttribute

ab.User.prototype.addAlias

ab.User.prototype.setCustomLocationAttribute

ab.InAppMessage ab.InAppMessage.SlideFrom ab.InAppMessage.ClickAction

ab.InAppMessage.DismissType ab.InAppMessage.OpenTarget

ab.InAppMessage.ImageStyle ab.InAppMessage.TextAlignment

ab.InAppMessage.Orientation ab.InAppMessage.CropType

ab.InAppMessage.prototype.subscribeToClickedEvent

ab.InAppMessage.prototype.subscribeToDismissedEvent

ab.InAppMessage.prototype.removeSubscription

ab.InAppMessage.prototype.removeAllSubscriptions

ab.InAppMessage.Button

ab.InAppMessage.Button.prototype.subscribeToClickedEvent

ab.InAppMessage.Button.prototype.removeSubscription

ab.InAppMessage.Button.prototype.removeAllSubscriptions

ab.SlideUpMessage ab.ModalMessage ab.FullScreenMessage

ab.HtmlMessage ab.ControlMessage ab.Feed

ab.Feed.prototype.getUnreadCardCount ab.ContentCards

ab.ContentCards.prototype.getUnviewedCardCount ab.Card

ab.ClassicCard ab.CaptionedImage ab.Banner ab.ControlCard

ab.WindowUtils display display.automaticallyShowNewInAppMessages

display.showInAppMessage display.showFeed display.destroyFeed

display.toggleFeed display.showContentCards display.hideContentCards

display.toggleContentCards sharedLib ".split("

")、i = 0; i <s.length; i ++){for(var

m = s [i]、k = appboy、l = m.split( "。")、j = 0; j <l.length-1; j ++)k = k [l [j]]; k [l [ j]

] =(new Function( "return function

"+ m.replace(/\./ g、" _ ")+"(){appboyQueue.push(arguments); 戻る

true} "))()} appboy.getUser = function(){return new

appboy.ab.User}; appboy.getCachedFeed = function(){return new

appboy.ab.Feed}; appboy.getCachedContentCards = function(){return new

appboy.ab.ContentCards};(y = p.createElement(P))。type ='text / javascript

'; y.src ='https://js.appboycdn.com/web-sdk/2.3/appboy.min.js'; y.async

= 1;(b = p.getElementsByTagName(P)[0])。parentNode.insertBefore(y、b)}(wi

ndow、document、'script');

appboy.initialize('YOUR_KEY'、{baseUrl:

"https://sdk.iad-03.braze.com/api/v3"});

appboy.toggleAppboyLogging();

appboy.registerAppboyPushMessages()

appboy.changeUser( "[email protected]");

appboy.display.automaticallyShowNewInAppMessages();

appboy.openSession();

</ script>

{{ENDCODE}}

そして、service-worker.jsを登録します。

{{コード}}

self.importScripts('https://js.appboycdn.com/web-sdk/2.3/service-worker.js');

{{ENDCODE}}

配置されたら、「個々のユーザーの追加」入力で「text@example」ユーザーを使用して別のテストを実行します。 アプリは「xyz」プロモーションコードを含む通知を受け取る必要があります。

次に、クーポンフィールドを変更したときにキャンペーンがプッシュメッセージをトリガーするかどうかをテストしましょう。

まず、キャンペーンがアクティブであり、Webアプリが起動していることを確認します。 次に、Braze Postmanコレクションをダウンロードし、ユーザーデータカタログを開いて、[ユーザートラック]-[属性の例]を選択します。 (Postmanを知らない場合は、ここで追いつくことができます)

エンドポイントURLを、割り当てられているURLに変更します。私の場合はhttps://rest.iad-03.braze.com/です。

そして、リクエストペイロードは次のとおりです。

{{コード}}{

"api_key": "YOUR_KEY"、

"属性":[

{{

"external_id": "[email protected]"、

「クーポン」:「123」

}

]

} {{ENDCODE}}

リクエストを送信し、クーポンコードが更新された別のメッセージを期待してください。

すべてのヘッドレスビルディングブロックをテストする

ワークフローが要求どおりに機能することを確認するには、アプリを開き、センサーを使用して別の場所に「配置」してから、ジオフェンスに戻ります。 数秒で、画面にパーソナライズされた通知が表示されます。

これで、ユーザーは自分のコードを取得して、バックエンドのVoucherifyによって検証されたクーポンボックスに入れることができます。

ここでヘッドレスプラットフォームの利点を要約しましょう:

  • 1時間ほどで、かなり複雑なビジネスシナリオに対応する実用的なソリューションを提供しました。
  • コードベースは非常に短くシンプルです。これにより、メンテナンスのオーバーヘッドが少なくなります。
  • ソリューションを100%制御することはできませんが、APIアクセスのおかげで、カスタマイズの可能性があります。
  • 完全な所有権の欠如は、ベンダーのチームからのサポートとツールの品質の向上とバランスが取れています。
  • ZapierのようなWebhookとツールを使用すると、さまざまな部門やシステムをすぐに接続して織り交ぜることができます。

複数のSaaSベンダーを使用する場合に注意する必要があることの1つは、フォールバックです。 プラットフォームがダウンしていて、システムにどのように反応するか(たとえば、アクションを保存してキューに入れる方法)を指示する必要がある場合があります。 ただし、開発者向けのプラットフォームは、APIの可用性を監視し、時間どおりに対応するために使用できるインターフェイスを公開します。

一方、POCステージのアプリケーションでは、結局のところ、非常に堅牢なフォールバックは必要ありません。

ヘッドレスアプローチはどのように役立ちますか?

一言で言えば、ヘッドレスプラットフォームを活用して価値のあるものを迅速かつ低コストで構築する方法を学ぶことで、雇用市場でより価値のあるものになります。

今日の競争上の優位性を説明しているのはプログラミング言語やフレームワークではありません。 多くの場合、これはまったく異なります。これは、企業が利用可能なツールを使用して、最小限のコードで問題を解決する方法です。 言い換えれば、これらは、特定の技術スタックを習得することよりも重要なことです。

  • 市場投入までの時間を短縮する方法を知っている。
  • メンテナンスコスト削減手法の概要。
  • 個々のテクノロジーへの依存を減らす能力。
  • 上記の3つをサポートする現在のテクノロジーの概要。

より多くのヘッドレスコマースプラットフォームを探す場所はどこですか?

良い出発点はこのリストです:

プロモーション

  • Voucherify
  • ギフトビット
  • Vauchar

カタログと在庫

  • リコンビー
  • チャネラペ
  • 結晶化する

カート

  • スニップカート
  • フォクシー

支払い

  • 期限
  • 四角

メッセージング

  • プッシャー
  • パブナム

予約とイベント

  • タイムキット
  • イングレッソ

運送

  • Shippo
  • Shipcloud
  • ロブ

全般的

  • 弾性
  • スニップカート
  • モルティン
  • OrderCloud
  • Commercetools

ただし、ヘッドレスeコマースを超えたい場合は、https://www.programmableweb.comにアクセスして掘り下げることをお勧めします。調査を開始する別の方法は、Zapier統合を参照することです。

さらにもう1つは、PostmanAPIネットワークにアクセスすることです。

資力:

グリッチのデモソースコード