Template Client JavaScript
When a campaign is returned to the browser, the client-side JavaScript code written within the template editor's Clientside Code tab is run. Here, a template developer can write any JavaScript code compatible with the target browsers of their website. The context is passed from the server to the client-side code, determining what to do with the data.
This article outlines the following JavaScript functions used within the template's Clientside Code tab.
applyresetcontrol
The JavaScript you write in a template's Clientside Code tab executes in the browser when a campaign using that template returns from the Marketing Cloud Personalization server. The template's code must register two functions: apply and reset. The template's code can also register a control function for handling the control group of a campaign.
When a campaign is returned to the web browser, the user is in either a "Test" group or the "Control" group. If the user is in a "Test" group, the template executes the apply function. Likewise, if the user is in the "Control" group, the template executes the control function.
The following code sample displays the boilerplate code for a new template.
The registerTemplate function is not defined in any public scope.
A template calls the apply function when provided with a context to handle or render visible content on the page or run code that is dependent upon data from that context. A template executes the apply function when the apply function has the following structure.
The first parameter is the context; the payload returned from the server-side code of the Serverside Code tab in the form of a JavaScript object.
The second parameter is template; a function that expects the context as an argument to resolve with the Handlebars template, returning the generated HTML content.
The apply function can return a Promise that delays the rendering of the template until the Promise resolves. If you return a Promise, the OnTemplateDisplayEnd event fires when the Promise resolved, making it easy for developers to delay the OnTemplateDisplayEnd event to whenever certain DOM elements become available on a page. If your apply function does not return a Promise, the OnTemplateDisplayEnd event fires immediately, subsequently causing the built-in Campaign Stats Gear to begin tracking campaign statistics immediately.
As mentioned in the Campaign Stats Tracking documentation, the OnTemplateDisplayEnd event is what triggers the built-in Campaign Stats Gear to begin tracking campaign statistics.
The template function passes the context to the pre-compiled Handlebars HTML and returns the HTML generated by populating the template fields with the context object attributes. The template function has the following structure.
For information regarding content zones, refer to the Content Zones and Server TypeScript documentation.
The reset function is called to remove the template from the DOM. Personalization does not call the reset function on your website from the Personalization module of the Salesforce Interactions SDK at any stage of a campaign's lifecycle. However, the Personalization Visual Editor uses the reset function when developing a template.
If the template is meant to replace content on the page, the proper implementation of this method is to restore the replaced content.
The reset function has the following structure.
It is not advised to call your defined reset function directly, such as serving as the handler for a close icon.
The control function is called for users in the control group of the campaign to handle sending stats and also render content for those users. The control function can return a Promise that delays running the function's code until the Promise resolves, similar to using a Promise in the apply function.
The control function has the following structure.