Mastering JavaScript for Salesforce Marketing Cloud Personalization

1. DOM Selection (querySelector)

The DOM (Document Object Model) is a representation of the HTML structure of a webpage. When working with JavaScript and Salesforce Marketing Cloud Personalization (MCP), you'll often need to grab elements from the page to extract or manipulate data.

What is querySelector()?

querySelector() is a JavaScript method used to select a single element from the DOM using CSS selectors.

// Selecting the first element with the class 'product-name'
  let productName = document.querySelector('.product-name').textContent;
  console.log(productName);

Real-World Example (for MCP):

Let’s say you’re trying to get the product name and price from a product page:

id: ({ document }) => document.querySelector('[data-product-id]')?.getAttribute('data-product-id'),
  name: ({ document }) => document.querySelector('.product-name')?.textContent,
  price: ({ document }) => parseFloat(document.querySelector('.product-price')?.textContent.replace('$', ''))

Here’s what’s happening:

• We’re using querySelector() to get the product ID from a custom data-product-id attribute.
• The product name and price are grabbed from the .product-name and .product-price classes, respectively.
• The ?. (optional chaining) makes sure that the script doesn’t break if an element isn’t found.

2. Arrow Functions

Arrow functions are a shorter syntax for writing functions in JavaScript. They are often used in scenarios where you want a quick function, like passing a callback or a value inside a method.

Why Arrow Functions?

• They are concise.
• They don’t have their own this context, which is useful in many scenarios, especially when passing functions as callbacks.

Basic Syntax:

const add = (a, b) => a + b;
  console.log(add(2, 3));  // Output: 5

Real-World Example (for MCP):

You will commonly see arrow functions in the MCP configuration when defining dynamic values like id, name, or price.

name: ({ document }) => document.querySelector('.product-name')?.textContent

3. Regex and URL Parsing

Regular expressions (Regex) are patterns used to match character combinations in strings. This is especially helpful when you need to extract or validate parts of URLs (for page-type matching) or other text-based data.

Why Regex for URL Matching?

In MCP, you often need to match pages to different types. For example, you might have one page type for product pages and another for category pages. Regex allows you to match these URLs dynamically.

Basic Regex Syntax:

• ^ – Matches the beginning of a string.
• .+ – Matches any character (except newline) one or more times.
• $ – Matches the end of a string.

Real-World Example:

match: {
    url: { regex: '/product/.+' }  // Match any URL starting with '/product/'
  }

4. Optional Chaining (?.)

Optional chaining is a feature in JavaScript that allows you to safely access deeply nested properties without causing errors if the property is undefined or null.

What Does It Do?

Prevents errors if you try to access properties on null or undefined. This is particularly useful in web scraping or manipulating DOM elements that may or may not exist.

Real-World Example:

// Without optional chaining
  let productPrice = document.querySelector('.product-price').textContent;  // This will throw an error if the element doesn't exist
  
  // With optional chaining
  let productPrice = document.querySelector('.product-price')?.textContent;  // If the element doesn't exist, it returns undefined instead of an error

In MCP, optional chaining ensures your code won’t break if an element doesn’t exist on a page.

5. Event Listeners (Optional)

In some cases, you may want to track user actions (like clicking a button or hovering over a product) to trigger personalized content. This is where event listeners come in.

What Are Event Listeners?

Event listeners are used to listen for specific events (like clicks or key presses) and then run some code when the event occurs.

Basic Syntax:

// Event listener for click event
  document.querySelector('.buy-now-button').addEventListener('click', function() {
    console.log('Button clicked!');
  });

Real-World Example (for MCP):

document.querySelector('.add-to-cart-button').addEventListener('click', function() {
    // Logic to trigger personalized recommendations or behavior
    console.log('Product added to cart');
  });

6. Basic Objects & Arrays

JavaScript uses objects and arrays extensively to store and manage data.

What Are Objects?

An object is a collection of key-value pairs where each key is a string and each value can be any type.

let product = {
    id: '1234',
    name: 'Sneakers',
    price: 99.99
  };
  console.log(product.name);  // Output: Sneakers

Real-World Example (for MCP):

{
    pageTypes: [
      {
        name: 'Product Page',
        match: { url: { regex: '/product/.+' } },
        entity: { type: 'Product', id: 'product_sku' }
      }
    ]
  }

7. String and Number Manipulation

Often, you’ll need to manipulate strings or numbers, such as extracting a price and converting it from a string to a number.

Real-World Example:

let priceString = '$99.99';
  let priceNumber = parseFloat(priceString.replace('$', ''));
  console.log(priceNumber);  // Output: 99.99

This is useful when pulling product prices or category data from the page and needing to process them for use in MCP’s personalization engine.