Interaction Studio: Synchronous or Asynchronous

Page Flicker

Page flicker is a brief moment where the original content of a web page is visible before any changes (such as personalization or dynamic content) are applied. This can be distracting to users and can negatively impact the user experience.

Integration Methods for Salesforce Interactions SDK

When integrating the Salesforce Interactions SDK (a JavaScript library used to track user interactions and personalize content), you have two main methods to choose from: synchronous and asynchronous.

1. Synchronous Integration:

   • How it works: The JavaScript beacon for Personalization loads before the rest of the web page.

   • Advantages: This method can prevent page flicker because the personalization code is loaded and executed before the original content is displayed. The user sees the personalized content immediately.

   • Disadvantages: It may slow down the initial loading time of the web page because the beacon must fully load before the rest of the content.

2. Asynchronous Integration:

   • How it works: The JavaScript beacon for Personalization loads after the rest of the web page has loaded.

   • Advantages: This method ensures that the web page loads quickly because the main content is not delayed by the personalization beacon.

   • Disadvantages: This can result in page flicker, as the original content is displayed first, followed by the personalized content once the beacon has finished loading and executed.

Example Scenarios

1. Synchronous Integration Example:

   • Imagine a retail website that wants to show personalized product recommendations immediately when a user lands on the homepage. Using synchronous integration, the personalization script loads first, ensuring the user only sees the personalized recommendations and not the default content.

2. Asynchronous Integration Example:

   • Consider a news website that prioritizes fast loading times. They might choose asynchronous integration, accepting that users will see the default headlines briefly before personalized headlines appear, because the overall loading time of the page is faster.

Choosing the Right Method

• Preventing Page Flicker: If it’s crucial for your user experience to avoid any flash of the original content (like in a highly personalized e-commerce site), synchronous integration is the better choice.

• Optimizing Load Time: If the speed of the initial load is more important and a brief flicker is acceptable (like in a content-heavy site where personalization is a secondary feature), asynchronous integration might be preferred.

Summary

• Synchronous Integration:

  • Prevents page flicker.

  • Loads Personalization JavaScript before the rest of the page.

  • Can slow down the initial load time.

• Asynchronous Integration:

  • May cause page flicker.

  • Loads Personalization JavaScript after the rest of the page.

  • Ensures faster initial load time.

Considerations for Self-Hosting the JavaScript Beacon 

Key Points

1. Web Integrations with Marketing Cloud Personalization:

   • This refers to integrating your website with Marketing Cloud Personalization using the Salesforce Interactions SDK.

2. JavaScript Beacon:

   • A piece of JavaScript code that tracks user interactions and sends data to the Marketing Cloud Personalization system.

3. Content Delivery Network (CDN):

   • Typically, the JavaScript beacon is hosted by Salesforce's CDN. A CDN is a network of servers distributed across various locations to deliver content (like JavaScript files) to users quickly and reliably.

4. Self-Hosting Option:

   • Your organization has the option to host the JavaScript beacon on your own servers instead of using Salesforce's CDN.

Considerations for Self-Hosting

When you decide to self-host the JavaScript beacon, there are certain factors and best practices to consider. These considerations ensure that the beacon functions correctly and efficiently when hosted on your infrastructure.

Explanation with an Example

1. Default Hosting (Using Salesforce CDN):

   • By default, the JavaScript beacon is hosted by Salesforce's CDN. This means that Salesforce manages the delivery and availability of the JavaScript file.

   • Example: Your HTML might include the beacon like this: <script src="https://cdn.salesforce.com/path/to/salesforce-interactions-sdk.js"></script>

   • Advantages:

     • Salesforce handles updates, scaling, and availability.

     • Faster delivery due to the distributed nature of the CDN.

2. Self-Hosting:

   • If your organization chooses to self-host, you will need to download the JavaScript beacon and host it on your own web servers.

   • Example: Your HTML might include the beacon like this: <script src="https://yourdomain.com/path/to/self-hosted-sdk.js"></script>

   • Considerations:

     • Maintenance: You are responsible for updating the beacon when new versions are released.

     • Performance: Ensure your server infrastructure can handle the load and deliver the beacon quickly.

     • Security: Implement security measures to protect the JavaScript file from tampering.

     • Availability: Ensure high availability and reliability of your hosting to avoid disruptions.

Summary

1. Default Hosting:

   • Hosted by Salesforce CDN.

   • Pros: Managed updates, better performance, and reliability due to distributed servers.

   • Cons: Less control over the hosting environment.

2. Self-Hosting:

   • Hosted by your organization.

   • Pros: More control over the hosting environment.

   • Cons: Requires additional effort for maintenance, security, and ensuring performance.

Decision Factors

• Control: If you need full control over the hosting environment and customization, self-hosting might be preferred.

• Resources: Consider if your organization has the resources to manage and maintain the beacon effectively.

• Performance and Availability: Ensure that your infrastructure can meet the demands of delivering the beacon efficiently.

Final Note

For most organizations, using the default CDN hosting provided by Salesforce will be sufficient and more efficient. Self-hosting is an option if you have specific requirements that necessitate it and the resources to manage it properly. The considerations listed in the original content guide you on what to keep in mind if you choose to self-host the JavaScript beacon.