# Adobe LaunchとのJavascript SDKの統合 選択した基準に基づいて特定のイベントをトリガーするAdobe Launch内にカスタムコードを埋め込むことで、Treasure Data JavaScript SDKをAdobe Launchと統合できます。 Adobe Launchを使用すると、Treasure Data tagを管理し、どのtriggerが選択されているか、キャプチャするdata elementを含め、tagが実装されている場所を追跡できます。 * [前提条件](/ja/products/customer-data-platform/integration-hub/streaming/td-javascript-sdk/integrating-javascript-sdk-with-adobe-launch#h2_1644201065) * [Treasure Data JavaScript SDKコードのAdobe Launchへの統合](/ja/products/customer-data-platform/integration-hub/streaming/td-javascript-sdk/integrating-javascript-sdk-with-adobe-launch#h2_1592925414) * [変更のテスト](/ja/products/customer-data-platform/integration-hub/streaming/td-javascript-sdk/integrating-javascript-sdk-with-adobe-launch#h2_558647184) ## 前提条件 * Adobe Launch * Treasure Dataの知識 * Treasure Data JavaScript SDK(JS SDK) Treasure Dataは、本番環境で使用を開始する前に、サイトでTreasure Data JavaScript SDK version 3を使用した新機能や機能の実装を検証することをお勧めします。cookieの管理方法が異なります。これらの記事のほとんどを参照する際は、提案されたeventコレクターとTreasure Data JavaScript SDK version 3の呼び出しをソリューション内で定義する必要があることに注意してください。たとえば、//cdn.treasuredata.com/sdk/2.5/td.min.jsを//cdn.treasuredata.com/sdk/3.0.0/td.min.jsに変更します。 ## Treasure Data JavaScript SDKコードのAdobe Launchへの統合 1. Adobe Launchにログインします。 2. **Properties**を選択します。 3. JS SDKを実行するpropertyの名前を選択します。アカウントでpropertiesが作成されたことがない場合、この画面は空になる可能性があり、**New Property**を作成する必要があります。 ![](/assets/image-20200617-153956.5e37bca2d487f76921644f6988b9db33b34d0ea8a922600aa036c38fe5c6a105.ef656343.png) 1. propertyを選択した後、**Rules**タブに移動し、**Add Rule**を選択します。 ![](/assets/image-20200616-180320.0ea280320bd812fba758031c5ee450df0b6eefe0689f4402b5299c2a2c05730f.ef656343.png) JS SDKは、ページロード時にトリガーされるAdobe Launchでruleを作成することで、サイトにロードされます。 5. ページの先頭でJS SDKライブラリをロードし、ページがロードしてカスタムコードを実行するruleを作成します。 ![](/assets/image-20200616-180427.bf528a7c41819927571665f386fcff480368082f1c66e7caf210b7e893af9ba3.ef656343.png) 1. カスタムコードを入力します。 ```javascript // track pageview information to 'pageviews' table td.set('pageviews', {foo: 'foo', bar: 'bar'}); td.trackPageview('pageviews'); ``` 1. track pageview、track form_submit、またはclick_eventなどのさまざまな関数を含む追加のruleを作成します。 ![](/assets/image-20200616-180527.9f25096bec30b6766f634e7f068272a22260eaf3541913300390f04b268165ac.ef656343.png) 追跡するすべての関数を含む複数のruleまたは1つのruleを作成することを選択できます。たとえば、event、匿名化されたページユーザー設定、または特定のページでのみform fillを追跡するruleを作成できます。 1. ruleがロードされ、記述したカスタムコードが実行されます。 ![](/assets/image-20200616-180559.3be7337e8249122e00ba351c37649f5d1a80ed00c50d5cd88362724aec882af8.ef656343.png) 1. 作成したいすべてのruleを作成した後、**Publishing**を選択します。 ![](/assets/image2021-4-26_21-12-17.3ef0b7d673ba8675d18f72afc8d9232c4198720b55bc57390121c915e9ea9b04.ef656343.png) 1. 作成したruleを追加し、ビルドして公開します。 ![](/assets/image-20200616-181108.7b1409d0d5293ac3a4d794952a88d0e52694f6e73dfef90b2d2e0a7229788061.ef656343.png) 1. **Save & Build for Development**を選択します。 ![](/assets/image-20200617-151246.028fae99b85164e2dc42b074ec16fd69a38f437ad5ae7d1e1644e29e24553017.ef656343.png) ビルドが正常に完了した後: 12. **Environments**タブを使用して、さまざまな環境にコードをデプロイできます。 ## 変更のテスト 1. 本番環境にコードをデプロイせずにトラブルシューティングを行うために、[Adobe Experience Cloud Debugger](https://docs.adobe.com/content/help/en/debugger/using/experience-cloud-debugger.md)を使用して変更をテストできます。 2. 拡張機能をダウンロードした後、コードをテストするサイトに移動します。 3. Adobe Launchに戻ります。 4. **Environments**を選択します。 5. cubeアイコンを選択して、表示されたコードをコピーします。 ![](/assets/image-20200616-181242.522f771cda913c202f53eef13b966e99dab020e7e970ebb5bd4d201ba7ad29bb.ef656343.png) 1. Adobe Experience Cloud Debuggerを起動します。 2. **Tools**を選択します。 ![](/assets/image-20200305-051408.e760ae585ab3f357ef39cb062b7707d65ec91c8f1d9386d6911a285e83a53bfa.ef656343.png) 1. Adobe Launchまでスクロールダウンし、コピーしたコードを貼り付けて、**Save**を選択します。 ![](/assets/image-20200305-051345.07194d8e27a6af876052a295d6af643b87aa1d0f89a1aa585c0b41d3d744238c.ef656343.png) 1. 前のステップでlaunch埋め込みコードを置き換えたサイトに移動します。 2. ページビューを追跡するJS SDKがある場合は、サイトのいくつかのページを確認し、CDPのpageviews tableをチェックして、データがtableに表示されるかどうかを確認します。