Best Practices for Marketo Guided Landing Pages

By: Kevin Schroeder  | 09/18/2019


Building a successful landing page is essential to any digital marketing campaign, as they get the user started along in the process of being marketed to. The content on landing pages can vary, so the flexibility of these templates is a must. Because of this, these pages can become quite specialized, and all the details are important to get correct. Knowing how to leverage your marketing automation platform to maximize a landing page template then becomes quite important.

At Hileman Group, Marketo is one of the Marketing Automation platforms we utilize. As of this writing, we have been partners with them for 4+ years. In that time, we’ve learned a few lessons when it comes to building marketing assets in Marketo and we thought we’d be nice and share some of our process for it. After all, practice makes perfect!

Begin with a Boilerplate

With whatever project we start, we typically have a saved starter template from which to begin—no surprises there I bet. These templates have been crafted over time from lessons learned and are always being updated as better ideas occur. This helps us from having to repeat certain processes, or always remember specific details, and set some baseline considerations for every landing page build. It also helps create a good level of consistency from one template to the next.

Use a Task Runner!

A task runner is something that runs tasks for you essentially, to describe it in its own words. Essentially what it does is automate certain repetitive processes and assists in various ways in completing a project. We use ‘Gulp’ here, which has lots of available plugins to help you do anything from compile SCSS to CSS, templating, to text replacement and more. Once we get it running, we can dictate whether it’s being built for a local preview to faster develop it, or for Marketo’s production environment.

Mimic Platform Features for Development

Marketo has some platform specific markup that gets rendered in their system and then rendered into regular HTML when it's loaded into your browser. The initial solution when developing a landing page in Marketo is to have two versions: one with regular HTML markup, and one with platform specific code, which then gets used in the system. The one with the platform specific code doesn’t quite work if Marketo doesn’t process some of it beforehand. It’s also trial and error as you actually move it into the system. Additionally, you’re maintaining two different templates in some way! This all becomes time consuming!

Now, the solution is scripting executed by our task runner (built into our boilerplate of course) that finds and replaces these platform specific values. While it’s a bit of work to get it running at first, if you’re building many landing pages for various clients, it really pays off. All we need to do now is tell our task runner what we are building for! This really simplifies the process, speeds up development, and streamlines the process. It also allows us to maintain one file instead of the two.

Fix Forms with Scripting

Marketo’s forms are generated with JavaScript using their Forms 2.0 API. In doing so, it renders predefined HTML with correlating styles, which are quite difficult to manipulate alone with CSS. Depending on what our designers may give us, it actually may be impossible! While we certainly can do it with CSS most of the time, it’s quite a painful process.

Fortunately, we’ve crafted a solution around this, which helps refine this difficult markup: a nice script to modify it. There are a few variations of this scripting written here at Hileman Group, but essentially it helps remove the bad rules and styles these forms are rendered with. It also allows us to use existing styles written, or leverage other plugins, which is always a plus. Our button styling now gets used, that 5-pixel space is now gone, our input fields have the right borders, and checkboxes look really neat. The designer gives you two thumbs up, your head feels better, and moreover the client is pleased!

Leveraging Marketo’s Tokens and Variables Features

Tokens and Variables are two features in Marketo utilized by landing pages and emails. A ‘token’ is a snippet of text, or code that can get re-used within a marketing program, or even higher in the marketing instance. These are good for things like a copyright date, a phone number, addresses, or anything ‘global’. Tokens are things that may get updated and will consistently be used across several different types of assets.

‘Variables’ are similar; however, they get used only at the page level. Variables come in a few varieties and may get used for things like page titles, a toggle to show or hide a section, changing a color somewhere, or even adding an additional script to a page.

With the True/False Toggle variable, you can reconfigure the page’s layout with style rules that work in tandem. Also, I have found it useful to place some extra tokens and variables on the page to set-up an opportunity for further modification. Every so often, the template contains extra page components or functionality that needs to get enhanced with additional scripting or styling. Below are two different looking pages that use the same template modified with these features.

The page is full width and text is centered, and other customized components:
http://content.hilemangroup.com/customer-satisfaction-survey.html

The page is as it is by default:
http://content.hilemangroup.com/The-ROI-of-Professional-Development-Registration.html

The Hileman Customer Satisfaction Survey page has some additional scripting and styling on it to get it to work. All made possible by the platform’s variables in this particular instance, a few toggle variables changed the layout alters with everything being centered. Without leveraging those features, this could’ve easily been another template—however achieved with those options, in less time.

Working Through the Quirks

Marketo has a few odd quirks to it as of this writing at least. One of them is that inside the page editor, Marketo doesn’t understand what a relative link is. A relative link is a reference to a file that doesn’t include the domain as part of its path, and is how you typically reference files for any web-page. This is problematic because it's best to link files like stylesheets and scripts which control appearance and functionality! Now the solution is simply to make these absolute links, in which the domain is added. However, I’ve seen implementations where various page components are instead inline and was a practice for a while here. Without linking files, it makes updates difficult; this is especially when the template is used 100 plus times over!

Finally, Marketo’s file system is flat, which means there is basically one directory in which every image, script, stylesheet and other file types reside. Inside Marketo’s system, you can organize into folders and directories, however the actual location in stays the same. What this means is you need to find a good naming convention for all your files, as they all need to be unique.

 

We know this is a lot of information to digest, but we hope this helps! If you have any questions, feel free to contact us here.

 


Share this




Comments
Blog post currently doesn't have any comments.
 Security code