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.
If you want to send welcome email to the user subscribed to the specific mailing list in this example to a Newsletter, you can do so using Sitecore Send Automation.
In this case there is no OOTB automation available. Will crate a custom automation instead
To see how to setup a Subscribe abd Unsubscribe using javascript see this blog
Setting up Custom Autmation to Thanks user for subscribing to the Newsletter
Navigate to Automation and New –> Custom automation
Setting up Automation for welcome email-
This is avaiable in automation recipe-
Navigate to Automation and New –> From recipe
Update title and description of automation-
Select the trigger-
Choose the List Engagement option – When someone subscribes to a specific list
In this case I am choosing the Newsletter Email List- created in my other blog
This should update the automation-
Next add the condition or control step
For this example will choose – Wait a specific time interval-
So after the user subscribes to Newsletter the wokflow will wait for 1 minute to perform further action.
Select Send mail campaign action-
Fill in the appropriate fields and create action-
Automation Worflow should look like this-
Imp- do not forget to activate the automation workflow.
On subscribing to newsletter-
You should be able to see the user added to the Newsletter mailing list-
After a minute you should be able to see custom automation is triggered-
Result- Email been sent after subscription-
You can also choose the exisitng recipe but this has the trigger to send mail if the user subscribes to any list.
Choose Welcome email sequence option-
This should ne now available in Automation Workflows in an Incomplet state-
Should show up with the option to setup the Automation Workflow-
Might see mulitple such steps- update as per your requirements
Click on the Trigger – When someone subscribes to any list as highlighted
function SubscribeNewsletter(){
let email = document.getElementById("newsletteremail");
console.log(email)
if (email.value == "") {
alert("Ensure you input a value in both fields!");
} else {
// perform operation with form input
var request = new XMLHttpRequest();
request.open('POST', 'https://api.sitecoresend.io/v3/subscribers/{maillist}/subscribe.json?apikey={apikey}');
request.setRequestHeader('Content-Type', 'application/json');
request.setRequestHeader('Accept', 'application/json');
request.onreadystatechange = function () {
if (this.readyState === 4) {
console.log('Status:', this.status);
console.log('Headers:', this.getAllResponseHeaders());
console.log('Body:', this.responseText);
}
};
var body = {
'Name': 'Sandeep Pote',
'Email': email.value,
'HasExternalDoubleOptIn': false
};
request.send(JSON.stringify(body));
email.value = "";
alert("User subscribed to newsletter")
}
};
function UnSubscribeNewsletter(){
let email = document.getElementById("optout-newsletteremail");
console.log(email)
if (email.value == "") {
alert("Ensure you input a value in both fields!");
} else {
// perform operation with form input
var request = new XMLHttpRequest();
request.open('POST', 'https://api.sitecoresend.io/v3/subscribers/{maillist}/unsubscribe.json?apikey={apikey}');
request.setRequestHeader('Content-Type', 'application/json');
request.setRequestHeader('Accept', 'application/json');
request.onreadystatechange = function () {
if (this.readyState === 4) {
console.log('Status:', this.status);
console.log('Headers:', this.getAllResponseHeaders());
console.log('Body:', this.responseText);
}
};
var body = {
'Email': email.value,
};
request.send(JSON.stringify(body));
email.value = "";
alert("User subscribed to newsletter")
}
};
Looks simple, but you might see when the user un-subscribed from a mailing list the user is never sent a mail from other mailing list or any other transactional mail.
You can force close event to test Abandon Cart. This works only in non-prod environments.
Assumption- An identified guest which is active and has added products in cart.
If you are corectly tracking you should see in the timeline Session and event a Product been added.
So whilst developing if you want to force close this session, since you might not want to wait for 20 minutes for session to expire or whatever time is set to expire the session, you can force close the session to see or perform the next steps if the cart is been abandoned.
The force close event can be triggered by providing message type as FORCE_CLOSE in the payload.
Send the payload to this endpoint. For more details on what should be the apiEndpoint and client key see this blog
var browser_id = pm.environment.get("browserId") -- browser id
var pointOfSale = pm.environment.get("PointOfSale") -- point of sale
var message = {
"channel": "WEB",
"type": "FORCE_CLOSE",
"language": "EN",
"currency": "GBP",
"page": "home page",
"pos": pointOfSale,
"browser_id": browser_id
}
postman.setEnvironmentVariable("message", JSON.stringify(message));
Since the session is now closed we can see the Abandoned Revenue. Further reminder mails can be sent to user to complete the purchase on the abandoned cart.
Load the data in json file. Note that the above is a single row in a json and repeat the rows to upload multiple guets. This is not a json formatted file and should not have “,” to seperate rows as normally json file has. Highlighted email is important to identify the customer and add/update the extended data. This depends on the rule setup for your environment to identify the customer.
gzip the json file to upload
Example-
tar -czvf guest-upload.gz .\guest-upload.json
Generate MD5 File Checksum
Upload the gzip file to generate the check sum on this url –
Ensure the website is configured and verified before using the automation. See this blog. For this blog post I am using – https://moosend.vercel.app/
Create automation using Abandoned Cart automation recipe
Navigate to Automation link and create new automation using recipe-
Select Abandoned cart recipes-
Will be shown the Abandoned Cart Workflow-
Choose Trigger option-
Select- Trigger every time option
Select your website from dropdown and Save. Only verified website will be visible here. You may also choose all sites.
Open wait operation-
For testing I have selected 5 minutes. Ideally this can be few hours/days as per the requirement or enter specific date. By default it is 45 minutes. Enter the wait time and Save.
Setup the filter
Select apply this filter to mailing list. I have selected the email list of the site, you may select different list.
Enter the product if you wish to or leave empty.
Click on “Add a collection”.
Select the time if the product is not purchased for certain time. I have entered 6 minutes. Enter the details and Save.
Select “Added a Product To Cart” and filter value. In this I have added product “Americano”.
Select timer and enter the wait time to 6 minutes and Save
Select the action
In this case Send the mail to user if the product is not purchased in selected time.
Select Send Mail campaign-
Enter the subject, From address, mail body. Select Emails per day. Save once this option is filled.
Activate the “Abandoned Cart” automation-
Automation List with activated
Once the automation configuration is complete will now add product to cart. the product name here is “Americano” as selected in filter.
In the installation script you can find the details on how to add the product to cart.
function addToCart(){
// mandatory - a unique code for the product, like its SKU
var itemCode = 'Americano';
// mandatory - the name / title of this product
var itemName = 'Iced Americano';
// mandatory - the image url of this product
var itemImage = 'http://your.store/product-color-blue.jpg';
// mandatory - the price of this product
var itemPrice = 10.25;
// mandatory - the url to get to the relevant product page
var itemUrl = 'http://your.store/product-101';
// mandatory
var itemQuantity = 1;
// mandatory - the total price for purchasing the given quantity of this product
var itemTotalPrice = 10.25;
// optional - the category of this product
var itemCategory = 'Drinks';
// optional - the manufacturer, brand name or company / owner of this product (if any)
var itemManufacturer = 'Acme Co';
// optional - the supplier of this product (if any)
var itemSupplier = 'Supplier Co';
// you can add custom properies and later use them in segmentations or automations
// You can track things like the color or the sze of the t-shirt in this case
var extraProps = {'flavor': 'Chocolate', 'type': 'Iced'};
// Tracking add to cart events with mandatory arguments
mootrack('trackAddToOrder', itemCode, itemPrice, itemUrl, itemQuantity, itemTotalPrice);
alert("Added to cart event fired");
}
Hook the Add to cart to button-
<button class="button" onclick="addToCart()">Add to cart</button>
The site looks like this with the “Add To Cart” button
Website confirm the event was triggered.
In the automation list you can see the automation been Triggerd-
Once this is triggered you can see the next operation Wait for 5 minutes-
A mail should be triggerd after 6 minutes. Since the product is still in cart and not purchased.
After 5 minutes all the actions should be triggered.
Once all the actions are triggered should receive the mail-
Thats it for this blog. We have managed to trigger a automation event and send themail to the users who have product in the cart and not purchased e.e. Abandoned Cart.
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 –
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