Global Variable CTA not rendering in Gmail

[rmoravick]

Hello there, 

I am creating an email template that has a few global variables including one for color ${ButtonColor} of my CTA button. In preview, my CTA looks how it is intended. When I send a test to GMAIL, the CTA does not render properly. Ive attached the code as well as screen shots of intended vs actual views of the CTA. Any help would be appreciated. Thanks!

 

 

    <meta class="mktoList" id="ButtonColor" mktoname="Button Color" default="/*JHBlue-Button*/ border-color:#0000C1; background-color:#0000C1; color:#0000C1; text-decoration:none;" values="/*JHBlue-Button*/ border-color:#0000C1; background-color:#0000C1; color:##0000C1; text-decoration:none;, /*Dark-Blue-Button*/ border-color:#000060; background-color:#000060; color:#000060; text-decoration:none;, /*Green-Button*/ border-color:#00A758; background-color:#00A758; color:#00A758; text-decoration:none;, /*Coral-Button*/ border-color:#EC6453; background-color:#EC6453; color:#ffffff; text-decoration:none;" mktomodulescope="false" /> 

<td width="100%" class="inner-full-width" border="0" style="display:${ShowButton};-webkit-text-size-adjust: none; ${AlignButton};"> 
<table role="link wrapper" class="container-table" style="border-collapse: collapse;"> 
<tbody> 
<tr> 
<td class="mktoText full-width-btn-mobile" id="button-linkf70f5b98-9d62-4762-ad0d-5b98c0edf6dd" mktoname="button-link-module2" align="center" bgcolor="${ButtonColor}" style="-webkit-text-size-adjust: none; font-family:Arial;font-size:16px;color:#020202;padding:16px 24px;display: inline-block;background-color: ${ButtonColor};">
<div style="display: inline-block; -webkit-text-size-adjust: none; ${ButtonColor};"> 
<a href="${ButtonURL}" target="_blank" title="main call to action" style="text-decoration: none; -webkit-text-size-adjust: none; margin: 0; font-size: 16px; font-family: 'Manulife JH Sans',Arial; font-weight: bold; background-color: ${ButtonColor}; color: #ffffff; text-decoration: none; display: inline-block;">${ButtonLabel}</a> 
</div></td> 
</tr> 
</tbody> 
</table> </td>

[TyrellC]

Hey @rmoravick! 

The reason you are seeing the button rendering issue, is actually the way the global variable value is being applied to the button.

With the way your global variable is set up, it should not be placed in a single property such as: 

background-color: ${ButtonColor};
 // or
bgcolor="${ButtonColor}"

The reason being is because the value is not just a single button color, it's a series of styles:
 eg.

/*JHBlue-Button*/ border-color:#0000C1; background-color:#0000C1; color:##0000C1; text-decoration:none;

In regards to the styling on that variable - choosing the same color for border-color, background-color, and color, will result in the button looking something like this:

As you can see, everything is the same color including text, so we'll want to remove the color property in the global variable since you already have this styling applied directly to the button:

color: #ffffff;

You seem to have a different color defined in the <td> and the <a> tag, so let's keep it consistent and updated the <td> color to white as well.

Since the Border Color is also doing nothing because there is no border defined on the button, you can simply change your ButtonColor meta tag to this: 

<meta class="mktoList" id="ButtonColor" mktoname="Button Color"
    default="/*JHBlue*/#0000C1"
    values="/*JHBlue*/#0000C1,/*Dark-Blue-Button*/#000060,/*Green-Button*/#00A758,/*Coral-Button*/#EC6453"
    mktomodulescope="false" />

We are able to keep the comments eg. /*JHBlue*/ when we implement it this way. 

Lastly, for all the static stylings in the meta tag - I moved them directly onto your button.
This is how we implement it on your button code:

