How to Install Google Tag Manager on Duda | OpsBlu Docs

How to Install Google Tag Manager on Duda

Add GTM to Duda using the site-wide head HTML injection or widget. Covers container snippet placement and dynamic page dataLayer variables.

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

Prerequisites

  • Google Tag Manager container created
  • GTM Container ID (GTM-XXXXXXX)
  • Duda site editing access

Installation

Duda has built-in GTM support:

  1. Open your site in Duda editor
  2. Go to Site Settings (gear icon)
  3. Navigate to Site Settings > Google Tag Manager
  4. Enter your Container ID (GTM-XXXXXXX)
  5. Click Save
  6. Publish your site

Benefits:

  • Automatic head/body code placement
  • Duda-optimized loading
  • Works with all page types

Method 2: Manual Code Injection

For custom configurations:

Head HTML:

  1. Go to Site Settings > Head HTML
  2. Paste the GTM head code:
<!-- 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 HTML: 3. Go to Site Settings > Body HTML 4. 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 container ID
  2. Publish your site

Verification

Check Installation

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

Preview Mode Steps

  1. In GTM, click Preview
  2. Enter your live Duda site URL
  3. Site opens with GTM debugger
  4. Verify "Container Found" message
  5. Check which tags are firing

Data Layer Configuration

Duda's Built-in Data Layer

Duda ecommerce sites have a built-in data layer via dmAPI:

// Available on ecommerce pages
window.dmAPI.getProductInfo()  // Returns current product data
window.dmAPI.getCartInfo()     // Returns cart data

// Example product data structure
{
  "id": "product-123",
  "name": "Product Name",
  "price": 29.99,
  "currency": "USD"
}

Custom Data Layer Events

Add custom data layer pushes in Head HTML:

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

  // Push page data
  dataLayer.push({
    'pageType': 'product',
    'pageCategory': 'electronics'
  });
</script>

Ecommerce Data Layer

For GA4 ecommerce via GTM:

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Check if on product page
  if (window.dmAPI && window.dmAPI.getProductInfo) {
    var product = window.dmAPI.getProductInfo();
    if (product) {
      dataLayer.push({
        'event': 'view_item',
        'ecommerce': {
          'items': [{
            'item_id': product.id,
            'item_name': product.name,
            'price': product.price,
            'currency': product.currency || 'USD'
          }]
        }
      });
    }
  }
});
</script>

Common Tags to Configure

Google Analytics 4

  1. Tags > New > GA4 Configuration
  2. Enter Measurement ID
  3. Trigger: All Pages
  4. Save and publish

Meta Pixel

  1. Tags > New > Custom HTML
  2. Paste Meta Pixel base code
  3. Trigger: All Pages
  4. Save and publish

Conversion Tracking

  1. Create conversion tags (Google Ads, Meta, etc.)
  2. Set triggers based on Duda events
  3. Use data layer variables for dynamic values

Trigger Examples

Add to Cart

Create a Custom Event trigger:

  • Trigger Type: Custom Event
  • Event Name: add_to_cart

Then add this to Head HTML to fire the event:

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Listen for add to cart buttons (adjust selector as needed)
  document.querySelectorAll('.add-to-cart-button').forEach(function(btn) {
    btn.addEventListener('click', function() {
      var product = window.dmAPI.getProductInfo();
      dataLayer.push({
        'event': 'add_to_cart',
        'ecommerce': {
          'items': [{
            'item_id': product.id,
            'item_name': product.name,
            'price': product.price
          }]
        }
      });
    });
  });
});
</script>

Form Submissions

  1. Create a Form Submission trigger in GTM
  2. Or use Custom Event with Duda form listener:
<script>
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('form').forEach(function(form) {
    form.addEventListener('submit', function() {
      dataLayer.push({
        'event': 'form_submit',
        'form_id': form.id || 'unknown'
      });
    });
  });
});
</script>

For GDPR compliance:

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

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

Update consent when user accepts:

gtag('consent', 'update', {
  'analytics_storage': 'granted',
  'ad_storage': 'granted'
});

Troubleshooting

GTM Not Loading

  1. Check container ID is correct
  2. Verify site is published
  3. Clear Duda's CDN cache
  4. Check for JavaScript errors

Tags Not Firing

  1. Use GTM Preview Mode
  2. Check trigger conditions
  3. Verify data layer values
  4. Confirm no consent blocking

Ecommerce Events Missing

  1. Verify on correct page type
  2. Check dmAPI availability
  3. Confirm data layer pushes working
  4. Test in browser console

Next Steps

返回顶部