Install Google Tag Manager on Site123

How to install GTM on Site123 using code injection for centralized tracking and tag management.

Google Tag Manager (GTM) is the recommended method for managing analytics and marketing tags on Site123. This guide covers installation, configuration, and best practices for Site123 websites.

Why Use GTM on Site123?

Benefits:

Manage all tags from one interface (GA4, Meta Pixel, etc.)
No code changes required after initial installation
Better performance (single container vs multiple scripts)
Easier for marketers to update without developer help
Built-in debugging and preview tools
Version control and workspace management

Site123-Specific Advantages:

Works on all Site123 pages (no restrictions)
Full access to all page elements and forms
Better control over tag loading order
Easier consent management for GDPR/CCPA
Can track Site123 forms and interactions easily

Installation Guide

Step 1: Create GTM Account and Container

Go to Google Tag Manager
Create Account
- Click Create Account
- Account Name: Your company name
- Country: Your location
- Check Share data anonymously with Google
- Click Continue
Setup Container
- Container Name: Your website domain (e.g., yoursite.com)
- Target Platform: Web
- Click Create
Accept Terms of Service

Copy Container Code

You'll see two code snippets with your Container ID (format: GTM-XXXXXXX):

Head snippet:

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->

Body snippet:

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Step 2: Add GTM to Site123

Log in to Site123 Dashboard
Navigate to Code Injection Settings
- Click Manage in top menu
- Go to Settings → Advanced Settings
- Click Code Injection (or Custom Code)

Add Head Snippet

In the Head Code section, paste the GTM head snippet:

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->

Replace GTM-XXXXXXX with your actual Container ID.

Add Body Snippet

In the Body Code section (or Top of Body), paste the noscript snippet:

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Replace GTM-XXXXXXX with your Container ID.

Save Changes

Click Save or Update to apply the code to your website.

Step 3: Verify Installation

Visit Your Live Site
- Open your Site123 website in a new browser tab
- Wait for page to fully load
Check GTM Installation

Open browser console (F12) and run:
```
console.log(window.google_tag_manager);
```
You should see GTM object with your container ID.
Use GTM Preview Mode

a. In GTM, click Preview button (top right)

b. Enter your Site123 URL in the dialog

c. Click Connect

d. A new tab opens with Tag Assistant

e. Navigate your site and verify:
- Container Loaded event fires
- Events appear in Tag Assistant
- No errors shown
Verify on Multiple Pages
- Home page
- About/regular pages
- Blog posts (if applicable)
- Contact page
- Store pages (if ecommerce enabled)

Configure GTM for Site123

Once GTM is installed, configure it for optimal tracking.

1. Enable Built-in Variables

In GTM:

Go to Variables → Configure
Enable these built-in variables:
- ✓ Page URL
- ✓ Page Hostname
- ✓ Page Path
- ✓ Referrer
- ✓ Click Element
- ✓ Click Classes
- ✓ Click ID
- ✓ Click Text
- ✓ Click URL
- ✓ Form Element
- ✓ Form Classes
- ✓ Form ID

2. Create Custom Variables

Page Type Variable: Useful for tracking different Site123 page types.

Variable Type: JavaScript Variable
Global Variable Name: document.body.className
Name: Page Type - Body Class

Language Variable (Multi-language Sites):

Variable Type: JavaScript Variable
Global Variable Name: document.documentElement.lang
Name: Site Language

Custom JavaScript Variable - Page Category:

Variable Type: Custom JavaScript

Code:

function() {
  var path = window.location.pathname;
  if (path === '/' || path === '') return 'homepage';
  if (path.includes('/blog/')) return 'blog';
  if (path.includes('/store/') || path.includes('/product/')) return 'store';
  if (path.includes('/contact')) return 'contact';
  return 'other';
}

Name: Page Category

3. Create Common Triggers

All Pages Trigger (default, use as-is)

Contact Page View:

Type: Page View
Trigger fires on: Some Page Views
Page Path contains: /contact

Blog Post View:

Type: Page View
Trigger fires on: Some Page Views
Page Path contains: /blog/

Form Submission Trigger:

Type: Form Submission
Wait for Tags: Enable
Check Validation: Enable
Trigger fires on: All Forms

Outbound Link Click:

Type: Click - All Elements
Trigger fires on: Some Clicks
Click URL does not contain: \{\{Page Hostname\}\}

4. Set Up GA4 Configuration

Create GA4 Configuration Tag:

Go to Tags → New
Click Tag Configuration
Select Google Analytics: GA4 Configuration
Enter Measurement ID: G-XXXXXXXXXX
Configuration Settings (optional):
- Fields to Set:
  - page_location: \{\{Page URL\}\}
  - page_path: \{\{Page Path\}\}
  - language: \{\{Site Language\}\}
Triggering: Select All Pages
Name: GA4 - Configuration
Save

5. Publish Container

Click Submit in top right
Version Name: "Initial Site123 Setup"
Version Description: "GTM installation with GA4"
Click Publish

Site123-Specific Tracking Setup

Form Tracking

Track Site123 contact forms automatically.

Create Form Submission Tag:

Tags → New
Tag Configuration → Google Analytics: GA4 Event
Configuration Tag: Select your GA4 Configuration tag
Event Name: form_submission
Event Parameters:
- form_id: \{\{Form ID\}\}
- form_classes: \{\{Form Classes\}\}
- page_path: \{\{Page Path\}\}
Triggering: Select your Form Submission trigger
Name: GA4 - Form Submission
Save and Publish

