Editing Marketo Guided Landing Page Templates, Pt. 2 - Variables:

No ratings

So you’ve now used the previous document (Getting Started With Guided Landing Pages:) to download a template from our library and set it up in your Marketo instance, you have even used it to make a landing page or two and you’ve customized those landing pages, AND you’ve even gone the extra mile and customized your template and modified some elements! (Editing Marketo Guided Landing Page Templates, Pt. 1 - Elements:) All of which is fantastic news! Good job!

But if you recall from the article that showed you how to edit Elements on the template, I skipped right over the section on Variables.

VAR-01.png

This is the piece that this document is designed to tackle.

So what is a variable? If you edit a Guided Landing Page you will see a panel on the right hand side that displays both Elements and Variables. In this instance, the variables do everything from assigning a gradient color, to deciding if you want to display or hide different sections of the landing page.

VAR-02.png

Modifying a variable in the landing page editor is designed to be really simple, just click the variable you want to change and give it a new value. Here I changed the Primary Gradient 1 and 2 from 1DA083 and 0F3450 to A00E35 and F2F2F2 respectively and the landing page changes:

VAR-03.png

At its easiest to understand, a variable works a lot like a token in an email. It’s a placeholder for actual code to be used later. So if I create an email that starts with “Hello, {{lead.firstname:default=Friend}}!” you can tell right away what that’s going to do. Pull the first name from the lead record, if none exists use the word “Friend”.

Think of a Variable as a token that you get to define as well as use. The first step is to define it and the second step is to actually call back to the variable you defined.

While it’s easy for a non-technical user to use a variable (as it should be!), setting one up in the template does require a fair amount of HTML knowledge. As stated before, if you are not comfortable editing HTML and do not have a resource available to you, please reach out to services@marketo.com, they are able to assist with any sort of coding needs.

So as before, let’s dive into the template, this time we’re going straight for the Variable code.

    <!-- Marketo Variable Definitions -->

    <meta class="mktoColor" id="gradient1" mktoName="Primary Gradient 1" default="#1da083">

    <meta class="mktoColor" id="gradient2" mktoName="Primary Gradient 2" default="#0f3450">

So right at the start of the template, we’re off to the races defining variables. As you can see with the Gradient 1 and Gradient 2, these are both marked with a class of “mktoColor”.

As with the Elements, the full list of Variable types can be found here:

https://docs.marketo.com/display/public/DOCS/Create+a+Guided+Landing+Page+Template

     class : "mktoString"
     class : "mktoColor"
     class : "mktoBoolean"

A string is a variable that contains a value, Color should be obvious what that does and Boolean is a yes or no choice.

In addition to the class, each variable has to have a unique ID. This is critical and used when the variable is called later on down the page. When you call a variable it’s always with the syntax of ${id name}. So in this case ${gradient1} and ${gradient2}. As you can see it looks a LOT like a token but it’s a token you can name whatever you want.

The mktoName is how it displays the variable in the Landing Page editor.

The default value is what it starts out with.

So let’s take a look and see how these Gradients are applied now that they’re defined at the top of the template.

Color is typically used in the CSS portion of the header. As defined in the previous document, CSS stands for “Cascading Style Sheets” and is a way of formatting the same thing over and over again, kind of like setting a font in a word processor.

    /* Header Gradient */

    #is {

        top: 0;

        width: 100%;

        min-height: 620px;

        position: relative;

        z-index: 1;

        color: #fff;

padding-top: 10%;

                background-image: linear-gradient(${gradient1},${gradient2});

    }

Now normally in CSS, the linear-gradient option would have two colors listed, the top color and the bottom color and it provides a gradual transition from one to the other.

We could just as easily change this in the template to

     background-image: linear-gradient(red,white);

But the problem doing that is that an end user, who is only using the Landing Page Editor, would not be able to change it. The gradient would be defined in the template and inaccessible to the Editor.

Changing these values to the variables defined before allows the user to change the first and second colors in the Landing Page editor interface.

In Summary:

The Meta Tags define what the variables mean:

    <meta class="mktoColor" id="gradient1" mktoName="Primary Gradient 1" default="#1da083">

    <meta class="mktoColor" id="gradient2" mktoName="Primary Gradient 2" default="#0f3450">

The ID= is then used to call the variable and put it into action:

      background-image: linear-gradient(${gradient1},${gradient2});

The other benefit to doing it this way is you can re-use the same variable over and over again. Look at this piece of CSS:

body {

                background: ${gradient2};

        margin: 0;

        color: #696E74;

    }

That’s the same ID as the gradient we used before, only applied to a different section. This ensures that the bottom color of the gradient and the background of this section will always be the same color.

Any item in the CSS that contains a text value, a color value or a yes/no choice can be converted to a Variable.

Here’s another common usage:

You’re using a form on your landing page, but you want the end user to be able to change the text on the submit button.

As before you define the variable:

     <meta class="mktoString" id="section4ButtonLabel" mktoName="Sec. 4 Button Label" default="More Questions?">

Then farther down the page where the button appears you call the variable you defined before:

     <div class="centered mtb">

          <a href="${section4ButtonLink}"><button class="btn btn-lg btn-green mt">

          ${section4ButtonLabel}</button></a>

     </div>

The <a href= is pulling a http link that the user can define in the editor, the button class is setting up a green button as defined in the CSS, and there is our Variable to display the label which reads “More Questions?” Here’s what it looks like in the editor:

VAR-04.png

So this is great, and it makes sense because you can see this was all set up and defined by a professional. What if you wanted to add your own? Is that even possible?

Naturally it is!

