I publish articles about Salesforce Marketing Cloud, Agentforce and Data Cloud (Data 360). I hope they can be helpful for your learning and day-to-day work.
This time, we will display those results on a website.
When a customer opens a product detail page on TrailNest, product and category information is sent to Data 360. Personalization refers to that customer’s browsing history and selects an offer to present.
We will also provide a field for entering an email address to connect this to the identity resolution configured in the previous article.
This time, we will check the process from sending product views to displaying the selected offers on the website.
Only the following two products, which we have configured so far, are displayed.
Trail Duo Tent
Alpine Down Sleeping Bag
We will provide the following screens and features on the website.
Home page
Category pages
Product detail pages
Offer display area
Email address input field for test customers
Cart screen where products can be added
The cart will support adding products and displaying the subtotal. Coupon discount calculations and order processing are not included in this implementation.
First, we will check that the offer presented changes based on product views.
① Place the HTML in CloudPages
Open the CloudPages page prepared for this Real-Time Offer Management implementation and paste the following into the CloudPages HTML.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>TrailNest — A little closer to the wild</title>
<a class="cart-link" href="?view=cart"> Bag (<span id="cart-count">0</span>) </a> </nav> </header>
<main id="trailnest-app">
<div id="page-content"></div>
<div id="consent-panel" class="consent"> <p> Enable personalized offers for this demo. TrailNest will use a browser identifier and your product browsing activity to suggest offers. </p> <button id="enable-personalization" type="button"> Enable personalized offers </button> </div>
<section class="offer-area" aria-labelledby="offer-title"> <div class="section-head"> <div> <p class="eyebrow">A LITTLE EXTRA FOR YOUR ADVENTURE</p> <h2 id="offer-title">An offer for your next escape</h2> </div>
<footer> TRAILNEST DEMO · DESIGNED & BUILT BY NOBUYUKI WATANABE </footer>
<script> /* * Replace YOUR_DATA_360_TENANT with the tenant name * of your Real-Time Offer Management org. */ window.TrailNestOfferConfig = { endpoint: 'https://YOUR_DATA_360_TENANT.c360a.salesforce.com/personalization/decisions',
<button type="button" class="secondary" data-remove="${product.code}" > Remove </button> </div> `).join('') : '<p>Your bag is ready for an adventure.</p>' }
<div class="summary"> <strong>Subtotal ${money(subtotal)}</strong> <p class="muted"> Demo prices. Promotions have not been applied. Checkout is not available in this demo. </p> </div>
/* * Render only supported presentation tags and CSS. * Scripts and event handler attributes are not copied. */ function safeMarkup(html) { const template = document.createElement('template'); const fragment = document.createDocumentFragment();
const element = document.createElement( node.tagName.toLowerCase() );
for (let index = 0; index < node.style.length; index++) { const property = node.style.item(index); const value = node.style.getPropertyValue(property);
$('offer-status').textContent = 'Personalization could not start. Check the SDK and sitemap setup.'; });
})(); </script>
<!-- PASTE THE WEB SDK SCRIPT TAG FROM "TrailNest Offers Website" HERE. Register TrailNest_Offers_Sitemap.js in that same Website Connector. Do not paste a second SDK initialization script into this HTML. -->
Replace YOUR_DATA_360_TENANT with the Data 360 tenant name of the Real-Time Offer Management org used this time. The tenant name is on the Data Cloud Setup screen.
Press enter or click to view image in full size
The settings below it match what we created in the previous article.
The following IDs, which we have checked so far, are configured in this HTML.
Trail Duo Tent: 01tWs00000HJotlIAD
Alpine Down Sleeping Bag: 01tWs00000HJovNIAT
Tents: 0ZGWs000001fGLBOA2
Sleeping: 0ZGWs000001fGMnOAM
Product codes such as TN-TE-002 are used in the product page URLs, but IDs for matching are used for the products and categories sent to Data 360.
Get Nobuyuki Watanabe @marketingcloudtips’s stories in your inbox
Join Medium for free to get updates from this writer.
In this sample, that mapping is configured in the HTML.
② Add the Web SDK Loading Tag
In Data 360, open the Website Connector created in the previous article.
Name: TrailNest Offers Website
Obtain the script tag that loads this Website Connector’s Web SDK.
Press enter or click to view image in full size
The following comment is at the end of the CloudPages HTML.
<!-- PASTE THE WEB SDK SCRIPT TAG FROM "TrailNest Offers Website" HERE. Register TrailNest_Offers_Sitemap.js in that same Website Connector. Do not paste a second SDK initialization script into this HTML. -->
Press enter or click to view image in full size
Modify the script tag you obtained as shown below and paste it in this location.
Next, register all of the following in the Website Connector’s Sitemap.
(() => { 'use strict'; async function start(){ const bridge=window.TrailNestOffersBridge; if(!bridge){console.error('[TrailNest sitemap] The CloudPages bridge is missing. Place the SDK script after the page scripts.');return;} try{ const SI=SalesforceInteractions; await bridge.consent; await SI.init({consents:[{purpose:'Tracking',provider:'TrailNest Offers Demo',status:'Opt In'}]}); // Keep the browser ID generated by the SDK. Do not replace it with a Contact ID. await SI.sendEvent({interaction:{name:'TrailNest Profile Visit'},user:{attributes:{eventType:'identity',isAnonymous:'true'}}}); const root=document.getElementById('trailnest-app'),pageTypes=[]; if(root?.dataset.pageType==='product_detail'){ pageTypes.push({name:'product_detail',isMatch:()=>true,interaction:{ name:SI.CatalogObjectInteractionName.ViewCatalogObject, catalogObject:{type:'Product',id:root.dataset.productId,attributes:{name:root.dataset.productName,categoryId:root.dataset.categoryId}} }}); }else{ pageTypes.push({name:root?.dataset.pageType||'home',isMatch:()=>true,interaction:{name:'TrailNest Page View'}}); } SI.initSitemap({global:{locale:'en_US'},pageTypes}); // SDK submission completion is not a guarantee that the graph has been updated. bridge.resolveReady(SI); }catch(error){bridge.rejectReady(error);} } if(document.readyState==='loading')document.addEventListener('DOMContentLoaded',start,{once:true});else void start(); })();
Press enter or click to view image in full size
This file contains settings tailored to this test website.
Press enter or click to view image in full size
The main processing steps are as follows.
Wait for consent to use personalization on the website.
Initialize the Salesforce Interactions SDK.
Send the browser’s Profile information.
Determine the current page.
If it is a product detail page, send a product view event.
Make it possible to retrieve offers on the CloudPages side.
The basic SDK sequence is to initialize it using init() and then configure the Sitemap using initSitemap().
Information Sent for Product Views
On product detail pages, the following information is sent.
Interaction: View Catalog Object
Catalog Object Type: Product
Catalog Object ID: Salesforce product ID
categoryId: Salesforce category ID
This corresponds to the following part of the code.
The following button is displayed initially, so click it.
Enable personalized offers
Press enter or click to view image in full size
Clicking it gives consent to tracking for this test and starts SDK initialization and event submission.
In this sample, this consent is recorded in sessionStorage for each tab. You do not need to click the button every time you navigate to a product page within the same tab. The SDK starts collecting data after receiving consent to tracking.
Before viewing any products, confirm that the general offer heading, “Your Next Adventure Starts Here,” is displayed.
Press enter or click to view image in full size
Authentication Settings
In this configuration, Authentication Required is unchecked for the Personalization Point. You do not need to configure Salesforce login information or an access token in CloudPages.
⑤ Enter the Test Customer’s Email Address
In Make it personal at the bottom of the page, enter the email address of a test customer already registered in CRM.
Press enter or click to view image in full size
Next, click Connect my activity.
Press enter or click to view image in full size
This sends the entered email address to Data 360. The email address matching rule configured in the previous article links the web browsing history to the CRM customer in real time. You can check the results of this real-time linking in Data Explorer.
⑥ View Products and Check the Changes in Offers
1. Check the Tents Offer
1. Click Trail Duo Tent to open the product detail page.
Press enter or click to view image in full size
2. Check the offer displayed on the page. If it is still the general offer, wait a little and click Refresh offer.
Press enter or click to view image in full size
Although it is real time, event ingestion and updates take time, so the offer does not necessarily switch the instant a product is viewed.
3. Confirm that it changes to an offer presenting a 10% discount on tents.
Press enter or click to view image in full size
2. Check the Sleeping Offer
If you want to check Sleeping alone, use a different browser profile and a different test customer.
Open the home page and click Enable personalized offers.
Enter a different test customer’s email address and click Connect my activity.
Click Alpine Down Sleeping Bag.
Click Refresh offer as needed and confirm that it changes to an offer presenting a 15% discount on Sleeping.
Press enter or click to view image in full size
If the same customer views both Tents and Sleeping, the Tents offer is selected because Tents has a higher priority in the priorities configured this time.
⑦ What We Are Trying to Do in the First Place
To review, this implementation presents offers related to the categories that a customer has viewed. It is not configured to select the category with the most views.
With these settings, offers are selected as follows.
People who have viewed Tents: An offer for 10% off tents
People who have viewed Sleeping: An offer for 15% off sleeping bags and other items
People who have not viewed an eligible category: A general offer for $15 off purchases of $150 or more (Weekend)
If both categories have been viewed, the offer is selected based on the configured priorities.
Tents: Priority 10
Sleeping: Priority 20
This time, a lower number takes priority, so the Tents offer is displayed. The configuration does not switch to Sleeping because the customer has viewed Sleeping many times or viewed it most recently.
Put simply, once a customer views a tent, the tent coupon continues to appear. However, this does not mean “forever after viewing it once.” It applies only while Tents remains in the browsing data for the past seven days configured this time.
The coupons are assigned priorities so that related coupons are displayed preferentially to people who have a category they are more interested in than other categories.
Also, at this stage, we are only displaying information about the offer. We have not yet issued coupon codes or applied discounts to cart amounts. We plan to handle that in the next implementation.
What did you think?
This time, we prepared a configuration that sends product views from CloudPages and displays the offers selected by Personalization on the website.
By comparing the customer’s browsing information with the categories associated with an Offer, we change the offer presented to that customer.
Also, sending the email address connects this to the matching with CRM customers prepared in the previous article.
Next time, we will move on to the processing that applies the presented offer to the actual cart.
That’s all for this time.
Stay tuned for more Salesforce Marketing Cloud tips! 😎
I publish articles about Salesforce Marketing Cloud, Agentforce and Data Cloud (Data 360). I hope they can be helpful for your learning and day-to-day work.
