サイト ページにスクリプト コードを追加してテレメトリをサポートする
この記事では、クライアント側のテレメトリの収集をサポートするクライアント側のスクリプト コードをサイト ページに追加する方法について説明します。
Web Analytics は、顧客がサイトとどのように対話するかを理解し、最大のコンバージョンのためにエクスペリエンスを最適化するのに役立つ決定を下したい場合に、重要なツールとなります。 Google Analytics、Clicky、Moz Analytics、KISSMetrics など、これらの目標を達成するために、多くの Web Analytics パッケージが用意されています。 ほとんどの Web Analytics パッケージでは、サイトのすべてのページの HTML の <head> 要素にクライアント側のスクリプト コードを追加する必要があります。
メモ
この記事の手順は、Microsoft Dynamics 365 Commerce がネイティブに提供していない他のカスタム クライアント側機能にも適用されます。
スクリプ トコードに再利用可能なフラグメントを作成する
フラグメントを使用すると、使用するテンプレートに関係なく、サイト上のすべてのページでインラインまたは外部スクリプト コードを再利用できます。
インライン スクリプト コードに再利用可能なフラグメントを作成する
サイト ビルダーのインライン スクリプト コードに再利用可能なフラグメントを作成するには、次の手順を実行します。
- フラグメント に移動し、新規 を選択します。
- 新規フラグメント ダイアログ ボックスで、インライン スクリプト を選択します。
- フラグメント名 で、フラグメントの名前を入力し、OK を選択します。
- 作成したフラグメントで、既定のインライン スクリプト モジュールを選択します。
- 右側のプロパティウィンドウの インライン スクリプトで、クライアント サイド スクリプトを入力します。 次に、必要に応じて他のオプションを設定します。
- 保存 を選択し、編集完了 を選択します。
- 公開を選択します。
外部スクリプト コードに再利用可能なフラグメントを作成する
サイト ビルダーの外部スクリプト コードに再利用可能なフラグメントを作成するには、次の手順を実行します。
- フラグメント に移動し、新規 を選択します。
- 新規フラグメント ダイアログ ボックスで、外部スクリプト を選択します。
- フラグメント名 で、フラグメントの名前を入力し、OK を選択します。
- 作成したフラグメントで、既定の外部スクリプト モジュールを選択します。
- 右側のプロパティウィンドウの スクリプト ソース で、外部スクリプト ソースの外部または相対 URL を追加します。 次に、必要に応じて他のオプションを設定します。
- 保存 を選択し、編集完了 を選択します。
- 公開を選択します。
メモ
サイトのコンテンツ セキュリティ ポリシー (CSP) が有効になっている場合は、すべての外部 URL が Commerce サイト ビルダーの script-src CSP ディレクティブに追加されていることを確認してください。 詳細については、コンテンツ セキュリティ ポリシー (CSP) の管理 を参照してください。
スクリプト コードを含むフラグメントをテンプレートに追加する
サイト ビルダーのテンプレートにスクリプト コードを含むフラグメントを追加するには、次の手順を実行します。
- テンプレートに移動して、スクリプト コードを追加するページのテンプレートを開きます。
- 左ウィンドウでテンプレート階層を展開し、HTML ヘッド スロットを表示します。
- HTML Head スロットの省略ボタン (...) を選択し、フラグメントの追加 を選択します。
- スクリプト コードに対して作成したフラグメントを選択します。
- 保存 を選択し、編集完了 を選択します。
- 公開を選択します。
外部スクリプトまたはインライン スクリプトを直接テンプレートに追加する
単一のテンプレートによって制御される一連のページにインラインまたは外部スクリプトを直接挿入する場合は、最初にフラグメントを作成する必要はありません。
インライン スクリプトを直接テンプレートに追加する
サイト ビルダーのテンプレートにインライン スクリプトを直接追加するには、次の手順を実行します。
- テンプレートに移動して、スクリプト コードを追加するページのテンプレートを開きます。
- 左ウィンドウでテンプレート階層を展開し、HTML ヘッド スロットを表示します。
- HTML Head スロットの省略ボタン (...) を選択し、モジュールの追加 を選択します。
- モジュールの追加 ダイアログ ボックスで、インライン スクリプト を選択します。
- 右側のプロパティウィンドウの インライン スクリプトで、クライアント サイド スクリプトを入力します。 次に、必要に応じて他のオプションを設定します。
- 保存 を選択し、編集完了 を選択します。
- 公開を選択します。
外部スクリプトを直接テンプレートに追加する
サイト ビルダーのテンプレートに外部スクリプトを直接追加するには、次の手順を実行します。
- テンプレートに移動して、スクリプト コードを追加するページのテンプレートを開きます。
- 左ウィンドウでテンプレート階層を展開し、HTML ヘッド スロットを表示します。
- HTML Head スロットの省略ボタン (...) を選択し、モジュールの追加 を選択します。
- モジュールの追加 ダイアログ ボックスで、外部スクリプト を選択します。
- 右側のプロパティウィンドウの スクリプト ソース で、外部スクリプト ソースの外部または相対 URL を追加します。 次に、必要に応じて他のオプションを設定します。
- 保存 を選択し、編集完了 を選択します。
- 公開を選択します。