In this short tutorial, I will show you how to modify or deploy the viewport meta tag (the viewport is the user's visible area of a web page) using Google Tag Manager (GTM). This tutorial is aimed at marketers and developers that are unsure how to edit the HTML DOM head for legacy or outdated Content Management Systems (CMS).
Step 1 - Log in to GTM and create a new tag. We are going to name the tag Meta Viewport or use a naming convention that works for you. The tag configuration type is Custom HTML. Next, paste the following JavaScript snippet into the text editor box.
Step 2 - For the firing trigger, Set the trigger type as 'Page View DOM Ready' with the conditional set as 'All DOM ready events'. This is assuming you intend to set the meta viewport trigger to fire sitewide (all URLs).
Step 3 - You can now publish the new tag and trigger to your live GTM container. next, view the rendered HTML to the page that you have deployed the tag to fire on (refresh browser window) if you already had it open. Also, there is a big difference to view the page source and viewing the rendered HTML.
More information on viewport types and settings can be found here - https://www.w3schools.com/css/css_rwd_viewport.asp
Step 1 - Log in to GTM and create a new tag. We are going to name the tag Meta Viewport or use a naming convention that works for you. The tag configuration type is Custom HTML. Next, paste the following JavaScript snippet into the text editor box.
Code:
<script>
jQuery('meta[name="viewport"]').remove();
var meta = document.createElement('meta');
meta.name = 'viewport';
meta.content = 'width=device-width, initial-scale=1';
jQuery('head').append(meta);
</script>Step 2 - For the firing trigger, Set the trigger type as 'Page View DOM Ready' with the conditional set as 'All DOM ready events'. This is assuming you intend to set the meta viewport trigger to fire sitewide (all URLs).
Step 3 - You can now publish the new tag and trigger to your live GTM container. next, view the rendered HTML to the page that you have deployed the tag to fire on (refresh browser window) if you already had it open. Also, there is a big difference to view the page source and viewing the rendered HTML.
More information on viewport types and settings can be found here - https://www.w3schools.com/css/css_rwd_viewport.asp