Button Click Tracking

Track CTA button clicks.

Create Click Trigger:

Triggers → New
Trigger Configuration → Click - All Elements
Trigger fires on: Some Clicks
Add condition:
- Click Classes contains cta-button (or your button class)
Name: Click - CTA Buttons
Save

Create Button Click Tag:

Tags → New
Tag Configuration → Google Analytics: GA4 Event
Configuration Tag: Your GA4 Configuration tag
Event Name: button_click
Event Parameters:
- button_text: \{\{Click Text\}\}
- button_class: \{\{Click Classes\}\}
- page_path: \{\{Page Path\}\}
Triggering: Select CTA Buttons trigger
Save and Publish

Phone Call Tracking

Track click-to-call links.

Create Tel Click Trigger:

Triggers → New
Trigger Configuration → Click - All Elements
Trigger fires on: Some Clicks
Condition: Click URL starts with tel:
Name: Click - Phone Number

Create Phone Call Tag:

Tags → New
Tag Configuration → Google Analytics: GA4 Event
Event Name: phone_call
Event Parameters:
- phone_number: \{\{Click URL\}\}
- page_path: \{\{Page Path\}\}
Triggering: Phone Number trigger
Save

Email Click Tracking

Similar to phone tracking, create trigger and tag for mailto: links.

Implement consent mode for European visitors:

Add Consent Initialization:

In Site123's Head Code (before GTM):

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}

  // Default consent to denied
  gtag('consent', 'default', {
    'analytics_storage': 'denied',
    'ad_storage': 'denied',
    'wait_for_update': 500
  });
</script>

<!-- Google Tag Manager code goes here -->

Update Consent via Data Layer:

When user accepts cookies:

window.dataLayer.push({
  'event': 'consent_update',
  'analytics_storage': 'granted',
  'ad_storage': 'granted'
});

Create Consent Trigger in GTM:

Triggers → New
Trigger Type: Custom Event
Event name: consent_update
Use this trigger for marketing tags (Meta Pixel, etc.)

Testing & Debugging

GTM Preview Mode

In GTM, click Preview
Enter your Site123 URL
Click Connect
Tag Assistant opens showing:
- Tags fired on each page
- Variables and their values
- Data layer events
- Any errors or warnings

Debug Checklist

Test these scenarios:

✓ GTM container loads on all pages
✓ GA4 Configuration tag fires on all pages
✓ Form submission events tracked
✓ Button clicks tracked (if configured)
✓ Custom triggers fire correctly
✓ Variables populate with correct data
✓ No JavaScript errors in console
✓ Works on mobile devices

Browser Console Debugging

Check if GTM loaded:

console.log(window.google_tag_manager);
// Should show GTM object

View Data Layer:

console.log(window.dataLayer);
// Should show array of events

Monitor Data Layer Pushes:

const originalPush = window.dataLayer.push;
window.dataLayer.push = function() {
  console.log('Data Layer Push:', arguments[0]);
  originalPush.apply(window.dataLayer, arguments);
};

Performance Optimization

1. Minimize Container Size

Remove unused tags, triggers, and variables
Consolidate similar tags where possible
Use tag sequencing for dependent tags
Avoid adding too many tags to single trigger

2. Optimize Tag Loading

Defer Non-Critical Tags:

Use custom triggers instead of All Pages when possible
Load marketing pixels after user interaction
Implement lazy loading for below-fold tracking

Example - Delayed Loading:

// In GTM Custom HTML tag
<script>
  setTimeout(function() {
    // Load non-critical script after 3 seconds
    var script = document.createElement('script');
    script.src = 'https://example.com/script.js';
    document.body.appendChild(script);
  }, 3000);
</script>

3. Monitor Core Web Vitals Impact

GTM can impact performance if not optimized:

Monitor Largest Contentful Paint (LCP)
Check Cumulative Layout Shift (CLS)
Keep container size reasonable (under 200KB)
Use async/defer loading when possible

Troubleshooting

GTM Container Not Loading

Symptoms: Preview mode doesn't connect, tags don't fire

Fixes:

Verify Container ID is correct (GTM-XXXXXXX)
Check code injection saved in Site123
Ensure both head and body snippets are added
Clear browser cache and test in incognito mode
Check browser console for JavaScript errors
Verify Site123 site is published (not preview)

Data Layer Not Accessible

Symptoms: window.dataLayer is undefined

Fix: Ensure GTM head snippet loads before any data layer pushes. GTM creates the data layer automatically.

Tags Not Firing

Causes:

Trigger conditions not met
Tag blocked by error in earlier tag
Consent not granted (if using consent mode)

Debug:

Use GTM Preview mode
Check trigger conditions match actual values
Review Tag Assistant for errors
Check console for JavaScript errors

Duplicate Events

Cause: Both GTM and direct code implementations active

Fix:

If using GTM, remove direct GA4/Meta Pixel code from Site123
Keep only ONE implementation method
Check all code injection areas in Site123

Multi-Language Site Configuration

For Site123 sites with multiple languages:

Create Language Detection Variable:

function() {
  return document.documentElement.lang || 'en';
}

Use in Tags: Add language as custom dimension:

// In GA4 Configuration tag, add field:
'user_properties': {
  'language': '{{Site Language}}'
}

Next Steps

For general GTM concepts, see Google Tag Manager Guide.

Nach oben