Email Booleans - How do you implement them?

[Geoff_Krajeski1]

Anyone know how a boolean in email works or have an example, as in to toggle images/areas on & off?

Can you help with how they work? 

If I'm toggling an element in page shouldn't there be some correlating name/id?

The documentation is not 100% there on how you would actually do this.

http://docs.marketo.com/display/public/DOCS/Email+Template+Syntax

[Éric_Vaillancou]

We discover a great way to hide or show an element with boolean switches. You should use that only when it's not possible to use the "Delete" module functionality. It is true that using a switch to hide an element will leave the code in the email your contacts will receive. It is also accurate there is a good chance if the email is forwarded the result won't be what you expect, you need to use it sparingly. Utilize it for example to hide an element in a multi-column layout.

This is an example to hide a button; the switches syntax needs to be like this:

<meta class="mktoBoolean" id="ShowBtn" mktoName="Button" default="true" false_value="display:none; max-height:0px; height:0px; max-width:0px; opacity:0; overflow:hidden;" true_value="cursor:auto;" false_value_name="Off" true_value_name="On" mktoModuleScope="true" />‍

The idea of using "cursor:auto;" is to use some CSS that won't enter in conflict with your existing one. 

For the false value, "display:none" will work in every email client except Lotus and Outlook. The rest of the CSS will work in every version of Lotus and Outlook, but you need to add the variable on EVERY tag of the element you want to hide. Add the variable to every HTML tag, and at the very end of existing inline CSS.

Example:

<tr style="${ShowBtn}">
    <td class="w25" align="${BtnAlignRight01}" valign="top" style="padding-right:40px; ${ShowBtn}">
        <table class="button" cellpadding="0" cellspacing="0" border="0" align="${BtnAlignRight01}" style="${ShowBtn}">
            <tr style="${ShowBtn}">
                <td bgcolor="${BtnColor}" class="button" align="center" valign="middle" style="border:${BtnBorderSize}px solid ${BtnBorderColor}; -webkit-border-radius:${BtnRadius}px; -moz-border-radius:${BtnRadius}px; border-radius:${BtnRadius}px; padding-right:${BtnSideSpace}px; padding-left:${BtnSideSpace}px; padding-top:${BtnTopSpace}px; padding-bottom:${BtnBotSpace}px; font-family:${CustomFontFamily}; font-size:${BtnFontSize}px; line-height:${BtnLineHeight}px; color:${BtnLabelColor}; display:block; mso-line-height-rule:exactly; font-weight:${BtnFontWeight}; text-decoration:none; text-align:center; ${ShowBtn}">
                    <a href="${BtnLink}" style="color:${BtnLabelColor}; text-decoration:none; ${ShowBtn}">
                        <span style="color:${BtnLabelColor}; text-decoration:none; ${ShowBtn}">${BtnLabel}</span>
                    </a>
                </td>
            </tr>
        </table>
    </td>
</tr>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Let me know if it helps,

Eric

[SanfordWhiteman]

Can you highlight your code using the Syntax Highlighter so it's more readable? Choose XML/HTML from the dropdown.

[Paul_Hughes]

I haven't seen this solution on the community page, but I use HTML comment tags to toggle large sections of code on / off with Email 2.0's boolean functionality:

At the top, I declare:

<meta class="mktoBoolean" id="showSection" mktoName="Show Section?" default="true" true_value="-->" false_value="" true_value_name="YES" false_value_name="NO" mktoModuleScope="true">

Then, I place comments around the section I want to toggle on/off:

<!-- Section Conditional Trigger ${showSection}

     [As much code as you want]

<!-- End Conditional -->

When the "Show Section" boolean is set to "true", the top conditional is closed, and the code is shown as normal. When the boolean is false, the top comment is left open. This causes the client to comment everything in the code out until the bottom comment, whose closing bracket prevents the entire rest of the document from being commented out. Comments are universally supported, so this doesn't run into any client issues (unlike trying to use display). And, since hidden images are commented out, the user's email client won't try to load it.

I have found this to work reasonably well, and other variables can be placed within the commented section.

[Remy_Frank1]

We really liked this idea, but some email clients/servers break (or don't honor) this boolean logic. We used boolean to toggle a CTA button on/off - but if someone forwarded that email, the CTA button randomly appeared on the forwarded email... 😕

We've experimented with adding a Marketo tag to alleviate the issue, but ultimately may go back to the idea of creating two hero modules - 1 with a CTA button, and 1 without a CTA button.

[SanfordWhiteman]

but some email clients/servers break (or don't honor) this boolean logic.

Clients, surely.

I assume the reason that forwarding breaks Paul's method is that, cool as it is (and it is) it technically breaks the HTML standard for comments and those clients "catch on" when they reparse the HTML for forwarding. (If you read the standard, the open-comment string "<!--" is not actually allowed within an already-open comment, but browsers/clients can choose at times to be more forgiving.)

If you can use the Velocity technique I mention here, the result is standards-compliant: Dynamically Showing Module in Email Based on Segment

[Grace_Brebner3]

This is a clever idea...

[Anonymous]

Hey! I really like this HTML comment idea.

It works great at hiding/showing but the only issue is that content wrapped in mktEditable are no longer editable.

Does anyone have an idea why this might be?

[Paul_Hughes]

I ran into this myself. As far as I can tell, mktEditable divs cannot be shown / hidden with this method. I've worked around this by adding / removing modules (each with only one mktEditable div), rather than trying to use booleans within a module.

When trying to hide one, I have sometimes simply left a mktEditable blank by deleting all of the content within it. The Litmus tests I ran indicated that this didn't cause weird spacing problems. I definitely recommend testing this if you try it though. When it comes to email, you can never be too sure.

[Grégoire_Miche2]

Smart one. I like it!

-Greg

[Grégoire_Miche2]

Hi Geoffrey,

No much time to paste some code not, but usually, the boolean variable will in fact get the values "none" or "block" or whatever CSS value that makes sense.

Then in your code, you will have something in your code under the form of

<img style="display:${myBooleanVariable}">

BtW, hiding elements using booleans is acceptable in landing pages but not really recommended in emails. Because 1/ some email clients will not correctly interpret the CSS above and 2/ the image has to load even if it does not display, which is not good for deliverability or performance. It's much better to use modules instead, because these really add or remove the code for the email.

-Greg

[Geoff_Krajeski1]

What would be a better method to allow someone to turn a block "on" or "off" in a kind of master template in your opinion?

Is there another way to do this?

[Grégoire_Miche2]

Hi Geoffrey,

The method proposed by Marketo is the module one (mktoModule). And it is pretty efficient. It enables to really add / remove / clone and move email blocks. If you need to remove a small sub-item, as you want the email code to remain as clean as possible, the best method is to create 2 modules in the email template: one with the email, another without. and the user chooses which one he prefers.

-Greg