ring.gif

One Template to Rule Them All

Anonymous
Not applicable

ring.gifI hate repeating work in Marketo. Yet landing page templates seem to be an area that requires a lot of repeat work. It seems natural to just build a new template when you have some new use case, channel, or brand to contend with. But the problem with this approach shows up later, when changes are needed at a global level. Suddenly you’re stuck with all sorts of versions to update. The end result is a bunch of legacy templates with outdated code, and maybe one or two templates that actually remain current.

So instead of building new templates each time some minor new change is needed, I try to think about the process backwards-identify the elements I might need to customize on my landing pages, and then build a flexible template that will let me control those changes in the future.

This approach is made more viable with the new guided landing page templates, which add an awesome new functionality called Variables. These, plus some creative applications of program/folder {{my.Tokens}}, allow you to build a template that works for nearly any situation. Here are a few ideas to try:

Branding: logo swaps, color palate changes, fonts, etc

Logo and style changes are some of the more common edits you might be making to a template. You may need different looks for an SEM page vs an event registration page, or for a parent and sub brand. At a minimum, you should wrap key brand elements like a logo within a “mktEditable” div. The magic of this class allows the content within it to be directly editable within the landing page editor.

You can get even more control with variables, for scenarios like:

  • Toggling between two main logos (boolean variable)
  • Changing the accent color used on your pages (color variable)
  • Setting the URL of an element like a banner image (string variable)

css.png

And when you need finer tuned control and the ability to overhaul CSS on the fly, program {{my.Tokens}} are what you’ll want to use. Consider putting a few placeholder tokens in <style> </style> tags in your header for any program or folder-specific CSS editing you might want to do.

Tokens are great in that you can choose whether or not you want to assign them a value, so it’s always worth adding a few to your templates should you need them later. They’re especially handy when you’re testing a new form design, or need to make broader layout changes. It’s as simple as pasting the new CSS snippet into a token, and the pages within that folder or program will instantly reflect the new code--no draft approval required.



Placement and visibility of elements


variables-screencap.pngIf you check out the
documentation on variables, you’ll see a few mentions of manipulating the visibility of elements in your page, such as making your footer shown or hidden. But you can take this idea a lot further, and build variables that allow you to display a form or secondary call to action with the flip of a switch. You can use this sort of idea in tandem with other variables that control the width of different elements (especially when using a responsive, grid-based framework like Bootstrap). This allows you to use the same template for both your landing pages with forms and form-free confirmation pages.

Scripts and tags

It’s common to see separate landing page templates when specific tracking scripts are needed, such as a confirmation page to track goal conversions in Google Analytics, or on a specific landing page used to fire a remarketing script. This can get clunky to manage across multiple templates, and a few tokens will serve you well here.

Just as with CSS tokens, you can set a few dedicated javascript tokens in your template which can be referenced as needed. Then, if you have a specific program or set of programs that you need to call a script for, just put in a value for one of your script tokens, and you’ll be set. Note: if you’re really clever, you’ll put programs that use common scripts in the same folder, such as those used for Search Engine Marketing. Then you can just set the token in one place--at the folder level, and all the programs within it will automatically inherit that value.

Better yet,  you can solve a lot of this with Google Tag Manager. It’s a wonderful tool that allows you to fire different scripts based on different scenarios: a specific page view, a click, or another event you configure there. This will probably keep your PPC manager or agency happy, because they don’t have to fuss with different landing pages to get the configuration needed.

Localization and miscellaneous meta info

 

For global brands with page localization needs, there are meta properties such as HTML language type and CSS text direction (for languages like Hebrew that read right to left). You can set these sorts of items as variables in your template too, allowing you to quickly swap between localization preferences.

There’s a few other miscellaneous use cases too:

  • Copyright year - this changes every year, so think about setting a token for it in your footer if you display one. This will save you hours of work fixing landing pages on January 1st.
  • Footer links - For social icons, privacy and T&C links, make that area a token that you can change globally. This stuff does sometimes change, and with a token it takes just seconds to update.
  • Open Graph tags - Do you ever wonder how people get their posts to display well on social networks with full sized images? Chances are they’re using open graph tags to specify post meta content. So you can place this data in your templates and set via tokens for quick updates.

If you were to implement every one of these ideas, you’d have a lot of tokens and variables to contend with. So the key word here is moderation--just because you can make everything a token or a variable doesn’t always mean you should. This is doubly important for variables, which require hard coding into the templates, so tweaking these all the time isn’t really ideal.

These ideas just scratch the surface of what some of you have already come up with--so please share any clever template ideas you’re using in the comments!

clap.gif

5172
9
9 Comments
Justin_Norris1
Level 10 - Champion Alumni

Nice one Jeff Shearer​! I really like the idea of showing and hiding page elements using boolean variables. Lots of possibilities there, e.g, no need to have a separate template for single and two-column layouts that way, or adding additional speakers to a webinar page, etc.. Integrate tokens with variables and you have a pretty powerful framework.

Bonus points for the LoTR references!

Anonymous
Not applicable

Thanks! Yeah there are endless possibilities with variables, the only issue is trying to use too many at once. But I think there's a solution for that through javascript controlling multiple things at once. So, you could have your boolean fields just executing a javascript function that adjusts the visibility and width of elements behind the scenes. I haven't fussed with that yet, but I'm sure it's possible. Someone just needs to try it.

Justin_Norris1
Level 10 - Champion Alumni

Jeff Shearer

Yeah or have the boolean output a particular string designating one CSS class if true and another if false, and then put that variable as a class on whatever elements you want.

I'd imagine you could achieve a pretty granular level of control that way by combining the class that is the output of the variable with existing classes in your CSS rules to both manipulate both multiple elements and multiple properties (visibility, width etc.) with a single toggle!

Jason_Hamilton1
Level 8 - Champion Alumni

Great post Jeff!

Definitely learned a couple new things here, thank you.

Josh_Perry1
Level 7

Very cool. Nice job.

Anonymous
Not applicable

I love the title! I hadn't read this before but when I presented on our version of the new guided landing page template to the Vancouver User Group in early September I used the exact same phrase

Anonymous
Not applicable

To add a couple ideas that have worked really well for us as variables:

  • Meta tags (Page Title, Description, keywords)
  • Social sharing links
  • "Follow Us" text (this was a huge issue for our language localization previously)

We also use a booleon for Landing Page A/B versions. With one there's a full header image across the entire screen, with the other it shows an image or video for half the header and has Title text variable in the other. We use this for both lead capture pages and thank you pages. Here's version B with half width:

ACL-LP-AB-Version.png

Anonymous
Not applicable

LP-Oprah-meme.jpg

Grégoire_Miche2
Level 10

Hi Jeff,

This is a really cool. Nice job.

This would go very well with a couple of ideas to make it even more powerful :

-Greg