Adobe Experience ManagerにAsyntai AIチャットボットを追加する方法

AEMウェブサイト向けステップバイステップガイド

埋め込みコードの取得

プラットフォーム:

ステップ1：埋め込みコードを取得する

まず、Asyntaiダッシュボードに移動し、「埋め込みコード」セクションまでスクロールしてください。次のような固有の埋め込みコードをコピーしてください：

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

注記: 上記のコードは一例です。個人のウィジェットIDが含まれているため、ダッシュボードから固有の埋め込みコードをコピーしてください。

ステップ2：ページコンポーネントを使用してコードを追加する（推奨）

サイト全体にインストールするには、AEMページコンポーネントのheadセクションにチャットボットのコードを追加する方法が推奨されます：

AEMオーサーインスタンスにログインします
CRXDE Liteに移動します（通常 http://your-aem-instance:4502/crx/de）
ページコンポーネントテンプレートを見つけます（通常 /apps/your-project/components/page 配下）
head.htmlまたはheaderlibs.htmlファイルを見つけるか作成します
このファイルにAsyntaiの埋め込みコードを追加します
上部メニューの「すべて保存」をクリックしてください
パブリッシュインスタンスに変更をレプリケートします

ヒント: head.htmlファイルにコードを配置することで、そのテンプレートを使用するすべてのページにチャットボットが表示されます。サイト全体のインストールとして最もクリーンな方法です。

代替方法1：クライアントライブラリ（ClientLibs）

より体系的なアプローチとして、AEMのクライアントライブラリシステムを使用できます：

/apps/your-project/clientlibs配下に新しいクライアントライブラリフォルダを作成します
cq:clientLibraryFolderノードタイプを設定します
JavaScriptファイルをリストしたjs.txtファイルを作成します
このフォルダ内のJavaScriptファイルにAsyntaiの埋め込みコードを追加します
以下を使用してページコンポーネントにクライアントライブラリを含めます：

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
     data-sly-call="${clientlib.js @ categories='your-category-name'}" />

注記: この方法は既存のClientLib構造を持つプロジェクトに推奨され、大規模な実装でより整理された管理が可能です。

代替方法2：タグ管理（Adobe Launch）

Adobe Launch（旧DTM）または別のタグマネージャーを使用している場合：

Adobe Experience Platform Launchにログインします
プロパティに移動します
ルールに移動し、新しいルールを作成します
イベントを「ページ下部」または「DOM Ready」に設定してください
アクションを追加します：カスタムコード
Asyntaiの埋め込みコードを貼り付けます
ライブラリを保存して公開します

ヒント: Adobe Launchの使用は、サードパーティスクリプトの追加にAdobeが推奨するアプローチです。より良い制御、テスト機能を提供し、コードのデプロイメントが不要です。

代替方法3：エクスペリエンスフラグメント

柔軟で制作者に優しい実装方法：

AEMでエクスペリエンスフラグメントに移動します
新しいエクスペリエンスフラグメントを作成します
テキストコンポーネントまたはHTMLコンポーネントを追加します
HTMLソースモードに切り替えます
Asyntaiの埋め込みコードを貼り付けます
このエクスペリエンスフラグメントをページテンプレートのフッターに含めます

重要: テンプレートとコンポーネントを変更するための適切なAEM権限があることを確認してください。AEM as a Cloud Serviceの場合、変更はCI/CDパイプラインを通す必要がある場合があります。

ステップ3：インストールの確認

変更をデプロイした後、ブラウザのキャッシュをクリアしてウェブサイトにアクセスしてください。右下にチャットウィジェットボタンが表示されるはずです。クリックして正しく開いて動作することを確認してください。

ウィジェットが表示されませんか？ ブラウザコンソール（F12）でJavaScriptエラーを確認してください。パブリッシュインスタンスにコードが正しくデプロイされたことを確認してください。AEM as a Cloud Serviceの場合、変更がデプロイメントパイプラインを正常に通過したことを確認してください。