Using "Google Tag Manager" with "Google classic Sites"
Categories:
Integrating Google Tag Manager with Google Classic Sites
Learn how to effectively deploy Google Tag Manager (GTM) on your Google Classic Sites for enhanced analytics and marketing tag management.
Google Tag Manager (GTM) is a powerful tool that allows you to manage and deploy marketing tags (snippets of code or tracking pixels) on your website without modifying the code. While Google Classic Sites offers limited customization options compared to modern CMS platforms, it is still possible to integrate GTM to gain valuable insights into user behavior and manage various tracking services. This guide will walk you through the process, highlighting the specific steps and considerations for Classic Sites.
Understanding the Challenge with Classic Sites
Google Classic Sites, unlike its newer counterpart (Google Sites), does not provide a direct, built-in integration point for Google Tag Manager. Modern websites typically allow you to paste the GTM container snippet directly into the <head> and <body> sections of your site's HTML. Classic Sites, however, restricts direct HTML editing to specific gadgets or embedded content areas. This means we need to leverage the available embedding options to inject the GTM code.
flowchart TD
A[Google Classic Site] --> B{"Embed Gadget / HTML Box"}
B --> C[Paste GTM Container Snippet]
C --> D[GTM Loads Tags]
D --> E[Data Sent to Analytics/Marketing Platforms]Conceptual flow of GTM integration with Google Classic Sites
Prerequisites: Setting up Google Tag Manager
Before you can integrate GTM with your Classic Site, you need to have a Google Tag Manager account and a container set up. If you haven't done so already, follow these initial steps:
1. Create a GTM Account
Navigate to the Google Tag Manager website (tagmanager.google.com) and sign in with your Google account. Click 'Create Account' and follow the prompts to set up a new account and container. Choose 'Web' as the target platform.
2. Retrieve GTM Container Snippet
Once your container is created, GTM will display two code snippets: one for the <head> section and one for the <body> section. Copy both of these snippets. You will need them for the next steps.
3. Configure Your First Tag (Optional but Recommended)
To verify your GTM setup, it's a good idea to configure a basic Google Analytics 4 (GA4) Configuration Tag or Universal Analytics (UA) Page View Tag within your GTM container. Publish this container version.
Integrating GTM into Google Classic Sites
Due to the limitations of Classic Sites, we will use the 'Embed Gadget' or 'HTML Box' feature to inject the GTM code. This method allows us to place custom HTML, including JavaScript, onto our site pages. The key is to place the GTM snippets as high up in the page's rendered HTML as possible.
1. Edit Your Classic Site Page
Go to your Google Classic Site and navigate to the page where you want to add GTM. Click the 'Edit page' button (pencil icon).
2. Insert an 'Embed Gadget'
From the 'Insert' menu, select 'More gadgets...'. In the 'Add a gadget' window, search for 'Embed Gadget' or 'HTML Box'. Select it and click 'Add'.
3. Paste the GTMSnippet
In the 'Embed Gadget' configuration window, paste the first GTM snippet (the one intended for the <head> section) into the 'Content' field. Ensure 'Include a scrollbar on gadget if content is too large' is unchecked, and set 'Display title' to unchecked. Click 'OK'.
4. Insert a Second 'Embed Gadget' for Snippet
Repeat the process: 'Insert' > 'More gadgets...' > 'Embed Gadget' or 'HTML Box'. This time, paste the second GTM snippet (the one intended for the <body> section) into the 'Content' field. Again, uncheck scrollbar and title options. Click 'OK'.
5. Position the Gadgets
Drag the first GTM gadget (the <head> snippet) to the very top of your page content area. Drag the second GTM gadget (the <body> snippet) to be immediately below the first one. The closer to the top of the page, the better for GTM to load efficiently.
6. Save Your Page
Click the 'Save' button on your Classic Site page to apply the changes.
<body> content, not the actual <head> and opening <body> tags as recommended by Google. While it works, it might slightly delay GTM loading compared to a direct implementation. For optimal performance and full functionality, consider migrating to the new Google Sites or a more flexible CMS.Verifying Your GTM Implementation
After saving your Classic Site page, it's crucial to verify that GTM is firing correctly and that your tags are being deployed. Use the following methods:
1. Use GTM Preview Mode
In your Google Tag Manager interface, click the 'Preview' button. Enter your Classic Site's URL and connect. Browse your site, and the GTM Debugger should show which tags are firing.
2. Check Google Analytics Realtime Reports
If you've set up a Google Analytics tag via GTM, open your Google Analytics property and navigate to the 'Realtime' reports. You should see active users on your Classic Site page.
3. Inspect Page Source (Browser Developer Tools)
Open your Classic Site page in a browser, right-click, and select 'Inspect' or 'View Page Source'. Search for 'googletagmanager.com' or your GTM container ID (e.g., 'GTM-XXXXXX'). You should find the GTM snippets embedded within the page's HTML.