Landing Page CTA Label Global Variable not appearing

[rmoravick1]

Hey everyone,

I was hoping to get some help on a global variable issue I'm seeing in my guided LP template. Ive created a global variable for my button label. The default text for the label appears in the variables editor in the LP, however, the button is showing the global variable code instead of the text. Any suggestions on how to resolve this?

 

 

  <meta class="mktoString" id="ButtonLabel" mktoname="Button Label" default="&iexcl;Empiece a explorar hoy!" mktomodulescope="false" /> 

 <div><a href="${ButtonURL}"><button type="button" name="myButton">${ButtonLabel}</button></a></div>

[Dave_Roberts]

Here's a few additional suggestions:

• You do not need the mktoModuleScope attribute on your variable - that's an email thing. 
• You might want to choose to use an anchor tag OR a button tag for your button rather than nesting a button inside of an anchor tag. I'd recommend going with the <a> tag (b/c it's editable in using the Rich Text Editor) and adding a class to it for styling... something more like:
  HTML
  

  <div><a href="${ButtonURL}" class="button">${ButtonLabel}</a></div>​

  CSS
  

  /* default button state */
  .button {
     padding: 5px 15px;
     background-color: transparent;
     color: #000;
     border: 1px solid #BBB;
     border-radius: 6px;
  }
  /* active button states (hover, active and focus) */
  .button:hover, .button:active, .button:focus {
     background-color: #BBB;
     color: #fff;
  }

[rmoravick1]

Hey Dave,

Thank you for those suggestions! Ive tried using both an anchor tag and a button tag for the section but I am still seeing the same issue.

 

[Dave_Roberts · Accepted solution]

Thanks for following up and giving the button switch a try. I've read thru some of the other suggestions here and would have thought that one of those should have solved the problem. 

I did some add'l testing this morning and setup a Guided LP template with some variables to match your situation. What I discovered is that when the variables are contained inside an editable text area that they don't work, but when they are not inside an editable area, they do work. 

Here's a few images for reference of the testing setup:

(above) There are two buttons here (same button) -- one is included inside an editable area, the other is outside the editable area

(above) The highlight parts are inside an editable area (and do not work) and the bottom button is outside the editable area (and does work).

Is there a chance that you're using the variables inside an editable area on the template?

If so, I think that could cause the issue you're running into here. If that's the case, you really don't need the variable there b/c you can use the Rich Text Editor to go in and change the URL and Text of the button. If you use the <button> element, it'll be harder to edit the buttons using the RTE but if you use the <a> element, you can use the Insert/Edit Link tool on the RTE toolbar to easily edit the button text and link. I'd recommend using the <a> tag over the <button> tag in this situation.

[rmoravick1]

Hey Dave,

I think you are right about this! Not only is the ButtonLabel variable in an editable text area, but the ImageURL and ButtonURL variables are also in an editable text area, which was also giving me some errors with testing. To your point, I think using the <a> element and using the Insert/Edit link tool will be best here. Thank you again for your help troubleshooting this!

[Dave_Roberts]

No problem, glad I was able to help. When you've got a minute would you mind marking that answer as correct b/c there's a bunch of other ideas in this thread and that'll help anyone else in the future who runs across an issue like this to find a solution more easily. Thanks again for working thru all the ideas here and providing feedback along the way, it really helps to build the overall knowledge base.

[rmoravick1]

Will do! Thanks again for helping me work through this!

[SanfordWhiteman]

What is that a screenshot of? A real email sent to someone?

[rmoravick1]

Hey Sanford,

The screenshot is of the main CTA on the LP. The global variable in the LP editor with the default text is the other screenshot. The CTA is displaying the global variable code rather than the editable default text.

[SanfordWhiteman]

What I meant was: is that a ’shot of the LP Editor or of the Preview page?

[rmoravick1]

Hey Sanford,

Sorry for the confusion, its a screenshot from the LP Preview page

[SanfordWhiteman]

Take out mktomodulescope.

[rmoravick1]

Hey Sanford, 

I took out the mktomodulescope from the global variable but I am still seeing the same issue. Additionally, the preview between the LP template in the Design Studio (showing correctly) and the draft LP in Marketing Activities (showing incorrectly) are different. See screenshots below:

 

 

[Jasbir_Kaur]

Hi @rmoravick1,

Please approve the LP and check again.

[Disha_Goyal6]

Hi @rmoravick1,

Please share the screenshot of the code that is appearing at the LP level. If it is working at template level then might be there is some issue at LP level.

Thanks,

Disha

[rmoravick1]

Hi Disha,

Here is the source code at the LP level:

<div>&iexcl;Hola!</div>
<div><br /></div>
<div>Ahora que est&aacute; un a&ntilde;o m&aacute;s cerca de la jubilaci&oacute;n, es posible que se pregunte c&oacute;mo hacerle para vivir bien ahora y ahorrar lo suficiente para su futuro. Para ayudarle a responder esa pregunta y a lograr el equilibrio en la jubilaci&oacute;n, le ofrecemos acceso exclusivo a nuestros recursos educativos y de planificaci&oacute;n adicionales.</div>
<div><br /></div>
<div>Estas nuevas herramientas y recursos incluyen:</div>
<div>
<ul>
<li>Orientaci&oacute;n sobre los gastos durante la jubilaci&oacute;n para asegurarse de cubrir todos los aspectos</li>
<li>Consejos para maximizar sus beneficios del Seguro Social y Medicare</li>
<li>Art&iacute;culos, videos y hojas de trabajo para ayudarle a tomar el control de su planificaci&oacute;n</li>
</ul>
</div>
<div><br /></div>
<div>Considere tambi&eacute;n el plan de contribuci&oacute;n adicional 50+ catch-up contribution, que le permite ahorrar m&aacute;s a trav&eacute;s de su plan de jubilaci&oacute;n cada a&ntilde;o</div>
<div><br /></div>
<div><button type="button" name="myButton" href="${ButtonURL}">${ButtonLabel}</button></div>

[Jo_Pitts1]

@rmoravick1 ,

${ButtonLabel} != ${BUTTONLABEL}

Try using the same case as your ID in the CTA

Cheers

Jo

[rmoravick1]

Hey Jo,

Thanks for the suggestion! Unfortunately, all that did was make the button label the same case, and the global variable code is still visible in the button. See screenshot below: