Wix GTM Integration | Blue Frog Docs

Wix GTM Integration

Integrate Google Tag Manager with Wix for centralized tag management.

Wix GTM Integration

Complete guide to setting up Google Tag Manager (GTM) on your Wix site for centralized tracking and tag management.

Overview

Google Tag Manager provides centralized tag management for your Wix website. While Wix has built-in integrations for some platforms, GTM offers more flexibility and control for advanced tracking needs.

Why Use GTM with Wix?

GTM provides powerful tag management benefits:

  • Centralized Management: Control all tracking from one interface
  • No Code Deploys: Add/modify tags without site republishing
  • Version Control: Track changes and roll back if needed
  • Preview Mode: Test tags before publishing
  • Advanced Triggers: Fire tags based on complex conditions
  • Multiple Platforms: Manage many tracking tools in one place
  • Event Tracking: Track custom interactions easily

Prerequisites

Before implementing GTM on Wix:

  1. GTM Account: Create a free account at tagmanager.google.com
  2. Container: Create a Web container for your site
  3. Wix Premium Plan: Required for custom code (Connect Domain or higher)
  4. Site Access: Admin access to your Wix site

Installation Methods

Wix's built-in integration for GTM.

Step 1: Get GTM Container ID

  1. Log in to Google Tag Manager
  2. Note your container ID (e.g., GTM-XXXXXX)

Step 2: Add to Wix

  1. In Wix Editor, go to Settings
  2. Click Tracking & Analytics
  3. Click + New Tool
  4. Select Custom from the list
  5. Paste your GTM code snippets
  6. Click Apply

Method 2: Custom Code (Advanced)

For more control over placement:

  1. In Wix Editor, go to Settings > Custom Code
  2. Click + Add Custom Code in Head section
  3. 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-XXXXXX');</script>
<!-- End Google Tag Manager -->
  1. Set to load on All pages
  2. Set load placement to Head
  3. Click + Add Custom Code in Body section
  4. Paste the GTM body snippet:
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
  1. Set to load on All pages
  2. Set load placement to Body - start
  3. Click Apply
  4. Publish your site

Method 3: Wix Velo (Developer Mode)

For Wix sites using Velo:

Add to your site's masterPage.js:

// Import wixWindow
import wixWindow from 'wix-window';

$w.onReady(function () {
  // Initialize GTM data layer
  wixWindow.trackingID = 'GTM-XXXXXX';

  // Push page data
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({
    'pageType': 'wix-page',
    'pageId': $w('#page').id
  });
});

Data Layer Implementation

Basic Data Layer Setup

Add before GTM container code:

<script>
window.dataLayer = window.dataLayer || [];

// Page data
dataLayer.push({
  'platform': 'wix',
  'pageTitle': document.title,
  'pageUrl': window.location.href
});
</script>

Dynamic Page Type Detection

<script>
function getWixPageType() {
  var path = window.location.pathname;

  if (path === '/') return 'homepage';
  if (path.includes('/product-page/')) return 'product';
  if (path.includes('/post/')) return 'blog-post';
  if (path.includes('/cart')) return 'cart';
  if (path.includes('/checkout')) return 'checkout';

  return 'standard';
}

dataLayer.push({
  'pageType': getWixPageType()
});
</script>

Wix Stores Product Page Tracking

For Wix Stores product pages:

<script>
// Wait for Wix product data
if (window.wixEmbedsAPI) {
  window.wixEmbedsAPI.getProductInfo().then(function(product) {
    dataLayer.push({
      'event': 'productView',
      'ecommerce': {
        'detail': {
          'products': [{
            'id': product.id,
            'name': product.name,
            'price': product.price,
            'category': product.collections[0] || ''
          }]
        }
      }
    });
  });
}
</script>

Add to Cart Event

Track Wix Stores cart additions:

<script>
// Listen for add to cart button clicks
document.addEventListener('DOMContentLoaded', function() {
  // Wix Stores add to cart buttons
  var observer = new MutationObserver(function() {
    var addToCartBtns = document.querySelectorAll('[data-hook="add-to-cart"]');

    addToCartBtns.forEach(function(btn) {
      if (!btn.dataset.tracked) {
        btn.addEventListener('click', function() {
          dataLayer.push({
            'event': 'addToCart'
          });
        });
        btn.dataset.tracked = 'true';
      }
    });
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true
  });
});
</script>

Purchase Tracking

Add to the Thank You page custom code:

<script>
if (window.location.pathname.includes('/order/thank-you')) {
  // Extract order data from URL or Wix API
  dataLayer.push({
    'event': 'purchase',
    'ecommerce': {
      'purchase': {
        'actionField': {
          'id': 'ORDER_ID', // Replace with actual order ID
          'revenue': 'TOTAL', // Replace with actual total
          'tax': 'TAX',
          'shipping': 'SHIPPING'
        }
      }
    }
  });
}
</script>

Common GTM Tags for Wix

Google Analytics 4 Tag

  1. In GTM, create GA4 Configuration tag
  2. Enter Measurement ID (G-XXXXXXXXXX)
  3. Trigger: All Pages
  4. Configure parameters as needed

Meta Pixel Tag

  1. Create Custom HTML tag
  2. Paste Facebook Pixel base code
  3. Trigger: All Pages
  4. Create event tags for conversions
  1. Create Google Ads Conversion Tracking tag
  2. Enter Conversion ID and Label
  3. Trigger on purchase event
  4. Map conversion value

Common Triggers

Page View Triggers

Trigger Name Type Conditions
All Pages Page View All pages
Homepage Page View Page Path equals /
Product Pages Page View Page URL contains /product-page/
Blog Posts Page View Page URL contains /post/
Cart Page View Page URL contains /cart
Checkout Page View Page URL contains /checkout
Thank You Page View Page URL contains /thank-you

Event Triggers

Trigger Name Type Conditions
Add to Cart Custom Event Event equals addToCart
Product View Custom Event Event equals productView
Purchase Custom Event Event equals purchase
Form Submit Custom Event Event equals formSubmit

Built-in Variables

Enable these GTM variables:

  • Page URL
  • Page Hostname
  • Page Path
  • Referrer
  • Click Element
  • Click Classes
  • Click ID
  • Click URL
  • Click Text

Custom Variables

Wix Page Type Variable

Type: JavaScript Variable

function() {
  var path = window.location.pathname;

  if (path === '/') return 'homepage';
  if (path.includes('/product-page/')) return 'product';
  if (path.includes('/post/')) return 'blog';
  if (path.includes('/cart')) return 'cart';

  return 'other';
}

Product ID Variable

Type: JavaScript Variable

function() {
  // Extract product ID from Wix page
  var urlParams = new URLSearchParams(window.location.search);
  return urlParams.get('productId') || '';
}

Form Tracking

Wix Forms Tracking

Track Wix form submissions:

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Monitor Wix forms
  var checkForForms = setInterval(function() {
    var forms = document.querySelectorAll('form[data-testid="buttonElement"]');

    if (forms.length > 0) {
      forms.forEach(function(form) {
        if (!form.dataset.tracked) {
          form.addEventListener('submit', function(e) {
            dataLayer.push({
              'event': 'formSubmit',
              'formType': 'wix-form'
            });
          });
          form.dataset.tracked = 'true';
        }
      });
    }
  }, 1000);

  // Stop checking after 10 seconds
  setTimeout(function() {
    clearInterval(checkForForms);
  }, 10000);
});
</script>

Contact Form Tracking

<script>
// Track contact form specifically
window.addEventListener('message', function(event) {
  if (event.data && event.data.eventType === 'CONTACT_FORM_SUBMIT') {
    dataLayer.push({
      'event': 'contactFormSubmit',
      'formLocation': window.location.pathname
    });
  }
});
</script>

Preview and Debug Mode

Using GTM Preview

  1. In GTM, click Preview
  2. Enter your published Wix site URL
  3. Click Connect
  4. Navigate your site to test tags

Important: GTM Preview won't work in Wix Editor preview - must use published site.

Debug Console

// Check data layer
console.log(window.dataLayer);

// Monitor events
dataLayer.push = function() {
  console.log('GTM Event:', arguments);
  Array.prototype.push.apply(this, arguments);
};

Publishing Workflow

Pre-publish Checklist

  • Test in Preview mode on published site
  • Verify data in GA4 real-time reports
  • Test form submissions
  • Check ecommerce tracking (if applicable)
  • Test on mobile devices
  • Verify page load performance

