Show Menu
TOPICS×

Adobe Client Data Layer を使用してコアコンポーネントと Adobe Launch を統合する

Adobe Client Data Layer を使用することで、コアコンポーネントを Adobe Launch と統合できます。このドキュメントでは、例として、画像コンポーネントのクリックイベントを追跡するよう Adobe Launch を設定する方法について説明します。
この設定をおこなった場合、コア画像コンポーネントがクリックされると、Launch はブラウザーコンソールで次の出力を生成します。

Launch と AEMの統合

最初に、Adobe Launch を AEM サイトと統合する必要があります。

手順 1 - Adobe I/O で統合を作成する

最初に Adobe I/O にログインして、統合の設定を開始します。
  1. https://console.adobe.io
    にアクセスします。
  2. Adobe ID を使用してログインします。
  3. 「クイックスタート」セクションで「
    統合を作成
    」をクリックします。
  4. API にアクセス
    」を選択し、「
    続行
    」をクリックします。
  5. Adobe Experience Platform の下にある「
    Experience Platform Launch API
    」を選択し、「
    続行
    」をクリックします。

手順 2 - AEM で IMS 設定を作成する

AEM では、Adobe I/O で設定を開始した統合を定義する必要があります。
  1. AEM ホームページに移動し、
    ツール/セキュリティ/Adobe IMS 設定
    ​をクリックします。
  2. 作成
    」をクリックします。
  3. クラウドソリューション
    」として
    Adobe Launch
    を選択します。
  4. 新しい証明書を作成
    」を選択します。
  5. 証明書のエイリアス(例:
    aem-launch-certificate
    )を入力します。
  6. 証明書を作成
    」をクリックし、ポップアップで「
    OK
    」をクリックして証明書を作成します。
  7. 公開鍵をダウンロード
    」をクリックし、ポップアップで「
    ダウンロード
    」をクリックします。

手順 3 - Adobe I/O 設定を終了する

AEM IMS 設定で作成した証明書とキーを使用して、Adobe I/O 設定を完了できます。
  1. 手順 1 に従って、Adobe I/O コンソールに戻ります。
  2. Create a new integration
    」ウィンドウで、名前と説明(
    AEM Launch データレイヤー
    ​など)を入力します。
  3. Public keys certificates
    」から、 手順 2 で作成した証明書をアップロードします。
  4. Launch - Prod profile
    」を選択します。
  5. Create integration
    」をクリックします。
  6. Continue to integration details
    」をクリックします。これらの詳細は、後で AEM インスタンスのIMS設定を完了する際に必要となります。

手順 4 - IMS 設定を終了する

Adobe I/O 統合の詳細を確認しすると、AEM IMS の設定を完了できます。
  1. 「AEM」タブから、 手順 2 の「
    Adobe IMS テクニカルアカウント設定
    」タブで「
    次へ
    」をクリックします。
  2. Adobe Launch の IMS 設定
    」のようなタイトルを入力します。
  3. 「Adobe I/O」タブで、
    API キー(クライアント ID)
    ​をコピーします。
  4. 「AEM」タブで、前にコピーしたキーを「
    API キー
    」フィールドに貼り付けます。
  5. Adobe I/O で、「
    Retrieve Client Secret
    」をクリックしてコピーします。
  6. 「AEM」タブで、「
    クライアントシークレット
    」フィールドに貼り付けます。
  7. 「Adobe I/O」タブで「
    JWT
    」タブを選択し、URL(例:
    https://ims-na1.adobelogin.com
    )をコピーします。
  8. 「AEM」タブで、「
    認証サーバー
    」フィールドに URL を貼り付けます。
  9. 「Adobe I/O」タブで、JWT ペイロード(括弧内のコード)をコピーします。
  10. コピーしたペイロードを「AEM」タブの「
    ペイロード
    」フィールドに貼り付けます。
  11. 作成
    」をクリックして、AEM で IMS 設定を作成します。

手順 5a - Adobe Launch でプロパティを作成する

プロパティは、Launch がサイトに挿入できる機能を定義します。
  1. https://launch.adobe.com
    で Adobe Launch に移動します。
  2. Adobe ID を使用してログインします。
  3. 新しいプロパティ
    」をクリックします。
  4. 名前(
    Launch AEM データレイヤー
    ​など)を入力します。
  5. ドメインを入力します。
  6. 保存
    」をクリックします。

手順 5b - Launch でルールを作成する

作成したプロパティを使用して、アクションの発生時の動作を指定するルールを定義できます。
  1. 手順 5
    Launch AEM データレイヤー
    ​で新しく追加したプロパティをクリックします。
  2. ルール
    」タブを選択し、「
    新規ルールを作成
    」をクリックします。
  3. 名前(例:
    image-click
    )を入力します。
  4. イベント
    」の下の「
    +
    」 ボタンをクリックします 。
  5. 拡張機能
    」として「
    コア
    」、「
    イベントタイプ
    」として「
    クリック
    」を選択し、
    CSS セレクター
    ​に「
    cmp-image
    」と入力します。
  6. 変更を保持
    」をクリックします。
  7. アクション
    」の下の「
    +
    」 ボタンをクリックします。
  8. 拡張機能
    」で「
    コア
    」、「
    アクションタイプ
    」で「
    カスタムコード
    」を選択し、「
    エディターを開く
    」をクリックします。
  9. エディターで、次のコードを入力します。
    console.log("DOM click event tracked by Launch for image: ", event.target.src);
  10. 保存
    」をクリックします。
  11. 変更を保持
    」をクリックします。
  12. 保存
    」をクリックして、新しいルールを作成します。

