Use Google Tag Manager to add custom Javascript to your site

Google Tag Manager makes it easy to add custom Javascript code to your WordPress website and helps you to manage the integration and running of social and analytics services that you would otherwise have to add through plugins.

In essence, Google Tag Manager is a user-friendly way to manage snippets of JavaScript that send information to third-parties; Google Analytics for example. It also offers a way to for you to run 3rd party services, such as our chat bubble below and our social sharing buttons on the left. Both these services have been installed on Beaver Brains via Google Tag Manager instead of the more traditional plugin route.

Why use Tag Manager?

When you add WordPress plugins to your site, small amounts of code related to that plugin may fire every time a page is loaded, regardless of whether or not the functionality provided by the plugin is required. That’s often not great for speed and certainly not an efficient way to run complex websites. Beaver Builder also allows you to add Javascript to your pages, either globally or layout based but doesn’t allow you to conditionally run Javascript beyond these two options.

Adding code to your site through Google Tag Manager and setting trigger variables, gives you  greater flexibility for rendering code only under particular conditions.

If like me, you’re not a seasoned Javascript coder, then Tag Manager will make the whole process of managing, segmenting and updating scripts a breeze. You keep all of your code, variables and triggers in one place and you can even re-use code and variables across multiple sites.

Give me some examples…

Google Analytics

Most of us are familiar with Google Analytics, installing it on our sites and client sites by adding tracking code through WordPress plugins. Adding tracking code through a plugin usually means that every page and post on your site will send tracking information to Google Analytics. But what if you don’t want a particular page to be tracked? Tag Manager makes it possible for you to add triggers and variables so that you can specify the conditions under which the code is executed. And because it’s all happening in one place, you can re-use the variables and triggers in multiple places.

Beaver Builder Javascript

Beaver Builder makes it possible to add Javascript to pages either globally or on a page by page basis. But you can’t specify more fine-grained execution conditions; for instance ‘don’t fire this javascript if the button on this page is green’. With Tag Manager you do have that control because you can specify page as well as CSS conditions that need to be present for the code to execute. For example, the Beaver Builder Theme contains CSS classes that determine the layout of the overall page – full width or sidebar etc, so you can target pages based on their layouts and execute Javascript only when certain conditions are met.

Our single module pages include Javascript for displaying an extended list of Beaver Builder modules when you press the ‘See more button’. We could have added that Javascript globally or tried to remember to add it on a page by page basis, but Tag Manager makes it easy to only include that Javascript when it knows that the ‘See more’ button is present on the page.

Chat Bubbles

I love Chat Bubbles. They make it really easy for me to make announcements and get talking to our website visitors. But I don’t want the chat bubble showing up every hour of every day. With Tag Manager, I can set time limits on the chat bubble code executing – in my case limiting the bubble to weekdays only.

Social Sharing Plugins

Social share plugins often come in for criticism because they slow page load speed down. With Tag manager, we load our social shares after the page has fully loaded – you can specify that condition in tag manager. We don’t have any social sharing plugins on Beaver Brains – it’s all done with the magic of Tag Manager.

Wrapping up

Because WordPress is so extensible, it’s always tempting to just add another plugin that will ‘cover every base’. However if you need more control over the code executed on your site, then Tag Manager may be the easiest way yet. Plus it’s free!

There are some great Tag Manager blogs out there, read the excellent blog by Simo Ahava’s for starters.

If you need some help getting Tag Manager set up or you have a particular use case in mind, let us know.