<td width="100%" class="inner-full-width" border="0"
  style="display:${ShowButton};-webkit-text-size-adjust: none; ${AlignButton};">
  <table role="link wrapper" class="container-table" style="border-collapse: collapse;">
    <tbody>
      <tr>
        <td class="mktoText full-width-btn-mobile" id="button-linkf70f5b98-9d62-4762-ad0d-5b98c0edf6dd"
          mktoname="button-link-module2" align="center"
          style="-webkit-text-size-adjust: none; font-family:Arial;font-size:16px;color:#ffffff;padding:16px 24px;display: inline-block; background-color:${ButtonColor};">
          <div style="display: inline-block; -webkit-text-size-adjust: none;">
            <a href="${ButtonURL}" target="_blank" title="main call to action"
              style="text-decoration: none; -webkit-text-size-adjust: none; margin: 0; font-size: 16px; font-family: 'Manulife JH Sans',Arial; font-weight: bold; color: #ffffff; display: inline-block;">${ButtonLabel}</a>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</td>

Please give that a try and let me know how that works for you! I double checked your button in Email on Acid and you should have support across all email clients and devices. 

Have a great day,

Tyrell 

[Jo_Pitts1]

@TyrellC,

Your approach might be technically right, but misses the point of what I originally documented with this trick (I say documented, not invented as it is possible that someone else was doing this before me but never published it here). 

The point of this approach to have drop down lists have human readable names (the comment) and one or more style attributes associated with it. https://nation.marketo.com/t5/product-discussions/drop-down-titles-within-email-template-variables/t...).  It's at the bottom of page 1.

What if @rmoravick actually wants ALL the values to be set.

@rmoravick, to expand, rather than putting your token into the color tag or bgcolor tag, put it into the style tag.  e.g.  You don't need to use the individual html tags at all, and you don't need to prefix the use of the ${ButtonColor} variable with a style in the style tag, as the entire style is contained in the Marketo variable.

<div style="${ButtonColor} otherstyles:gohere;">
  <p>Some Text in here</p>
</div>

would render to (based on selecting JHBlue-Button from your example)

<div style="/*JHBlue-Button*/ border-color:#0000C1; background-color:#0000C1; color:#0000C1; text-decoration:none; otherstyles:gohere;">
  <p>Some Text in here</p>
</div>

BTW - I noticed you had text-decoration:none; in every option.  That's fine if you see a future where one of your buttons might need a different value for text-decoration.  If not, for clarity, remove it from the variable and just put it in the style tag directly like so:

<div style="${ButtonColor} text-decoration:none; otherstyles:gohere;">
  <p>Some Text in here</p>
</div>

Cheers

Jo

[Jasbir_Kaur]

Hi @rmoravick,

I agree with the Jo, instead of writing all these styles in a single meta tag, put it in the style of the CTA and create separate meta tags for the color, background color, border-color, etc...

[Eric_Vaillancou]

Hi rmoravick,

If I convert your variable into real values when I read your definition, it end-up like this:

Attribute (it should be only a color code):
bgcolor="/*JHBlue-Button*/ border-color:#0000C1; background-color:#0000C1; color:#0000C1; text-decoration:none;"

Inline CSS for the TD (Syntax error):
style="-webkit-text-size-adjust: none; font-family:Arial; font-size:16px; color:#020202; padding:16px 24px; display: inline-block; background-color:/*JHBlue-Button*/ border-color:#0000C1; background-color:#0000C1; color:#0000C1; text-decoration:none;;"

Inline CSS for the A:

 style="text-decoration: none; -webkit-text-size-adjust: none; margin: 0; font-size: 16px; font-family: 'Manulife JH Sans',Arial; font-weight: bold; background-color:/*JHBlue-Button*/ border-color:#0000C1; background-color:#0000C1; color:#0000C1; text-decoration:none; color: #ffffff; text-decoration: none; display: inline-block;"

As Tyrel said, an attribute should have one value only; in the case of bgcolor, it will be only a color code. As for the inline CSS, you can use a list like this, but you will need to put it outside of the background-color property.

Example:
style="-webkit-text-size-adjust: none; font-family:Arial; font-size:16px; color:#020202; padding:16px 24px; display: inline-block; ${ButtonColor}"

Idealy on the TD, many styles on the A tag are not supported.

The other thing you need to know is that as soon you have a syntax error in the CSS, Gmail stops reading the rest; it's the reason why you don't see it correctly in Gmail. 

Hope it helps!

[Jo_Pitts1]

@Eric_Vaillancou,

sorry to dive in here, but you need to read my reply.  

This is muddying the waters quite significantly.

Regards

Jo