My Pardot Landing Page Starter Kit

September 5, 2017 · Filed under Pardot, Web Development

Over the past year, I’ve built an increasing amount of Pardot landing pages in my day to day role. I think landing pages are a really interesting niche to optimize for, and it’s been a cool experience going over analytics and statistics and using tools like Hotjar to see end users interact with what I build. However, throughout this process I keep running into one major issue…

The Problem

Pardot sucks! Or, rather, that’s what I exclaimed the first time I was confronted with having to build one. I am used to having modern tools to help me build websites. Things like SASS and version control and deploying from the command line. With Pardot, you code the page and manually copy and paste the code into the web application. If you want to host assets, you have to manually upload those as well and put them in your code.

Additionally, Pardot is fairly limited in how it enables end users to edit content on landing pages. You have to define sections as “regions” with data attributes and clicking on a region opens up a WYSIWYG (or text) editor for them. Perfect, right? Well the editor does not load external assets like stylesheets, so the only way to get a styled design that actually looks like the landing page they will be editing is to put all those styles inline in the actual template. What a pain, right?

Also, unlike a traditional website where (in a perfect world) the client approves the design and you code it, Pardot landing pages can be very agile creatures. Sometimes there will be 5 different versions to test user response and sections will be added and removed daily. This resulted in my copying and pasting code all over the place, losing track of what file was which version and generally causing a lot of stress.

Eventually, it became clear that I needed to bring some of the tools that I use in regular web development to the landing page world.

A Starter Kit

I built a simpler starter kit with the essential features I felt I had been missing: version control, reusable templates, sass and the ability to minify and put stylesheets and scripts in the actual html file. As I outlined above, that last feature is crucial. The difference is huge:

I’ve also integrated the Nunjucks templating engine, which is incredibly powerful. It allows me to build “component libraries” of sections and quickly add or remove them from different pages. Building out A/B versions is simple and quick.

View on Github

I’ve been using this kit for a little while now and making improvements here and there, and it has been a game changer in terms of getting these landing pages out quickly and at the best possible quality. I still have a few major things I’d like to eventually include, namely automating the deployment process, if the API allows me to do so.

Until then, I am happy to offer this tool to other developers. If you like it, let me know on Github! I’m very interested to hear how people are using it and if there are other features that could be added.