Google Tag Manager is a free, centralized tool that makes it easy to implement different tags ( Google Analytics , Google Ads, Facebook Pixel , among others) on a website or application. Tags are small pieces of code that are integrated into a web page with the aim of collecting information about user behavior, conversions, traffic, and more.
What is Google Tag for?
Google Tag is particularly useful for:
Conversion Tracking : Makes it easy to monitor key actions on a website, such as purchases, registrations, or ad clicks.
Improve digital marketing : Provides valuable data to optimize marketing campaigns through Google Ads, Facebook Ads, etc.
Web Analytics : Offers direct integration with Google Analytics to better understand user behavior.
A/B Testing and Remarketing : Can be used to perform benin mobile numbers list A/B testing or implement remarketing strategies, showing specific ads to users based on their behavior on the site.
Benefits of using Google Tag Manager
Centralized management : The tool allows you to manage all tags from a single interface, without the need to modify the source code every time you want to implement or change a tag.
Greater efficiency : Facilitates management without constant intervention from developers, reducing errors and speeding up the implementation of changes in marketing campaigns.
Optimizing site performance : By managing all tags in one place, you can reduce the amount of code on your site, improving loading speed and user experience.
Easy Integrations – GTM integrates directly with popular platforms like Google Analytics, Google Ads, and other third-party services.
How to set up Google Tag Manager?
The proper Google Tag setup will depend on the type of website, whether it is a traditional one or a single-page application (SPA). Below we will show how to configure it in both cases:
Configuration on traditional websites
In traditional websites, pages are loaded every time a user navigates to a new section. The steps to follow are as follows:
1. Create a container in Google Tag Manager
Go to Google Tag Manager and create a new container.
Copy the container code and paste it into the <head> of every page on your website.
2. Configure labels
Inside the container, add the necessary tags (Google Analytics, Google Ads, etc.).
Define triggers for tags to fire at specific times, such as a page load or a button click.
Different triggers can be assigned to the same tag:
3. Publish the container
Once the tags are set up, publish the container so that the changes are reflected on your website.
4. Check the correct operation
Use the Preview tool to make sure your tags are firing correctly.
Configuration in Single Page Applications (SPA)
In single-page applications , content is loaded dynamically without the entire page reloading. This requires a slightly different approach to Google Tag configuration:
Insert the Google Tag Manager container
Just like on a traditional site, you need to add the container code to the application header.
Implement custom event tracking
In a SPA, page changes do not trigger reloads, so tags will not fire in the traditional way. To work around this, you'll need to create custom triggers based on events, such as when a user navigates to a new section within the same page.
Custom events can be triggered using JavaScript code that notifies Google Tag Manager about user interactions. For example:
javascript.
Setting up labels for custom events
In Google Tag Manager, create a new tag, select the appropriate tag type (Google Analytics, Ads, etc.), and set it to fire on custom events like the example above.
Using History Change Trigger
SPAs often manipulate browser history without reloading the page. You can use the "History Change" trigger in Google Tag Manager to capture these events.