```
## Use with Handlebars and Client-side Code
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, a template's client-side code executes the `apply()` function. Likewise, if the user is in the "Control" group, a template's client-side code executes the `control()` function. Both functions can return either a `Promise` or `void`. For more information, see the [Template Client JavaScript](/docs/marketing/personalization/guide/template-client-javascript.md) documentation.
If the `apply()` function doesn't return a `Promise`, Personalization dispatches the `Evergage.CustomEvents.OnTemplateDisplayEnd` event immediately, subsequently triggering the Campaign Stats Gear to begin tracking campaign statistics even before the template may have fully rendered.
For more information on the `apply()` function, refer to the [Template Client JavaScript](/docs/marketing/personalization/guide/template-client-javascript.md#apply) documentation.
:::note
The "Control" experience *does not* necessarily need to render HTML into the DOM for Campaign Stats Gear to track a "Control" impression. For instance, an impression stat is tracked immediately if the `control()` function does not return a `Promise`.
:::
The following code samples are examples of how you can return a Promise in an `apply()` function using [the `pageElementLoaded` method from `DisplayUtils`](/docs/marketing/personalization/guide/web-template-display-utilities.md) in the `SalesforceInteractions` and `Evergage` namespaces.
```sfdocs-code {"lang":"javascript", "title": "SalesforceInteractions Namespace"}
function apply(context, template) {
const contentZoneSelector = SalesforceInteractions.mcis.getContentZoneSelector(
context.contentZone,
);
return SalesforceInteractions.DisplayUtils.bind(buildBindId(context))
.pageElementLoaded(contentZoneSelector)
.then((element) => {
const html = template(context);
SalesforceInteractions.cashDom(element).html(html);
});
}
```
```sfdocs-code {"lang":"javascript", "title": "Evergage Namespace"}
function apply(context, template) {
const contentZoneSelector = Evergage.getContentZoneSelector(context.contentZone);
return Evergage.DisplayUtils.bind(buildBindId(context))
.pageElementLoaded(contentZoneSelector)
.then((element) => {
const html = template(context);
Evergage.cashDom(element).html(html);
});
}
```
The following code samples are examples of how you can return a Promise in an `apply()` function using a `new Promise`.
```sfdocs-code {"lang":"javascript", "title": "SalesforceInteractions Namespace"}
function apply(context, template) {
const contentZoneSelector = SalesforceInteractions.mcis.getContentZoneSelector(
context.contentZone,
);
return new Promise((resolve) => {
const startTime = Date.now();
const contentZoneElement = () => SalesforceInteractions.cashDom(contentZoneSelector);
let tryInterval = setInterval(() => {
if (contentZoneElement().length > 0) {
clearInterval(tryInterval);
resolve(contentZoneElement());
}
}, 100);
}).then((element) => {
if (element == null) return; // if we remove the timeout case, this can be removed too
const html = template(context);
SalesforceInteractions.cashDom(element).html(html);
});
}
```
```sfdocs-code {"lang":"javascript", "title": "Evergage Namespace"}
function apply(context, template) {
const contentZoneSelector = Evergage.getContentZoneSelector(context.contentZone);
return new Promise((resolve) => {
const startTime = Date.now();
const contentZoneElement = () => Evergage.cashDom(contentZoneSelector);
let tryInterval = setInterval(() => {
if (contentZoneElement().length > 0) {
clearInterval(tryInterval);
resolve(contentZoneElement());
}
}, 100);
}).then((element) => {
if (element == null) return; // if we remove the timeout case, this can be removed too
const html = template(context);
Evergage.cashDom(element).html(html);
});
}
```
## Use without Handlebars and Client-side Code
If your site does not use Handlebars and Client-side Code in a Personalization template to render campaigns, you can still use the Campaign Stats Gear to track campaign statistics.
When you are ready to track an impression for a Personalization campaign, dispatch an `SalesforceInteractions.mcis.CustomEvents.OnTemplateDisplayEnd` event or `Evergage.CustomEvents.OnTemplateDisplayEnd` event, depending on the SDK namespace you're using, with the following `detail`.
```typescript
{
payload: {
campaign: string,
experience: string,
userGroup: string
}
}
```
The following code samples depict how you can dispatch a `SalesforceInteractions.mcis.CustomEvents.OnTemplateDisplayEnd` or `Evergage.CustomEvents.OnTemplateDisplayEnd` event with an example payload.
```sfdocs-code {"lang":"javascript", "title": "SalesforceInteractions Namespace"}
document.dispatchEvent(
new CustomEvent(window.SalesforceInteractions.mcis.CustomEvents.OnTemplateDisplayEnd, {
detail: {
payload: {
campaign: "abc12",
experience: "def34",
userGroup: "Test",
},
},
}),
);
```
```sfdocs-code {"lang":"javascript", "title": "Evergage Namespace"}
document.dispatchEvent(
new CustomEvent(window.Evergage.CustomEvents.OnTemplateDisplayEnd, {
detail: {
payload: {
campaign: "abc12",
experience: "def34",
userGroup: "Test",
},
},
}),
);
```
## Control Click Tracking
In order to track clicks in the control group, the data attributes must be added to elements that are either rendered by the campaign, or exist on site and a user in the control group would see. See the following code samples for guidance on adding these attributes in the `control()` function.
```sfdocs-code {"lang":"javascript", "title": "SalesforceInteractions Namespace"}
function control(context) {
SalesforceInteractions.cashDom("SELECTOR").attr({
"data-evg-campaign-id": context.campaign,
"data-evg-experience-id": context.experience,
"data-evg-user-group": context.userGroup,
});
}
```
```sfdocs-code {"lang":"javascript", "title": "Evergage Namespace"}
function control(context) {
Evergage.cashDom("SELECTOR").attr({
"data-evg-campaign-id": context.campaign,
"data-evg-experience-id": context.experience,
"data-evg-user-group": context.userGroup,
});
}
```
If you're using a DisplayUtil such as `pageElementLoaded` in the template's `apply` function, then it is also *strongly suggested* that you use it similarly in the `control` function to ensure that campaign stats are being tracked the same way.
```sfdocs-code {"lang":"javascript", "title": "SalesforceInteractions Namespace"}
function control(context) {
const contentZoneSelector = SalesforceInteractions.mcis.getContentZone(context.contentZone);
return SalesforceInteractions.DisplayUtils.bind(`${context.campaign}:${context.experience}`)
.pageElementLoaded(contentZoneSelector)
.then((element) => {
SalesforceInteractions.cashDom("SELECTOR").attr({
"data-evg-campaign-id": context.campaign,
"data-evg-experience-id": context.experience,
"data-evg-user-group": context.userGroup,
});
});
}
```
```sfdocs-code {"lang":"javascript", "title": "Evergage Namespace"}
function control(context) {
const contentZoneSelector = Evergage.getContentZone(context.contentZone);
return Evergage.DisplayUtils.bind(`${context.campaign}:${context.experience}`)
.pageElementLoaded(contentZoneSelector)
.then((element) => {
Evergage.cashDom("SELECTOR").attr({
"data-evg-campaign-id": context.campaign,
"data-evg-experience-id": context.experience,
"data-evg-user-group": context.userGroup,
});
});
}
```
## Sending Campaign Stats without the Campaign Stats Gear
`SalesforceInteractions.mcis.sendStat` and `Evergage.sendStat` accept a `CampaignStatEvent`.
### CampaignStatEvent
```typescript
{
campaignStats: CampaignStat[];
}
```
### CampaignStat
```typescript
{
experienceId: string,
stat: 'Impression' | 'Clickthrough' | 'Dismissal',
control: boolean,
catalog: { [itemTypeKey: string]: string[] }
}
```
The following code samples depict how you can use `SalesforceInteractions.mcis.sendStat` or `Evergage.sendStat` to send a `CampaignStatEvent` event with recommended items.
```sfdocs-code {"lang":"javascript", "title": "SalesforceInteractions Namespace"}
const stat = {
experienceId: "def34",
stat: "Impression",
control: false,
catalog: {
Product: ["product1", "product2"],
},
};
SalesforceInteractions.mcis.sendStat({ campaignStats: [stat] });
```
```sfdocs-code {"lang":"javascript", "title": "Evergage Namespace"}
const stat = {
experienceId: "def34",
stat: "Impression",
control: false,
catalog: {
Product: ["product1", "product2"],
},
};
Evergage.sendStat({ campaignStats: [stat] });
```