手順 6 - Launch ルールを公開する

新しいルールを AEM サイトで使用できるようにするには、そのルールを公開する必要があります。
  1. Adobe Launch
    」タブで、「
    公開
    」タブを選択します。
  2. Add New Library
    」をクリックします。
  3. 必要に応じて​
    名前
    ​に「
    demo-1
    」などと入力します。
  4. 環境
    」では、必要に応じて 「
    Development (development)
    」など選択します。
  5. Add a Resource
    」をクリックします。
  6. ルール/画像をクリック/最新
    ​を選択し、「
    Select & Create a New Revision
    」をクリックします。
  7. Save & Build for Development
    」をクリックします。
  8. ポップアップで、「
    Apply Updates and Continue
    」をクリックします。
  9. ライブラリが構築されたら、省略記号アイコンをクリックし、「
    Submit for Approval
    」を選択します。
  10. ポップアップで「
    送信
    」をクリックします。
  11. 省略記号アイコンをクリックし、「
    Build for Staging
    」を選択します。
  12. ビルドが完了したら、省略記号アイコンをクリックし、「
    Approve for Publishing
    」を選択します。
  13. ポップアップで「
    承認
    」をクリックします。
  14. 省略記号アイコンをクリックし、「
    Build & Publish to Production
    」を選択します。
  15. ポップアップで「
    公開
    」をクリックします。

手順 7 - サイトのクラウド設定を有効にする

統合を使用するには、AEM でクラウド設定として割り当てる必要があります
  1. AEMコンソールで、
    ツール/一般/設定ブラウザー
    ​をクリックします。
  2. コアコンポーネントの例
    」を確認し、「
    プロパティ
    」をクリックします。
  3. クラウド設定
    」を確認し、「
    保存して閉じる
    」をクリックします。

手順 8 - AEM で Launch とサイトの統合を作成する

AEM が Launch で機能するためには、Launch 統合が必要です。
  1. AEM コンソールで、
    ツール/Cloud Services/Adobe Launch 設定
    ​をクリックします。
  2. コアコンポーネントの例
    」を選択し、「
    作成
    」をクリックします。
  3. タイトル
    」に、「
    Launch 設定
    」などと入力します。
  4. 手順 4 で作成した IMS 設定を選択します。
  5. 会社
    」を、必要に応じて選択します。
  6. プロパティ
    」では、 手順 5 で作成し、新しく追加した Launch プロパティを選択します。
  7. Include Production Code on Author
    」スライダーを右に動かし、「
    次へ
    」をクリックします。
  8. 次へ
    」をクリックします。
  9. 次へ
    」をクリックします。
  10. 作成
    」をクリックします。

手順 9 - AEM サイトを Launch 統合に接続する

AEM で Launch 統合を使用するには、クラウド設定として割り当てる必要があります。
  1. AEM コンソールで、「
    Sites
    」をクリックし、
    コアコンポーネント
    ​サイトを確認します。
  2. プロパティ
    」をクリックします。
  3. 詳細
    」タブを選択します。
  4. クラウド設定
    」で「
    コアコンポーネントの例
    」を選択し、「
    選択
    」をクリックします。
  5. 保存して閉じる
    」をクリックします。

手順 10 - Launch ロジックがページに適用されていることを確認する

これまでの手順が成功したことをテストします。
  1. コアコンポーネントライブラリの画像ページをプレビューモードで開きます。
    http://<lhost&gt;:<port&gt;/editor.html/content/core-components-examples/library/page-authoring/image.html
  2. 画像をクリックし、メッセージ
    A Core Image was clicked
    がブラウザーコンソールに表示されることを確認します。

Launch と AEM およびデータレイヤーの統合

これで AEM と Launch の統合が設定され、データレイヤーと統合できます。

手順 1 - Adobe Launch でルールを作成する

手順 5 の手順を繰り返し、次の値を使用してAdobe Launch に新しいルールを追加します。
  • 名前:
    image-click-data-layer
  • イベント:
    • 拡張機能:コア
    • イベントタイプ:DOM Ready
  • アクション:
    • 拡張機能:コア
    • アクションタイプ:カスタムコード
    • コード:
      function onImageClick(event) { console.log("Data layer click event tracked by Launch for image: " + event.info.path); console.log("dataLayer.getState(): ", adobeDataLayer.getState()); } adobeDataLayer.addEventListener('image clicked', onImageClick);

手順 2 - Launch ルールを発行して AEM サイトで使用できるようにする

手順 6 の手順を繰り返して、新しいルールを発行します。

手順 3 - Launch ロジックがページに適用されていることを確認する

  1. コアコンポーネントライブラリの画像ページをプレビューモードで開きます。
    http://<host&gt;:<port&gt;/editor.html/content/core-components-examples/library/page-authoring/image.html
  2. 画像をクリックし、次のメッセージがブラウザーコンソールに表示されることを確認します。