Web Template Building Best Practices

This article outlines best practices for building templates that run optimally on your website.

If you would like to track campaign stats with Marketing Cloud Personalization, use the data attributes (data-evg-*) in the Handlebars HTML. Note that using these data attributes requires the Campaign Stat Tracking gear installed and enabled for your dataset.

Visit the Campaign Stats Tracking article to learn more.

Depending on the SDK namespace you're using, use SalesforceInteractions.DisplayUtils.pageElementLoaded or Evergage.DisplayUtils.pageElementLoaded to defer rendering of your template until the content zone or target element has loaded on the webpage. Note that this method requires the Display Utilities gear installed and enabled for your dataset.

Visit the Template Display Utilities article to learn more.

In order to prevent "flicker" (where the original website content appears briefly before being replaced by the template), the apply function in the Client-side Code must return a Promise that resolves when the template renders. Note that the Flicker Defender gear must also be installed and enabled for your dataset.

Visit the Flicker Defender article to learn more.

Develop templates with accessibility in mind. To provide access to individuals who use assistive technologies like screen readers, ensure that your template is compliant with Web Content Accessibility Guidelines (WCAG).

Visit the Templates Style Guide and Coding Conventions article to learn more. Read the two sections on "Accessibility" under "Handlebars HTML" and "CSS".

Develop your template to be compatible across different browsers as needed. Click the "Test" button in the template editor to test your template on your website in a new separate browser window.