Sort Guided Landing Page Template Variables

[Thorsten]

Hey everyone,

does anyone know if there is a clever way of reliably sorting the variables in a Guided Landing Page Template, for easier usage for the users building the pages in the guided editor?

Kind regards,

Thorsten

[Edward_Rumsey]

Hi Thorsten,

The guided landing page variables work from top-down, in order they are declared in the HTML. So, you would collect like-variables together in the template editor and put the highest priority ones at the top. Collecting them by type is normally best practice (all text together, all images together etc.) but you can also do it by which module they're associated to.

In terms of organisation for the user, you could always set up fake variables that are purely there to describe the collection of variables underneath them. For example, have a variable that says 'underneath is all to do with the header' etc.

Otherwise, there's no other nifty way I can think of I'm afraid! Hope that helps.

[Thorsten]

Hi Edward,

well, I wish it was strictly top to bottom, but Marketo adds its own flavor of "by type" and a what looks like a factor of randomness as well. That's my issue. It kind of starts top down, but then does all colors and booleans together - which messes up any proper logical sorting...

Kind regards,

Thorsten

[Dave_Roberts · Accepted solution]

I wish there were an easy way to go about this. Once upon a time I saw something that was scripted to actually reorder the elements in the GUI but I wouldn't recommend that approach b/c it's heavy loading and unreliable. It would be super awesome if something like this were an option though, but I'm always hopeful that Marketo will bring their LP editor up-to-speed with the EM editor where you can do things like this in the modules (organize the order of the variables that appear regardless of type). 

Here's a few things I try to think about to do as much organization as possible and keep things user-friendly:
1) Label the controls by section in the order they appear (top to bottom) in the LP. For example:

[HEAD] Background Color

[HERO] Background Color

[HERO] Padding

2) Consider NOT using the mktoColor and instead using the mktoString variable for colors. This will allow the color variable to be sorted among the other string variables and keep thing a bit more organized from section-to-section.

3) Standardize your controls and naming convention. You'll notice in the first bullet above that the section name always comes first. I'll also try to use the same words for the rest of the controls and not have too many unique controls -- repetition usually make the user experience a bit more digestible. 

4) Use HTML special characters in the names to help with identifying the "use" of the control -- for example:
↔ [HERO] Padding L/R
 ↕  [HERO] Padding Top/Bot

I've also seen the arrows used to denote that the controls are kinda "nested" under another control that's labeled for the section, something like this: 

[HERO] BgColor           | [________]

↪ Padding L/R             | [________]

↪ Padding Top/Bot     | [________]

5) Use boolean variables for mostly ON/OFF options (show/hide). This makes it a bit easier to understand that the toggles usually do one thing and the strings do the rest. 

[Thorsten]

Thanks Dave, these are all great tips! I'm doing a lot of this already, but will try some of the additional ideas for sure! Thank you!