Publishing Steps

  1. Click Submit in GTM
  2. Add version name (e.g., "Initial Wix setup")
  3. Add description
  4. Click Publish
  5. Verify on live site

Wix-specific Notes

  • Republish Wix site if GTM code was added via Custom Code
  • Test after each Wix site publish
  • Wix may cache aggressively - use incognito for testing

Troubleshooting

Issue Possible Cause Solution
GTM not loading Not on Premium plan Upgrade to Premium plan
Tags not firing Wrong trigger Check trigger configuration
Duplicate tracking Multiple GTM containers Remove duplicate code
Forms not tracked Dynamic content loading Use MutationObserver
Product data missing Wix API not loaded Wait for wixEmbedsAPI
Preview not working Using Editor URL Use published site URL
Purchase tracking missing No order data access Add to Thank You page
Cache issues Wix caching Clear cache and test incognito
AJAX navigation Single page app behavior Implement virtual pageviews
Mobile not tracking Responsive site differences Test mobile-specific selectors

Wix-specific Considerations

Wix Editor vs. ADI

  • Wix Editor: Full custom code support
  • Wix ADI: Limited code injection access
  • ADI sites may need to switch to Editor for GTM

Wix Apps Integration

  • Track Wix Bookings events
  • Monitor Wix Stores actions
  • Track Wix Forms submissions
  • Integrate with Wix Members

Single Page Application Behavior

Wix sites often use AJAX navigation:

<script>
// Track URL changes
var lastPath = window.location.pathname;

setInterval(function() {
  if (window.location.pathname !== lastPath) {
    dataLayer.push({
      'event': 'virtualPageview',
      'virtualPath': window.location.pathname
    });
    lastPath = window.location.pathname;
  }
}, 500);
</script>

Advanced Configuration

Member Login Tracking

Track Wix Members area:

<script>
// Check if user is logged in
if (window.wixMembers && window.wixMembers.currentMember) {
  window.wixMembers.currentMember.getMember().then(function(member) {
    dataLayer.push({
      'userStatus': 'logged-in',
      'memberId': member.id
    });
  });
} else {
  dataLayer.push({
    'userStatus': 'guest'
  });
}
</script>

Wix Bookings Tracking

<script>
// Track booking completions
window.addEventListener('message', function(event) {
  if (event.data && event.data.type === 'BOOKING_COMPLETE') {
    dataLayer.push({
      'event': 'bookingComplete',
      'serviceType': event.data.service
    });
  }
});
</script>

Multi-language Sites

Track language selection:

<script>
function getWixLanguage() {
  return document.documentElement.lang || 'en';
}

dataLayer.push({
  'siteLanguage': getWixLanguage()
});
</script>

Performance Optimization

Best Practices

  • Limit total tags to under 15-20
  • Use built-in Wix integrations when available
  • Minimize custom HTML tags
  • Remove unused triggers
  • Monitor page load times
  • Consider asynchronous loading

Performance Monitoring

<script>
window.addEventListener('load', function() {
  var perfData = window.performance.timing;
  var loadTime = perfData.loadEventEnd - perfData.navigationStart;

  dataLayer.push({
    'event': 'pagePerformance',
    'loadTime': loadTime
  });
});
</script>

Privacy and Compliance

GDPR Compliance

Wix has built-in cookie consent:

<script>
// Check Wix cookie consent
function checkWixConsent() {
  // Wait for Wix consent management
  if (window.consentPolicyManager) {
    window.consentPolicyManager.getCurrentConsentPolicy().then(function(policy) {
      if (policy.analytics) {
        // Load GTM when consent granted
        console.log('Analytics consent granted');
      }
    });
  }
}

checkWixConsent();
</script>

Data Privacy Settings

  • Configure GTM consent mode
  • Respect Wix cookie settings
  • Implement data retention policies
  • Handle user data requests

Testing Checklist

  • GTM loads on all pages
  • Data layer initializes properly
  • Page views tracked correctly
  • Product pages fire product events
  • Add to cart works
  • Form submissions tracked
  • Purchase tracking on Thank You page
  • No console errors
  • Mobile functionality tested
  • Different browsers verified
  • Wix Apps integration working

Additional Resources

// SYS.FOOTER