Welcome! This is my personal blog about Web technologies, software development, open source and other related topics
The ideas and opinions expressed here are solely mine and don't represent those of others, either individuals or companies.The code snippets or references to software products or analogous are to be used without any warranty of any kind. If you enjoy the content, feel free to share it and re-use it as long as you provide a link to the original post.
Sitecore Send website tracking service enables to collect data and makes it available for users. It uses cookie-based technology to track data on end-user page visits, product view, add to cart and purchase.
Add website to Sitecore Send
Pre-requisite-
You need to have a website up and running. this can be a simple HTML site or you can choose any other web techology with any Fronetend framework like nextjs, react or jquery etc.
I have created a simple site and hosted using vercel – e.g.:- https://moosend.vercel.app/
To add a website to Sitecore Send –
Navigate to Account –> Websites or New Website option
List of Websites-
Should display list of Websites already configured and if its verified.
Add Website-
On this page enter your website url- https://moosend.vercel.app/
Once this is submitted it should show the Website Id alond with Connection Script. Website Id is required to add this in script to start tracking.
The website list should show the newly added website which should be in unverfied state-
Connect Website
Navigate to Install connection script option. Install button should show the script that is require to add to your website
Copy this script to you website head section, this may be different for you site –
Add the Product details the user must have added in cart and send the below request to Sitecore CDP.
At this point the Guest must have been identified as the Customer. Search Customer by browserid or Name.
Should the current activity of the customer.
Click on Timeline and View Session details
The session should show the product been added to the cart. Based on this if the product remains in cart for certain time and the user doen’t checkout you may provision to trigger abandon cart event.
cURL code snippet-
curl --location -g --request GET 'https://api.boxever.com/v1.2/event/create.json?client_key=<<Client Key>>&message={"channel":"WEB","type":"CONFIRM","language":"EN","currency":"GBP","page":"home page","pos":"pastoral-witty-grill","browser_id":"7ed103bd-08c2-47f4-8f69-91141ca3200d","product":[{"item_id":"EXACT_90"}]}'
C# code snippet-
var client = new RestClient("https://api.boxever.com/v1.2/event/create.json?client_key=<<Client Key>>&message={\"channel\":\"WEB\",\"type\":\"CONFIRM\",\"language\":\"EN\",\"currency\":\"GBP\",\"page\":\"home page\",\"pos\":\"pastoral-witty-grill\",\"browser_id\":\"7ed103bd-08c2-47f4-8f69-91141ca3200d\",\"product\":[{\"item_id\":\"EXACT_90\"}]}");
client.Timeout = -1;
var request = new RestRequest(Method.GET);
IRestResponse response = client.Execute(request);
Console.WriteLine(response.Content);
An IDENTITY event contains data that enables Sitecore CDP to perform identity resolution. When Sitecore CDP receives an IDENTITY event, it runs a linking algorithm to try to match guest data from separate guest profiles, based on your organization’s identity rules.
A guest is identified with the browser id. To search the guest Navigate to the Guest list page and search for the guest with the browwser id.
To identify the guest as a Customer provide the payload with the type as IDENTITY and the Customer details, such as their email, firstname, lastname etc.
Now search the Guest by browserid and the Gust Type should be Customer as the Guest has been identified.
CURL code snippet-
curl --location -g --request GET 'https://api.boxever.com/v1.2/event/create.json?client_key=<<client key>>&message={"channel":"WEB","type":"IDENTITY","language":"EN","currency":"GBP","page":"home page","pos":"pastoral-witty-grill","browser_id":"7ed103bd-08c2-47f4-8f69-91141ca3200d","title":"Sir","email":"pgrill@malify.com","firstname":"Pastoral","lastname":"Grill"}'
C# code snippet-
var client = new RestClient("https://api.boxever.com/v1.2/event/create.json?client_key=<<code key>>&message={\"channel\":\"WEB\",\"type\":\"IDENTITY\",\"language\":\"EN\",\"currency\":\"GBP\",\"page\":\"home page\",\"pos\":\"pastoral-witty-grill\",\"browser_id\":\"7ed103bd-08c2-47f4-8f69-91141ca3200d\",\"title\":\"Sir\",\"email\":\"pgrill@malify.com\",\"firstname\":\"Pastoral\",\"lastname\":\"Grill\"}");
client.Timeout = -1;
var request = new RestRequest(Method.GET);
IRestResponse response = client.Execute(request);
Console.WriteLine(response.Content);
dotnet new -i Sitecore.DevEx.Templates --nuget-source https://sitecore.myget.org/F/sc-packages/api/v3/index.json
dotnet new sitecore.nextjs.gettingstarted -n samplejss
Should first Restores dotnet local tools for the solution and Initializes the JSS project
What is your Sitecore hostname (used if deployed to Sitecore)? (samplejss.dev.local) << leave blank or provide the host name>>
How would you like to fetch Layout and Dictionary data?
GraphQL
REST
How would you like to prerender your application?
SSG
SSR
Which additional language do you want to support (en is already included and required)? << leave blank or type the language you want. should select da-DK by default and additional language>>
JSS application is now ready and updated for continerized environment.
Navigate to project folder and initialize the environment.
Working on Linux system after been worked on Windows for 2 decades is always fun.
This blog post is to setup the Sitecore OrderCloud Headstart on Ubuntu the Docker way. As all the images used for the Headstart is are Linux based, this I didn’t find major difference how this is been setup in Windows system apart from few changes while installing Storage Explorer and few other erros which I have noted in this blog post.
Note – use sudo for each command or “sudo i”to run as root.
Lets start composing and solve errros that might come ourr way-
sudo docker-compose up -d
npm needs TLS1.2
npm notice Beginning October 4, 2021, all connections to the npm registry – including for package installation – must use TLS 1.2 or higher. You are currently using plaintext http to connect. Please visit the GitHub blog for more information: https://github.blog/2021-08-23-npm-registry-deprecating-tls-1-0-tls-1-1/ npm WARN @ordercloud/headstart-sdk@0.0.0 No repository field.
Once you have followed and applied the settings mentioned in the blog, should be able to see the translation files in local storage and able to access the file.
We also have to set CQRS for blob container – lets do this later.
Middleware exited with errors-
Error –
See the resolution to this issue here – section – Unable to start Middleware container due to erros
Error – Connection refused (127.0.0.1:8081)
System.AggregateException: One or more errors occurred. (Connection refused (127.0.0.1:8081))
---> System.Net.Http.HttpRequestException: Connection refused (127.0.0.1:8081)
See the resolution to this issue here – section – Connection to Comos DB is failing
Error- Unsupported platform
0 18.52 npm ERR! code EBADPLATFORM
#0 18.53 npm ERR! notsup Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
#0 18.53 npm ERR! notsup Valid OS: darwin
#0 18.53 npm ERR! notsup Valid Arch: any
#0 18.53 npm ERR! notsup Actual OS: linux
#0 18.53 npm ERR! notsup Actual Arch: x64
Error 2- Package installation must use TLS 1.2 or higher and Cannot read properties of null (reading ‘pickAlgorithm’)
0 47.60 npm notice Beginning October 4, 2021, all connections to the npm registry - including for package installation - must use TLS 1.2 or higher. You are currently using plaintext http to connect. Please visit the GitHub blog for more information: https://github.blog/2021-08-23-npm-registry-deprecating-tls-1-0-tls-1-1/
0 114.7 npm ERR! Cannot read properties of null (reading 'pickAlgorithm')
#0 2.885 Node.js version v12.20.0 detected.
#0 2.885 The Angular CLI requires a minimum Node.js version of either v14.15, or v16.10.
> [headstart-buyer:local-linux builder 9/9] RUN cd /build/APP && npm run build --prod:
#0 0.954 npm WARN config production Use `--omit=dev` instead.
#0 0.983
#0 0.983 > headstart@0.0.0 build
#0 0.983 > ng build --configuration=deploy && node scripts/hash-css-files && node scripts/move-release-scripts && node scripts/copy-main-js && node scripts/copy-index-html
#0 0.983
#0 11.70 - Generating browser application bundles (phase: setup)...
#0 16.88 Processing legacy "View Engine" libraries:
#0 17.75 - @ngx-translate/http-loader [es2015/esm2015] (git+https://github.com/ngx-translate/http-loader.git)
#0 18.98 - ngx-forms-typed [es2015/esm2015] (https://github.com/gparlakov/forms-typed)
#0 21.65 Encourage the library authors to publish an Ivy distribution.
#0 109.2 Killed
------
failed to solve: executor failed running [/bin/sh -c cd /build/APP && npm run build --prod]: exit code: 137
Not sure why this error but I ran following command instead-
docker-compose build --no-cache
Error 4 –
cannot write C:\Users\sande\AppData\Local\Temp\tmppxl_v0jp because server did not provide an image ID
ERROR: Service 'buyer' failed to build : Build failed
Solution-
Set the latest nginx alpine base image in the Dockerfile as nginx:1.23.3-alpine. See the latest availabel bae image here – https://hub.docker.com/_/nginx
Change Dockerfile in this location headstart\docker\build\UI
Update nodejs-npm to just npm in the Dockerfile
Dockerfile should look like this-
Sometimes you may have to restart Docker Desktop
Error 5-
Error response from daemon: Ports are not available: exposing port TCP 0.0.0.0:80 -> 0.0.0.0:0: listen tcp 0.0.0.0:80: bind: An attempt was made to access a socket in a way forbidden by its
The said port might be in use. This is mostly when IIS is running. Stop IIS.
Once you get thhrough these errors, should have following images downloaded and containers created-
Here you can see the warnings compalining few env variable values not set. This is next we are going to setup.
For any environment changes use “docker compose down” and then “docker compose up -d”
Compile/Build the Headstart.sln
In the ServiceCollectionExtensions.cs file in OrderCloud.Integrations.EnvironmentSeed project
remove the condition for checking the BlobPrimaryEndpoint as it is not used and hence not required.
Same way if you are not using ExchangeRates, Tax Provider, payment Provider etc remove the values from .env file to avoid such errors. Following I have removed, you can add this later as and when required. Make the values for this variables empty
Recreate the middleware and container again. Delete the middleware image as the code is changes. We dont have the volume mounted hence for setup this way π
docker rmi <<middleware image id>>
docker compose up -d
More errors-
Connection to Comos DB is failing-
2023-03-17 18:16:43 Application startup exception: System.AggregateException: One or more errors occurred. (Connection refused (127.0.0.1:8081))
2023-03-17 18:16:43 ---> System.Net.Http.HttpRequestException: Connection refused (127.0.0.1:8081)
2023-03-17 18:16:43 ---> System.Net.Sockets.SocketException (111): Connection refused
Change CosmosSettings_EndpointUri in .env from “http://127.0.0.1:8081” to use localhost i.e.- change to –
Address not available (localhost:8081) – Cosmos DB address not available
2023-03-17 18:22:34 Application startup exception: System.AggregateException: One or more errors occurred. (Address not available (localhost:8081))
2023-03-17 18:22:34 ---> System.Net.Http.HttpRequestException: Address not available (localhost:8081)
2023-03-17 18:22:34 ---> System.Net.Sockets.SocketException (99): Address not available
Solution-
Change following in entrypoing.sh file located at – headstart\docker\build\middleware
i.e. instead of using $CosmosSettings_EndpointUri use $CosmosEndpointURI
this varaible contains the IP address of the comos db hosted. This can change everytime the container is created.
Change this -
-e "this['CosmosSettings:EndpointUri']='$CosmosSettings_EndpointUri'"
to
-e "this['CosmosSettings:EndpointUri']='$CosmosEndpointURI'"
Error- “Message”: “Could not find a part of the path ‘/app/wwwroot\\i18n’.”,
Tried to debug this and seems some how the path is not correctly formed to upload the translations from /app/wwwroot\\i18n folder in container. Changed this to /app/wwwroot/i18n and the files are now uploaded to storage.
Create a Blob Container β ngx-translate and create new Virtual Directory i18n
Blob Container and folder name can be any other name. You need to configure this correctly in UI config.See this in later steps
Upload the translation file(optional)
Translation file should be created by Headstart Api while seeding the marketplace further in this blog. This is a test to check if the resource is available. I have attached en.json file here.
Copy URL of the file and check if this is accessible-
Looks like cannot access.
To resolve this error set public access level on Blob container “ngx-translate”
Select Public read access for container and blobs-
Now the resource should be accessible.
Similarly upload resources for fr and jp language.
The resource file should be available in following location – headstart\src\Middleware\src\Headstart.API\wwwroot\i18n
0 2.885 The Angular CLI requires a minimum Node.js version of either v14.15, or v16.10.
It looks like in docker compose file for buyer and seller node version configured are old.
Update the following in docker-compose.yml. At the time of writing this blog the node version is 18.13.0. See here for latest- https://hub.docker.com/_/node
February 2023 Update – Sitecore has released new api endpoint per region which routes through a CDN closer to end users call along with new Javascript library. See the new documentation here – Sitecore CDP developer documentation
See the release notes for the latest version. Point of writing this blog the version is 1.4.9. This can change. See the link to get the latest version.
Recompress the files into two or more compressed batch files that do not exceed the 50MB size limit. Then upload the compressed files as separate batches.
If the base64 checksum attribute in header does not match the hex-encoded MD5 Checksum generated by uploading the compressed file you will receive 409 response.