Cookie Consent by Free Privacy Policy Generator

Hide H1 Heading using JS & Tag Manager

If you require to hide the H1 heading on a single page without editing the site's HTML (or don't have CMS access). I'm going to show you an easy hack using a simple JS script deployed using Google Tag Manager (GTM). Assuming you know the basics on how to deploy Tag with GTM.

Step 1, create a custom HTML tag. For this tutorial, I have named the tag 'Hide H1 Heading' add the following script in the tag.
Code:
<script>
document.getElementsByTagName('h1')[0].style.display = 'none';
</script>

hideh1-2.JPG


Step 2, for the firing trigger, set the trigger as a 'Page View' firing on 'some page views'. The trigger conditions are: Page Path > Equals > 'the URL

hideh1-1.JPG


Step 3, publish the container. Head to the browser tab with the URL loaded that you intend to hide the H1 Heading from and refresh the page? Did it work? If not post below, let's see if we can help you.
 
Back
Top