現在のところ、このブログサイトで利用しているライブラリは以下の通りです。

• Next.js 14.1.0 ( App Router )
• Tailwind CSS 3.4.1

実装方法の手順としては以下のページで公式文書が公開されています。

• Walkthroughs for integrating

上記の条件であれば Engage SDK のパッケージを利用することは可能ですが、今回は Google Tag Manager で実装をします。

事前準備として

まず Google Tag Manager で必要となる値がいくつかあります。これを先に準備を進めていきます。

• client_key_PLACEHOLDER
• stream_api_target_endpoint_PLACEHOLDER
• point_of_sale_PLACEHOLDER
• cookie_domain_PLACEHOLDER
• channel_PLACEHOLDER
• language_PLACEHOLDER
• currency_PLACEHOLDER

上記の項目は Sitecore Personalize の管理画面から取得することになります。

• Collect required details

client_key_PLACEHOLDER

最初の項目の Client Key に関して、今回は Sitecore CDP の管理画面の右上、API Key のメニューを選択してください。

下記の画面の Client Key を利用します。

stream_api_target_endpoint_PLACEHOLDER

この値は上記で紹介しているページで endpoint 一覧が表示されています。今回は JP Region となるため以下の URL を設定することになります。

• https://api-engage-jpe.sitecorecloud.io/

point_of_sale_PLACEHOLDER

今回は既存のサイトではないため、新しい Point of Sale を CDP に作成します。以下のように新しい値を準備しました。

cookie_domain_PLACEHOLDER

この項目はオプションですが、haramizu.com を設定するために、値としては .haramizu.com を設定する形となります。

channel_PLACEHOLDER

チャンネルに関しては WEB を設定します。

language_PLACEHOLDER

言語に関しては今回は en と設定します。

currency_PLACEHOLDER

今回の通貨は JPY を設定します。

Google Tag Manager にタグを埋め込む

最初に紹介をしているコードをまずは カスタム HTML として埋め込みます。

続いて、上記で取得している各種値を設定して保存をしてください。保存後、Google Tag Manager のテスト機能で配信ができているかを確認します。

読み込みに成功しているので、このタグを公開します。

これでタグが配信できました。今度はサイトにアクセスをしてみます。すると、開発者ツールを開くとエラーが出ている状況です。

これは CORS のポリシーで許可されていないドメインにアクセスをしている、というエラーになります。Next.js の設定にて Content Security Policy を変更して、アナリティクスのデータが取れるようにします。結果、Site analytics にアクセスデータが表示されるようになりました。

まとめ

今回は Sitecore Personalize のドキュメントから Google Tag Manager を利用してアナリティクスを取得できるように設定をしました。管理画面としては Sitecore CDP からいくつかのパラメータを取得している形です。このように、XM Cloud 以外のサイトのデータを取り込むときには、Engage SDK を利用することでデータを収集できるようになります。

関連タグ

• Personalize
• Customer Data Platform