There are a number of different reasons you might want to use GTM to modify your pages, if you wanted to work around deployment issues or maybe if you're considering using GTM to run SEO A/B Split tests on your site.
This post doesn't look to cover much of the theory, or the pros & cons. No, this gives you some examples you can use if you're not that confident with JavaScript or wanted to get some inspiration for your own projects.
We could have many different examples and many different use-cases and this post will grow over time - let me know in the comments below if there's anything you'd like to see.
Javascript Modification Examples:
Anything in red like this means you need to edit it yourself to correctly inject the new content & anything in purple like this is for the new content you want to add in, whether it's a variable or HTML you wan to add in directly.
Override Page Title:
The simplest and often one of the most successfully indexed by Google, this snippet enables to to override the page title with your own.
<script>
document.title ="Test Page Title";
</script>Lookup tables are probably going to be your best option here, but you'll still need to write all the titles manually and based it on the page url, for example.
Rewrite <H1>:
You can easily rewrite <h1> tags on the page using this snippet. The H1 can be manually re-written - which doesn't scale very well - or you can create a variable, i.e. pulling another element from the page or a regex lookup table.
<script>
document.querySelector('h1').innerHTML =
'<h1>{{New Heading 1}}</h1>';
</script>This code assumes that you only have one <h1> on the page, just be aware if you have multiple <h1>s this will write over them.
You can use querySelector to do this via class too:
<script>
document.querySelector('.class').innerHTML =
'<h1>{{New Heading 1}}</h1>';
</script>Test, test, test before deployment!
Inject Alt Tags:
This following sets alt attributes of an image on the page based on whatever is in your {{Image Alt}} variable. We might want to do this in order to add in alt text to images which do not currently have alt text set.
<script>
document.querySelector('.yourClassName').setAttribute("alt", "{{Image Alt}}");
</script>How you set the variable (or what text your inject) depends on the page, but for example you could use the <h1> on a product page.
Testing Modifications
You can (and should!) test these thoroughly before deploying in Google Tag Manager. You can do this be previewing your container, which is how you'll get the truest version of things pre-deployment.
However, if you're new to making modifications using JS and you want to see if you have the right css selectors or IDs you can use your browser's development tools to test.
Right click anywhere on the page, click "Inspect" (if you're using Chrome) and then click on "Console". Write or paste in your JavaScript (minus <script> tags) and hit return to see what impact that code will have.
The below example on the BBC has a new title, a re-written masthead as an H1, a new page title and the first image has a new alt tag.
If you mess something up (you probably will, don' worry) refresh the page and try again.
Final caveat, just because it works in the Console and/or in Google Tag Manager preview mode doesn't mean you can get away without testing in after deployment. Test at every stage to make sure nothing unexpected has happened!
What Would you Add?
We could have many different examples and many different use-cases and this post will grow over time - let me know in the comments below if there's anything you'd like to see.
Comments