カスタムアクティビティを作成する
学習の目的
この単元を完了すると、次のことができるようになります。
- カスタムアクティビティに必要なファイルを作成する。
- Postmonger と連携するようにアクティビティを設定する。
- Marketing Cloud Engagement のインストール済みパッケージを使用して有効な REST エンドポイントを作成する。
この単元では、Journey Builder API でカスタムアクティビティを処理する方法の一例を見ていきます。繰り返しになりますが、システムはそれぞれ異なっているため、アクティビティを意図したとおりに動作させるためにサンプルコードの調整が必要になる場合があります。ただし、この例を学習することで、取り組みを始めるための基礎を習得できます。
始める前に
このモジュールは上級者向けであり、受講者が手順を実行するための必要な知識とアクセス権を持っていることを前提としています。開始する前に、前提条件リストで準備ができていることを確認してください。次のものが必要です。
- 連動管理のための RequireJS の実務的な知識。
- jQuery の実務的な知識。
- Postmonger イベントフレームワークの理解。
- 完全にプロビジョニングされ稼働している Journey Builder インスタンスを含む Marketing Cloud Engagement アカウントへのアクセス権。
- Journey Builder のジャーニー機能の理解。
確認しましたか? いいですね。アウトドア用品と衣料の小売企業である Northern Trail Outfitters (NTO) のカスタムアクティビティの例を見ていきましょう。
Warren の登場
Warren Mehta は Northern Trail Outfitters の IT システムスペシャリストです。Warren は複雑な仕事を抱えています。それは、NTO が新しいセールのメッセージに割引コードを含めて送信するというもので、このコードをサードパーティの生成システムから取得する必要があります。Warren は Journey Builder API とサードパーティシステムのドキュメントを確認し、作業に取り掛かります。
カスタムアクティビティを作成する
当然のことながら、何よりも先に、アクティビティを記述する必要があります。なんといっても、このコードはカスタムアクティビティで何ができるかを示すものです。目的に沿って自由に想像力を働かせてください。ただし、各カスタムアクティビティには次のコンポーネントを含める必要があります。
カスタムアクティビティのコンポーネント
カスタムアクティビティで実行する内容に関わらず、各カスタムアクティビティにはいくつかの特定のコンポーネントが含まれています。
- カスタムアクティビティのユーザーインターフェースには次のものを含めることをお勧めします。
- アクティビティのエンドポイント URL の名前が付いたフォルダー。これは、インストール済みパッケージの Journey Builder コンポーネントで定義します (インストール済みパッケージについてはこの単元で後ほど説明します)。このフォルダーにはカスタムアクティビティ用の
index.htmlファイル、config.jsonファイル、customActivity.jsファイルが含まれます。customActivity.jsファイルは必要に応じて自由に名前を変更し、その値をindex.htmlファイルのスクリプト内に組み込むことができます。詳細は「Example REST Activity (REST アクティビティの例)」と「Postmonger Events Reference (Postmonger イベントリファレンス)」を参照してください。 -
{yourEndpointURL}/js というフォルダー。このフォルダーには
require.js、jquery.min.js、postmonger.jsファイルを含めます。 -
{yourEndpointURL}/images というフォルダー。このフォルダーにはアクティビティ用の
icon.pngファイルを含めます。
- アクティビティのエンドポイント URL の名前が付いたフォルダー。これは、インストール済みパッケージの Journey Builder コンポーネントで定義します (インストール済みパッケージについてはこの単元で後ほど説明します)。このフォルダーにはカスタムアクティビティ用の
- 次に、SSL (ポート 443) を介して通信する Web サーバー上でカスタムアクティビティをホストする必要があります。ホスティングプロバイダーとして Heroku を使用することをお勧めします。
- 最後に、Marketing Cloud Engagement インストール済みパッケージにカスタムアクティビティのカスタムコンポーネントエンドポイントを登録する必要があります。
NTO のカスタムアクティビティ
では、NTO の Warren のカスタムアクティビティを見てみましょう。このアプリケーションの実際のサンプルコードは GitHub リポジトリで参照できますが、ここで概要を説明します。
- app フォルダーには app.js ファイルが含まれています。このファイルは、ジャーニーの状況に反応して適切なタイミングでランダムな割引コードを呼び出します。
- config フォルダーには config-json.js ファイルが含まれています。このファイルには、カスタムアクティビティのスキーマと引数が記述されています。
- html フォルダーには index.html ファイルが含まれています。このファイルには、Journey Builder のカスタムアクティビティのメニューやボタンが記述されています。
- images フォルダーにはカスタムアクティビティのアイコンの .png バージョンと .svc バージョンが含まれています。
- src フォルダーには index.js ファイルが含まれています。このファイルは Postmonger を使用して Journey Builder と割引コードを生成するサードパーティサービスのギャップを埋めて、サービスとやり取りをします。
- webpack.config.js ファイルはカスタムアクティビティのデザイン要素を読み込みます。
カスタムアクティビティが作成される様子を目の前で見るには、こちらの動画をご覧ください。宅配ピザよりも短い時間で、カスタムアクティビティの記述とリリースが行われています。
この例で基本的なカスタムアクティビティの作成と整理の方法を知ることができますが、皆さん自身のカスタムアクティビティと全く同じであるとは限りません。それは、皆さんが目的とする機能が Warren が目指す内容とは異なるためです。このことを念頭に置いて、この単元の残りの部分を読み進めてください。手順は似ていますが、全く同じではありません。誰もが自分の道を切り開いていくことになります。
インストール済みパッケージ
カスタムアクティビティを計画し、コードを記述し、公開 Web サーバーでホストした後に、Warren はホストされたファイルと Marketing Cloud Engagement を接続する必要があります。そのためにはインストール済みパッケージを使用します。Warren が上記のステップをすべて完了したとすると (手順は前述した GitHub リポジトリに含まれています)、次の手順に従ってインストール済みパッケージを作成できます。それでは見てみましょう。
- Marketing Cloud Engagement で、[設定] の [アプリケーション] セクションに移動し、[インストール済みパッケージ] を選択します。
- [新規] をクリックします。
- パッケージに「Discount Custom Activity」(割引カスタムアクティビティ) という名前を付け、簡単な説明を入力します。
- パッケージを保存し、[コンポーネントの追加] をクリックし、[Journey Builder アクティビティ] を選択します。
- [Next (次へ)] をクリックしてから、コンポーネントに「Discount Activity Component」(割引アクティビティコンポーネント) という名前を付け、アクティビティのエンドポイント URL の簡単な説明を入力します。
- Journey Builder でアクティビティのカテゴリに [カスタム] を選択し、エンドポイント URL を入力し、コンポーネントを保存します。
皆さんのカスタムアクティビティの機能はここで取り上げた例とは異なるかもしれませんが、カスタムアクティビティを作成する理論的で実用的な例をしっかり理解していただけたと思います。Warren のカスタムアクティビティは完成間近です。次の単元では、トラブルシューティングによってバグを修正しましょう。