There’s a really great WordPress plugin called URL Params that’s used by over 8000 active installs as of January 2018, but in our opinion, it comes with a big flaw: it doesn’t always play nicely with heavily cached websites.
We are big fans of the plugin and it really helps websites with a number of variant pages get set up and running quickly, without development resource. But in the interest of site speed as it’s becoming ever more important, a dynamic lightweight client-side (browser-based) solution is what we felt is required.
TL;DR
Some caches don’t cache URL parameters and therefore each page via plugins like this are generated in real time on some servers.
How to use URL Params in Javascript
Much like the WordPress plugin counterpart, variables are placed into the URL as key:value pairs, like the example below, and then tags surrounding placeholder words on the page are they dynamically changed.
https://example.local/abc-service/?location=London&service=CRO
In the source code of your page — typically edited via your favourite CMS — just wrap a word in a span tag with a data-params attribute to get started.
<span data-params="service">SEO</span> Services in <span data-params="location">Space</span>
Then, match up the value in your data-params span tag with a key:value pair in your URL to complete the page setup. In the examples above you can see the “SEO” Service should be replaced with CRO, from the URL. Likewise, the “Space” location should also be replaced by the value “London” from the URL.
Working with the JavaScript
At Impression, we’re big fans of Google Tag Manager, as this keeps work away from internal (or third party) web development teams, typically speeding up the deployment times.
As such, we’ve written a little drop in script which can be used in any Google Tag Manager container, compatible with most sites (note; you will probably need to edit this to work on single page application sites).
The script above can be inserted into Google Tag Manager like so:
Notice that in this example I’ve selected “All Pages” for the trigger – on a production environment you might want to restrict this to only your dynamic landing page(s) as otherwise it’s just a little more overhead which isn’t required on that page load.
Once you’re ready, deploy your changes and test!
Running on static / cached sites
This solution is also suitable for use on landing pages or entire static sites, as principally the work required by the JavaScript is the same for each of these.
This isn’t a one-stop solution for all users, but we hope it may help a few of you improve your granularity in your digital marketing campaigns.
If you think we can help, just get in touch.
NOTE: We did originally build this to rapidly launch PPC campaigns but as we’re still unsure whether the AdsBot-Google carawler fully renders JavaScript, especially that from Tag Manager, we can’t yet advocate this approach for PPC campaigns (though if you have no other options, then what have you got to lose!).
