Why Landing Page Management Was A Nightmare And How Google Sheets Came To The Rescue
In the age of “What you see is what you get” type landing page builders, the creation and upkeep of landing pages should be a breeze. But ask a person who deals with a large portfolio of landing pages and you’ll be told that the nightmare is still not over. Pages built with legacy technology & incoherent designs, buried deep within the enclaves of obscure file names, are still greeting weary website visitors; who, after clicking on a slick looking ad, are redirected to an unwelcoming corner of the advertiser’s website.
In the beginning of this year, our marketing site was infested with such pages. We were facing design and copy incoherence — with half of the pages built on top of Marketo while the rest coded with good old HTML & CSS.
As an Optimization Specialist, it was painful to manage those pages. Small changes to the copy, such as updating the form disclaimer, would take up an ungodly amount of time & resources as I had to manually modify the HTML & CSS or navigate the notoriously bad UI of Marketo (Adobe, I hope you are reading this). On top of that, it made A/B testing almost impossible.
Bad design caused bad user experience which in turn affected our Google Ad quality score and drove up our cost per lead. Something needed to be done fast.
Coming from a tech startup background, I had experience of working with Vue.js framework which is used for building dynamic web applications. What it allows you to do is have a single HTML file that can change itself based on a number of different parameters such as the URL structure or user actions.
I decided to test Vue.js on our international landing pages: I built a Vue.js application that rendered a web-page based on the following 3 parameters:
- The source of traffic (FB or Google)
- The website visitor’s native language
- The website visitor’s country of residence
The total number of landing page variations were upwards of 500. It was because we had a large number of unique combinations of the above parameters. Vue.js allowed us to have a single HTML file serve all of those variations — saving us the need to code 500+ separate HTML files (THANK GOD!).
The experiment was a success although there was one caveat: when my team members asked for a copy change, I still had to modify the code albeit in only one file. There was room for improvement.
Vue.js enabled me to control the design and layout of the page but the copy wasn’t my forte. In an ideal world, our Copywriter and Brand Manager would modify the copy, on their own, within the strict confines of the page template.
I started looking for a potential solution that met the following criteria:
- Fast and Lightweight CMS (Unlike the clunky Wordpresses, Hubspots & Marketos of the world)
- Easy to use platform with a shallow learning curve. (For my non-technical teammates)
- Easy to manage (To cater to our large number of landing pages)
- Free (To avoid the dreaded, infinitely long, email chain for a PO Approval — I hope my boss isn’t reading this)
In my search for a potential solution, I came across SheetsToSite, a product built by Andrey Azimov* that allows you to control a simple website using Google Sheets.
It’ll clicked. Anyone who works in an office space knows how to use Google Sheets which made it the only platform out there with absolutely no learning curve. If I enable Brand Managers to create and manage Landing Pages using Google Sheets, it’ll allow me to focus more on A/B testing and less on the grunt work required for mundane tasks — like copy updates.
The only problem I for-saw with the idea was the system’s volatility: if someone deleted the Google Sheet linked to a web page, it would wipe out the entire web page. Another concern was slow page load speed.
The workaround that I built was a “Middle Man” app that takes data from Google Sheets and mirrors it on an online database. So now, when my teammates make changes to the page content on Google Sheets, the data gets pushed to a secure online database (Google’s Firebase). On client side, the Vue.js app looks at the URL parameters and pulls the relevant data required to render a specific landing page from Firebase. In this way, the landing page content will remain on Firebase database, even if someone accidentally deletes the Google Sheet.
This is how the Google Sheet dashboard looks like for the landing page’s hero section:
The challenges we faced creating the UI/UX of the landing page warants a separate blog post but, all in all, here’s what has happened since we deployed the new system of landing page management:
- Faster page load speed and improved UI/UX has boosted our conversion rate by an average of 30% (for some programs, it’s more than 100%)
Legacy: http://www.torontofilmschool.ca/film-production/on-campus/
Reimagined: https://www.torontofilmschool.ca/on-campus/?program=film-production-fp - It has made it easy for us to create variations for A/B testing. It’s literally as simple as duplicating a tab in Google Sheets and modifying a specific cell.
Original:https://torontofilmschool.ca/dual/?program=vg-dual
Variant:http://www.torontofilmschool.ca/dual/?program=vg-dual-2 - It has made the life of the team’s ad hoc developer a lot easy. Can you guess who that person is?
If you have questions or concerns, please feel free to send them my way. My email is sarimhaq@gmail.com
* Please visit Andrey’s website and help him make his hardcore year a success: https://www.andreyazimov.com/