Solved

Replacing document.write() in content blocks

Forum|Forum|1 year ago
March 7, 2024
1 reply
1830 views

At our company, some mailings use content blocks with document.write calls to personalize salutations, like

<% if( context.profile.salutation != "" && context.profile.lastName != "") { %>
<span>Hi </span><% document.write(context.profile.firstName);
%> <% document.write(context.profile.lastName);
%><span>,</span>
<%} else if (context.profile.firstName != "") {%>
<span>Hi </span><%
document.write(context.profile.firstName);
%><span>,</span>
<%} else {%>
<span>Hallo,</span>
<%}%>

The big benefit of these content blocks is that not only do they seem to work fine across Campaign mailings, Campaign landing pages and AEM newsletters in Campaign, they're also fairly easy to use for staff that isn't all that tech savvy and would presumably throw hissy fits if they had to work with dynamic content in Campaign Standard.

However, given that the use of document.write() is widely discouraged, I'm trying to figure out a viable alternative for doing this personalization via content blocks. Unfortunately, beyond an idea using innerhtml that didn't pan out, I haven't been able to come up with anything.

Would anyone here happen to have any ideas/recommendations?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by SatheeskannaK

@tp_av , It's not necesssary to use document.write() to print the personalization values. Rather you can call the personalization context variable in the content block and use that in the template to display. Sharing an example here.

<%

var total = 0;

for (var i = 0; i < context.rtEvent.ctx.products.length; i++) {

%>

<tbody class="mcnCaptionBlockOuter">

<tr>

<td class="mcnCaptionBlockInner" valign="top" style="padding: 9px; mso-line-height-rule: exactly; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">

<tbody>

<tr>

<td valign="top" class="mcnCaptionRightContentInner" style="padding: 0 9px; mso-line-height-rule: exactly; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">

<tbody>

<tr>

<td class="mcnCaptionRightImageContent" valign="top" style="mso-line-height-rule: exactly; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;"><img alt="<%= context.rtEvent.ctx.products[i].name %>" src="<%= context.rtEvent.ctx.products[i].image %>" width="169" style="max-width: 169px; border: 0; height: auto; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; vertical-align: bottom;" class="mcnImage" /></td>

</tr>

</tbody>

</table>

<tbody>

<tr>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

<%

total += parseFloat(context.rtEvent.ctx.products[i].price);

}

%>

<tbody class="mcnTextBlockOuter">

<tr>

<td valign="top" class="mcnTextBlockInner" style="padding-top: 9px; mso-line-height-rule: exactly; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;"><!--[if mso]>

<table align="left" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100%;">

<tr>

<![endif]--> <!--[if mso]>

<td valign="top" width="600" style="width:600px;">

<![endif]-->

<tbody>

<tr>

<div style="text-align: right;"><strong>TOTAL: $<%= total %></strong></div>

</td>

</tr>

</tbody>

</table>

<!--[if mso]>

</td>

<![endif]--> <!--[if mso]>

</tr>

</table>

<![endif]--></td>

</tr>

</tbody>

</table>

SatheeskannaK

Accepted solution

Community Advisor

@tp_av , It's not necesssary to use document.write() to print the personalization values. Rather you can call the personalization context variable in the content block and use that in the template to display. Sharing an example here.

<%

var total = 0;

for (var i = 0; i < context.rtEvent.ctx.products.length; i++) {

%>

<tbody class="mcnCaptionBlockOuter">

<tr>

<td class="mcnCaptionBlockInner" valign="top" style="padding: 9px; mso-line-height-rule: exactly; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">

<tbody>

<tr>

<td valign="top" class="mcnCaptionRightContentInner" style="padding: 0 9px; mso-line-height-rule: exactly; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">

<tbody>

<tr>

<td class="mcnCaptionRightImageContent" valign="top" style="mso-line-height-rule: exactly; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;"><img alt="<%= context.rtEvent.ctx.products[i].name %>" src="<%= context.rtEvent.ctx.products[i].image %>" width="169" style="max-width: 169px; border: 0; height: auto; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; vertical-align: bottom;" class="mcnImage" /></td>

</tr>

</tbody>

</table>

<tbody>

<tr>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

<%

total += parseFloat(context.rtEvent.ctx.products[i].price);

}

%>

<tbody class="mcnTextBlockOuter">

<tr>

<td valign="top" class="mcnTextBlockInner" style="padding-top: 9px; mso-line-height-rule: exactly; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;"><!--[if mso]>

<table align="left" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100%;">

<tr>

<![endif]--> <!--[if mso]>

<td valign="top" width="600" style="width:600px;">

<![endif]-->

<tbody>

<tr>

<div style="text-align: right;"><strong>TOTAL: $<%= total %></strong></div>

</td>

</tr>

</tbody>

</table>

<!--[if mso]>

</td>

<![endif]--> <!--[if mso]>

</tr>

</table>

<![endif]--></td>

</tr>

</tbody>

</table>

Thanks, Sathees

T

TP_AVAuthor

So basically just replace all instances of

<% document.write(context.whatever.variable); %>

with

<%= context.whatever.variable %>

EDIT: After more extensive testing, seems to work perfectly for a block shared across Campaign mailings, Campaign landing pages and AEM newsletters.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded