カスタムアクティビティを作成する

学習の目的

この単元を完了すると、次のことができるようになります。

• カスタム活動に必要なファイルを作成する。
  
• 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 とサードパーティシステムのドキュメントを確認し、作業に取り掛かります。

カスタム活動を作成する

当然のことながら、何よりも先に、活動を記述する必要があります。なんといっても、このコードはカスタム活動で何ができるかを示すものです。目的に沿って自由に想像力を働かせてください。ただし、各カスタム活動には次のコンポーネントを含める必要があります。

カスタム活動のコンポーネント

カスタム活動で実行する内容に関わらず、各カスタム活動にはいくつかの特定のコンポーネントが含まれています。

1. カスタム活動のユーザーインターフェースには次のものを含めることをお勧めします。
   

• 活動のエンドポイント 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 ファイルを含めます。
  

2. 次に、SSL (ポート 443) を介して通信する Web サーバー上でカスタム活動をホストする必要があります。ホスティングプロバイダーとして Heroku を使用することをお勧めします。
   
3. 最後に、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 リポジトリに含まれています)、次の手順に従ってインストール済みパッケージを作成できます。一緒に見てみましょう。

1. Marketing Cloud Engagement で、[設定] の [アプリケーション] セクションに移動し、[インストール済みパッケージ] を選択します。
   
2. [新規] をクリックします。
   
3. パッケージに「Discount Custom Activity」(割引カスタム活動) という名前を付け、簡単な説明を入力します。
   
4. パッケージを保存し、[コンポーネントの追加] をクリックし、[Journey Builder 活動] を選択します。
   
5. [Next (次へ)] をクリックしてから、コンポーネントに「Discount Activity Component」(割引活動コンポーネント) という名前を付け、活動のエンドポイント URL の簡単な説明を入力します。
   
6. Journey Builder で活動のカテゴリに [カスタム] を選択し、エンドポイント URL を入力し、コンポーネントを保存します。
   

皆さんのカスタム活動の機能はここで取り上げた例とは異なるかもしれませんが、カスタム活動を作成する理論的で実用的な例をしっかり理解していただけたと思います。Warren のカスタム活動は完成間近です。次の単元では、トラブルシューティングによってバグを修正しましょう。

リソース 

• Salesforce Developers: Build Custom Events and Activities (カスタムイベントとカスタム活動を作成する)
• Github: Example Journey Builder Custom Activity (Journey Builder カスタム活動のサンプル)
• Salesforce Developers: Create and Install Packages (パッケージを作成してインストールする)