First, figure out what you want to convert to a Variable. Is it a piece of text like a button name or a link? Is it a color? Is it a yes/no choice?

Let’s say we want to add a variable that controls the color of the buttons. We have two, both using the same color green, and we want whoever is running the landing page editor to change that without having to go to the template:

Step 1: Define your variable:

     <meta class="mktoColor" id="ButtonColor" mktoName="Button Color" default="#1DA083">

We’re talking about colors so the class will be “mktoColor”. The ID can be anything we want it to be as can be the mktoName. The default is the same lovely green shade as was used before.

Now we need to call this color.  Looking at the CSS, we can see the .btn-green is defined as this:

     .btn-green {

          border: 4px solid #1da083;

          border-radius: 60px;

          color: #fff;

          background: #1da083;

          -webkit-transition: none;

          -moz-transition: none;

          transition: none;

     }

The background is the color we want to change to a Variable so it can be edited without having to access the template.

Change the code to this:

     .btn-green {

          border: 4px solid #1da083;

          border-radius: 60px;

          color: #fff;

          background: ${ButtonColor};

          -webkit-transition: none;

          -moz-transition: none;

          transition: none;

     }

Approve the template and check out the landing page in the editor:

VAR-05.png

VAR-06.png

Well that’s fantastic, but there’s a separate color for the border, we could just as easily add a variable for it as well:

     border: 4px solid #1da083;

We don’t want to HAVE to add another new variable for just the border. We could change the border at the same time as the button. By changing #1da083; to ${ButtonColor};

The trick now becomes what if you change your mind? What if you have a variable in the template that is no longer desired? How do you get rid of it?

Remember each variable is two pieces, the definition and the call. You have to remove BOTH pieces. Technically removing the call would be enough to prevent the change from being made on the page, but the definition is what makes the variable appear in the Landing Page Editor, if you only removed the call then there would be a non-functional Variable in the landing page editor.

So in the case of our button color:

Step 1 would be to strip out the meta tag containing the definition:

VAR-07.png

Step 2 would be changing the variable name where it’s being used to some fixed value:

     .btn-green {

          border: 4px solid #1da083;

          border-radius: 60px;

          color: #fff;

          background: ${ButtonColor}; -> change this to some other fixed color. #00FF33; or the original #1da083;.

          -webkit-transition: none;

          -moz-transition: none;

          transition: none;

     }

Doing both pieces will prevent the Variable from being listed in the Landing Page Editor and prevent it from having any effect on the page.

Comments

Jordan, this is a great tutorial.

I noticed that while the doctype declaration is valid, Marketo will not let me save it with that, it is asking for the older doctype spelled out.

Anonymous

That could very well be a function of the new validation rules that have been added to the template editor. I've run into a few other "standard' things that it doesn't like either. Best advice is to go with what the editor wants. If there's an issue where it's clearly wrong, let support know and we can submit a bugfix.

The one I ran into was on the previous document, setting up a table to wrap the Elements in.

I did the usual:

<table>

<tr><td>(element here)</td><td>(element 2 here)</td></tr>

and the editor wouldn't allow that. It kept telling me that I needed to have a valid ID= on the TR and TD even though a) that's not required and b) even when I added one it still threw the error.

Changing the code to:

<table>

<tr>

<td>

(element 1)</td>

<td>

(element 2)</td>

Worked fine. Now you and I both know from a code perspective, HTML ignores whitespace and there's absolutely no reason to force that extra formatting. But the new validation rules apparently do.

Great documentation Jordan Lund​! Is there any documentation that specifically covers the Boolean Variables? I want to be able to show/hide elements on our landing pages but can only find documentation on color/string variables and elements.

Anonymous

Thanks Keith! I skirted the issue of Booleans because it is simultaneously simpler and more complicated at the same time.

Simpler in that it's just a true/false or on/off choice, but more complicated in that there's more to do to set it up.

If you look at the first screenshot up above, you can see a sample of how to set up the meta tag:

<meta class="mktoBoolean" id="showSection2" mktoName="Show Section 2?" default="true" false_value="none" true_value="block" false_value_name="Hide" true_value_name="Show">

So we've defined the tag as a Boolean, we've given it an ID of "showSection2", and a Marketo friendly name of "Show Section 2?" (this is the piece that would display on the right hand panel in the landing page editor.

The default value is true, a false value changes it from true to none, and the value names for false or true are either "Hide" or "Show".

Once the Meta tag is set up, it's a matter of applying the ID of "showSection2" to a section of the landing page.

If you download any of the Guided templates from https://docs.marketo.com/display/public/DOCS/Guided+Landing+Page+Templates (coming to this very community very soon!) and download a few of the templates you should be able to see how the meta tags are defined and how the sections are called and referenced later down the page.

(EDIT) Wow! There are 53 templates on there now as of this writing! I was excited when it went from 1 to 6!

Really helpful advice Jordan Lund! Thanks for the reply!

Anonymous

Hi Jordan Lund,

No matter if I change the code in the code in the landing page template or try to use the variables in the editor, the color of the header background will not change. I don't want the background color to be lime green but I used that random color to illustrate my point. You can see this in the attached screenshot. I also was able to change the color of the hero section with no problem. This is my first foray into creating custom guided landing pages so I might just be missing something very obvious. I would really appreciate some help with this.

Thanks,

Chris

Anonymous

Hi Jordan Lund

Sorry screenshot is attached.

Chris header.color.LP.PNG

Anonymous

I'd think this would be something Support would need to troubleshoot so they could see the landing page and all the code. Your best bet would be to open a support ticket.