How to Install Google Tag Manager on Volusion | OpsBlu Docs

How to Install Google Tag Manager on Volusion

Add GTM to your Volusion store using the built-in header/footer code editor. Covers container snippet placement and ecommerce dataLayer setup.

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

Prerequisites

Installation

Step 1: Get GTM Code

  1. Log into Google Tag Manager
  2. Select your container
  3. Click container ID to get code snippets
  4. Copy both snippets

Step 2: Add to Volusion Templates

Header Code:

  1. Go to Design > File Editor
  2. Open template_header.html or header.html
  3. Add immediately after opening <head>:
<!-- 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 Code:

  1. In the same file or body template, add after opening <body>:
<!-- 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. Save templates
  3. Clear template cache

Data Layer Setup

Basic Data Layer

Add before GTM code:

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

Product Page Data Layer

Add to product template:

<script>
  dataLayer.push({
    'event': 'view_item',
    'ecommerce': {
      'items': [{
        'item_id': '%product_code%',
        'item_name': '%product_name%',
        'price': %product_price%,
        'currency': 'USD'
      }]
    }
  });
</script>

Purchase Data Layer

Add to order confirmation:

<script>
  dataLayer.push({
    'event': 'purchase',
    'ecommerce': {
      'transaction_id': '%order_id%',
      'value': %order_total%,
      'currency': 'USD',
      'items': []
    }
  });
</script>

Verification

  1. GTM Preview Mode: Click Preview in GTM, enter store URL
  2. Tag Assistant: Use browser extension
  3. View Source: Confirm GTM code present

Common Tags

GA4 Configuration

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

Meta Pixel

  1. Tags > New > Custom HTML
  2. Paste pixel code
  3. Trigger: All Pages

Troubleshooting

GTM not loading:

  • Clear template cache
  • Verify correct template edited
  • Check for code errors

Data layer empty:

  • Verify on correct page type
  • Check variable syntax
  • Test in browser console

Next Steps

Nach oben