Note
Dynamics 365 Commerce による Retail Interest Group は Yammer から Viva Engage に移行しました。 新しい Viva Engage コミュニティにアクセスできない場合は、このフォーム (https://aka.ms/JoinD365commerceVivaEngageCommunity) に入力して追加し、最新のディスカッションに参加してください。
この記事では、Microsoft Dynamics 365 Commerce 環境で Microsoft Clarity を設定する方法について説明します。
Microsoft Clarity は、サイト所有者が自分の e コマース サイトとのユーザー操作を理解するのに役立つユーザー動作分析ツールです。 Clarity の分析ツールを使用すると、セッション記録、ヒートマップ、機械学習の分析情報を使用して、ユーザーの操作を確認および調査することで、可視性を実現できます。
Dynamics 365 Commerce サイトへの Clarity の統合は簡単です。 この記事の手順に従って、Clarity を有効にし、ユーザーの操作を詳しく確認します。
Clarity にサインアップします
Clarity にサインアップするには、Clarity Web サイトに移動して開始を選択します。 設定プロセス中に、Commerce サイトに関連付けられた実稼働環境ドメイン URL を使用します。 Clarity の設定の詳細については、「作業の 開始」を参照してください。
Clarity を Commerce のサイトに統合する
Clarity にサインアップしたら、Commerce サイト ビルダーで次の手順に従って、Clarity を e コマース サイトと統合します。
Clarity のコンテンツ セキュリティ ポリシーの構成
コンテンツ セキュリティ ポリシー (CSP) には、サイト ページが読み込むことができるリソースを制御するのに役立つ広範なポリシー ディレクティブのセットが用意されています。 各ディレクティブは、特定のタイプのリソースに対する制限を定義します。 サイトで Clarity を機能させるためには、Clarity リソースを許可するようにいくつかの CSP ディレクティブを構成する必要があります。
Commerce サイト ビルダーで CSP for Clarity を構成するには、次の手順に従います。
- コマース サイトに移動します。
- サイト 設定 > 拡張機能を選択します。
- コンテンツ セキュリティ ポリシー タブを選択します。
- child-src ディレクティブ セクションで、追加を選択します。
-
https://www.clarity.msを入力します。 - connect-src および script-src ディレクティブについて、手順 4 と 5 を繰り返します。
- 保存と公開を選択します。
Clarity トラッキング スクリプト コードをサイト ページに埋め込む
Clarity を使用して追跡するコマース サイト ページに、Clarity 追跡スクリプト コードを埋め込むことができます。
開始するには、Clarity ポータルからプロジェクトの追跡スクリプト コードをコピーします。 Commerce モジュール ライブラリ インライン スクリプト モジュールに Clarity 追跡スクリプト コードを追加します。 構成によっては、インライン スクリプト モジュールを特定のサイト ページに直接追加することも、サイト ページ テンプレートで許容可能なオプションとして追加する必要がある場合もあります。
Note
Clarity 追跡スクリプト コードをインライン スクリプト モジュールにコピーすると、周囲の <script> タグを文字列から削除できます。 インライン スクリプト モジュールは、ページまたはフラグメントが発行およびレンダリングされるときに、必要な <script> タグを追加します。
サイト ページの範囲に Clarity 追跡スクリプト コードを含めるのが最も効率的な方法は、共有サイト ページ テンプレートにスクリプト コードを埋め込む方法です。 次の手順では、サイト ページ テンプレートで使用されるインライン スクリプト モジュールを含むフラグメントに Clarity スクリプト コードを挿入する方法について説明します。
Commerce サイト ビルダーのサイト ページに Clarity 追跡コードを埋め込むには、次の手順に従います。
- Commerce サイト ビルダーでサイトに移動します。
- [ フラグメント] を選択し、[ 新規] を選択します。
- 新規フラグメント ダイアログ ボックスで、インライン スクリプト モジュールを選択します。
- フラグメント名に名前を入力し、OK を選択します。
- 既定の インライン スクリプト モジュール スロットを選択します。 モジュールのプロパティ ウィンドウの [ インライン スクリプト] に、Clarity スクリプトを貼り付けます。 スクリプト文字列をコピーした場合は、周囲の <script> タグを必ず削除してください。
- 保存を選択してから、発行を選択します。
- テンプレートを選択し、Clarity スクリプト コードを含むフラグメントを追加するテンプレートを選択します。
- [編集] を選択します。
- HTML Head スロットの省略ボタン (...) を選択し、フラグメントの追加を選択します。
- フラグメントの選択ダイアログ ボックスで、Clarity スクリプト コードの付いた新しいフラグメントを選択し OK を選択します。 フラグメントが HTML ヘッド スロットの下に表示されることを確認します。
- 保存を選択してから、発行を選択します。 更新されたテンプレートを使用するすべてのサイト ページに、Clarity スクリプト コードが埋め込まれるようになりました。
- Clarity スクリプト コードを追加する他のテンプレートに対して、必要に応じて前の手順を繰り返します。
Clarity スクリプトがサイト ページに埋め込まれているかどうかをテストする方法については、Clarity セットアップ: 検証 を参照してください 。
Clarity 追跡 スクリプト コードを特定のサイト ページに埋め込みます
Note
ページ インスタンスに Clarity スクリプト コードを追加するには、ページのテンプレートの HTML ヘッド セクションにインライン スクリプト モジュールを含める必要があります。
Commerce サイト ビルダーの特定のサイト ページに Clarity 追跡コードを埋め込むには、次の手順に従います。
- Commerce サイト ビルダーでサイトに移動します。
- ページを選択し、Clarity スクリプト コードを追加するページを選択し、編集を選択します。
- モジュールのアウトライン ペインでルート ノード スロットを選択します。
- SEO プロパティの下のプロパティ ペインで、スクリプト タグ セクションを展開します。 インライン スクリプトの下に、Clarity 追跡コードを貼り付けます。 スクリプト文字列をコピーした場合は、周囲の<script>タグを削除します。
- 保存 を選択し、編集を終了する を選択し、続いて 公開 を選択します。
サイト ページに Clarity スクリプトを追加したら、Clarity ポータルでデータとキャプチャの表示を開始する必要があります。 結果を表示する前に、より多くのページ ビューを待つ必要がある場合があります。