Understanding the Web Campaign Rendering Process and the Role of MCP

The Basic Flow of Web Campaign Rendering

1. Web SDK Initialization: Detecting User Behavior

When a visitor accesses the website, the "Web SDK" (Beacon) embedded on the site begins to operate. The SDK detects visitor behavior (such as page views) and transmits this data to the Personalization server.

2. Server-Side Processing: Preparing Data

Based on the data sent from the Web SDK and the visitor data stored in Personalization (past behavior, profile attributes, etc.), the server processes the request. The Serverside Code defined in the template runs at this stage to prepare the response data. This payload can include campaign content as well as specific user attributes (e.g., Name, Loyalty Rank) if needed (See FAQ Q1).

3. Response to Client

The prepared display data is sent back from the Personalization server to the visitor's web browser (Client-Side).

4. Client-Side Code Execution: Preparation for Rendering

Upon receiving the data, the Clientside Code within the campaign template executes in the visitor's browser. This code processes the response payload and prepares to assemble the final display content.

5. HTML Generation via Handlebars: Building the Structure

Handlebars (the templating engine) dynamically generates the personalized HTML content—the structural "skeleton" of what will be displayed on the page.

【Important】 Distinguishing Roles

• Handlebars: Responsible for creating the HTML structure based on the data.

• CSS / JavaScript: The specific design (colors, fonts, layout) and interactive elements (animations, behaviors) are controlled by the website's frontend technologies, not by Handlebars itself. (See FAQ Q2).

6. Rendering to the Content Zone

The Clientside Code inserts the generated HTML content into the pre-designated area on the website known as the Content Zone.

7. Campaign Statistics Tracking

Events such as the campaign being displayed (Impression) or clicked are recorded and sent back to the Personalization server for performance measurement and analytics.

*For further details, please refer to this document and the related documentation.

https://developer.salesforce.com/docs/marketing/personalization/guide/personalization-template-system.html

FAQ: Frequently Asked Questions

Q1: Can I use user information (e.g., Name, Loyalty Rank) in the Web Campaign content?

A1: Yes, it is possible to display attributes stored in Personalization.

You can use Serverside Code in Step 2 to retrieve user attributes and include them in the display data payload. Then, using the Handlebars template in Step 5, you can reference this data to display the user's name within the HTML or dynamically render different content based on logic (e.g., Loyalty Rank). Please refer to the "Server-Side TypeScript Example" in the official documentation for implementation details.

Reference

Server-Side TypeScript Example :https://developer.salesforce.com/docs/marketing/personalization/guide/template-server-typescript.html#server-side-typescript-example

Web Template Handlebars:https://developer.salesforce.com/docs/marketing/personalization/guide/web-template-handlebars.html

Use Cases:

• Inserting the user's name into a banner image (e.g., "Welcome back, John!").

• Differentiating coupon offers based on membership tier (Gold vs. Silver).

⚠️ Important Architectural Warning Personalization is NOT a System of Record (SoR). It does not synchronize in real-time with your external login systems or user databases. We strongly discourage relying on Personalization to maintain data consistency for user account information (such as login states or real-time balances).

If you choose to proceed with this approach due to specific project constraints, please be aware that we do not guarantee data consistency. You must conduct rigorous testing to manage the inherent risks of data latency and discrepancies between your database and Personalization.

Q2: The "Look and Feel" or "Behavior" of the content is not as expected. Can Personalization support fix this?

A2: Personalization does not directly control the final visual design or interactive behavior.

MCP manages "Who" sees the campaign, "What" data is delivered, and "Where" it is injected. However, the final visual styling (CSS) and interactive behavior (JavaScript) are governed by your website's frontend code and the campaign template implementation.

Troubleshooting responsibility depends on the nature of the issue:

【Items to Check with Your Web Developer】

These issues depend on standard HTML/CSS/JavaScript or browser specifications:

• Adjustments to image size, positioning, margins, or padding.

• Interactive elements on pop-ups, animations, or specific UI behaviors.

• Buttons not reacting to clicks or not navigating to the correct URL.

• Layout issues specific to certain browsers (e.g., in-app browsers on mobile) or devices.

【Items Personalization Support Can Investigate】

These issues depend on MCP data delivery and configuration:

• User attributes (e.g., Rank) expected in the data payload are missing or null.

• The campaign appears to be displaying to users who do not match the targeting logic.

• The campaign is rendering in the wrong position (e.g., outside the intended Content Zone due to selector issues).