How to Install Google Tag Manager on Weebly | OpsBlu Docs

How to Install Google Tag Manager on Weebly

Add GTM to Weebly using the SEO settings header code area or an embed code element. Covers container snippet placement and page-level triggers.

For general GTM concepts, see the Google Tag Manager overview.

Prerequisites

  • Google Tag Manager container created
  • GTM Container ID (GTM-XXXXXXX)
  • Weebly paid plan (Personal, Professional, or Performance)

Installation

Step 1: Get Your GTM Code

  1. Log in to Google Tag Manager
  2. Select your container
  3. Click on the container ID (top right, GTM-XXXXXXX)
  4. Copy both code snippets

Step 2: Install in Weebly

Header Code (first snippet):

  1. Go to Weebly Editor
  2. Navigate to Settings > SEO
  3. In Header Code, paste the first GTM 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 -->

Footer Code (second snippet):

  1. In Footer Code, paste the noscript fallback:
<!-- 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) -->
  1. Replace GTM-XXXXXXX with your actual container ID
  2. Click Save
  3. Publish your site

Verification

Check Installation

  1. View Page Source: Confirm GTM code in head and body
  2. GTM Preview Mode: Click Preview in GTM, navigate to your site
  3. Tag Assistant: Use browser extension to verify

Preview Mode Steps

  1. In GTM, click Preview
  2. Enter your Weebly site URL
  3. Your site opens with GTM debugger
  4. Verify Container Found and tags firing

Data Layer Configuration

Weebly doesn't have a native data layer. Create a custom one:

<!-- Add to Header Code BEFORE GTM code -->
<script>
  window.dataLayer = window.dataLayer || [];

  // Basic page data
  dataLayer.push({
    'pageType': 'standard',
    'pagePath': window.location.pathname
  });
</script>

Ecommerce Data Layer (Performance Plan)

For Weebly stores:

<script>
  // Product page data layer
  document.addEventListener('DOMContentLoaded', function() {
    var productTitle = document.querySelector('.wsite-com-product-title');
    var productPrice = document.querySelector('.wsite-com-product-price');

    if (productTitle && productPrice) {
      window.dataLayer = window.dataLayer || [];
      dataLayer.push({
        'event': 'view_item',
        'ecommerce': {
          'items': [{
            'item_name': productTitle.textContent.trim(),
            'price': parseFloat(productPrice.textContent.replace(/[^0-9.]/g, ''))
          }]
        }
      });
    }
  });
</script>

Common Tags to Add

Google Analytics 4

  1. Go to Tags > New
  2. Choose Google Analytics: GA4 Configuration
  3. Enter your Measurement ID (G-XXXXXXXXXX)
  4. Set trigger to All Pages
  5. Save and publish

Meta Pixel

  1. Go to Tags > New
  2. Choose Custom HTML
  3. Paste Meta Pixel base code
  4. Set trigger to All Pages
  5. Save and publish

Trigger Examples

Click Tracking

Create a trigger for button clicks:

  1. Triggers > New > Click - All Elements
  2. Fire on "Some Clicks"
  3. Click Element matches CSS selector .wsite-button

Form Submissions

// Add to Header Code - track Weebly form submissions
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('.wsite-form').forEach(function(form) {
    form.addEventListener('submit', function() {
      window.dataLayer = window.dataLayer || [];
      dataLayer.push({
        'event': 'form_submission',
        'form_name': form.id || 'weebly_form'
      });
    });
  });
});

For GDPR compliance, configure GTM consent mode:

<!-- Add BEFORE GTM code -->
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}

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

Update consent after user grants permission:

// Call when user accepts cookies
gtag('consent', 'update', {
  'analytics_storage': 'granted',
  'ad_storage': 'granted'
});

Troubleshooting

GTM Not Loading

  1. Check paid plan status
  2. Verify code syntax (no extra characters)
  3. Clear Weebly cache and republish
  4. Check browser console for errors

Tags Not Firing

  1. Use GTM Preview Mode
  2. Check trigger conditions
  3. Verify data layer values
  4. Test in incognito mode

Next Steps

शीर्ष पर वापस जाएँ