There are multiple steps to implement the Sitecore Engage SDK, but we would like to review the steps for embedding tags into a site using the highly versatile Google Tag Manager.
Using Sitecore Personalize tags on Haramizu.com with Google Tag Manager
PersonalizeCustomer Data PlatformPublished: 2024-10-16
Currently, the following libraries are used on this blog site
- Next.js 14.2.3 ( App Router )
- Tailwind CSS 3.4.1
The official documentation for the implementation procedure is available at the following page.
Although it is possible to use the Engage SDK package under the above conditions, we will use Google Tag Manager for this implementation.
In Advance Preparation
First, there are several values required by Google Tag Manager. We will prepare these first.
- client_key_PLACEHOLDER
- stream_api_target_endpoint_PLACEHOLDER
- point_of_sale_PLACEHOLDER
- cookie_domain_PLACEHOLDER
- channel_PLACEHOLDER
- language_PLACEHOLDER
- currency_PLACEHOLDER
The above items are to be obtained from the Sitecore Personalize administration screen.
client_key_PLACEHOLDER
For the first item, Client Key, select the API Key menu in the upper right corner of the Sitecore CDP administration page.
Use the Client Key on the following screen.
stream_api_target_endpoint_PLACEHOLDER
This value is shown in the page shown above with a list of endpoints. In this case, the JP Region is used, so the following URL is set.
- https://api-engage-jpe.sitecorecloud.io/
point_of_sale_PLACEHOLDER
Since this is not an existing site, a new Point of Sale will be created in the CDP. We have prepared new values as follows
cookie_domain_PLACEHOLDER
This field is optional, but the value is in the form of .haramizu.com in order to set haramizu.com.
channel_PLACEHOLDER
For channels, set WEB.
language_PLACEHOLDER
As for the language, in this case it is set to "en".
currency_PLACEHOLDER
This time, the currency is set to JPY.
Embed tags in Google Tag Manager
The first step is to embed the code shown in the introduction as custom HTML.
Then, set and save the various values obtained above. After saving, use the test function of Google Tag Manager to check if the delivery is successful.
Since it is successfully loaded, we will publish this tag.
The tag has now been delivered. Now try to access the site. Then, when I open the developer tools, I get an error message.
In the Next.js configuration, change the Content Security Policy so that the analytics data is available. As a result, Site analytics now shows access data.
Summary
In this case, we have configured Sitecore Personalize to use Google Tag Manager to retrieve analytics from the Sitecore Personalize documentation. In the admin panel, some parameters are retrieved from the Sitecore CDP. In this way, you can use the Engage SDK to collect data from sites other than XM Cloud.