Install Google Tag Manager on Ecwid | OpsBlu Docs

Install Google Tag Manager on Ecwid

Complete guide to installing and configuring Google Tag Manager on Ecwid stores for centralized tracking management.

Google Tag Manager (GTM) provides centralized management for all tracking tags on your Ecwid store, making it easier to add, update, and manage analytics without editing code.

Why Use GTM with Ecwid?

Benefits

  • Centralized management: All tracking tags in one place
  • No code edits: Update tracking without modifying store code
  • Version control: Track changes and roll back if needed
  • Built-in testing: Preview mode before publishing
  • Better performance: Single container loads all tags efficiently
  • Team collaboration: Multiple users can manage tags
  • Works with host platform: Unified tracking across host and Ecwid widget

GTM vs Direct Implementation

Feature GTM Direct Code
Ease of updates Easy (no code) Hard (edit code)
Multiple tags Single container Multiple scripts
Testing Built-in preview Manual testing
Version control Yes No
Team access Yes Limited
Performance Optimized Can be slow
Learning curve Medium Easy

Recommendation: Use GTM for most stores unless you have only one or two simple tracking tags.

Prerequisites

  • Google Tag Manager account (free)
  • Access to Ecwid Control Panel
  • Basic understanding of GTM concepts

Setup Overview

  1. Create GTM account and container
  2. Install GTM on Ecwid
  3. Configure Ecwid data layer events
  4. Add tracking tags (GA4, Meta Pixel, etc.)
  5. Test with Preview mode
  6. Publish container

Step 1: Create GTM Account and Container

Create Account

  1. Go to tagmanager.google.com

  2. Click "Create Account"

  3. Account Setup:

    • Account Name: Your company name
    • Country: Select your country
    • Check data sharing settings (optional)

  4. Container Setup:

    • Container Name: Your store name
    • Target Platform: Web

  5. Accept Terms of Service

  6. Copy Container Code

    You'll see two code snippets:

    • Head snippet (goes in <head>)
    • Body snippet (goes in <body>)

    Copy both for next step.

GTM Container ID

Your container ID format: GTM-XXXXXXX

You'll need this ID for installation.

Step 2: Install GTM on Ecwid

There are two scenarios depending on your host platform.

Scenario A: Host Platform DOES NOT Have GTM

Install GTM in Ecwid's custom code section.

  1. Access Custom Code

    • Log in to my.ecwid.com
    • Go to Settings → General → Tracking & Analytics
    • Scroll to Custom JavaScript Code section
    • Click Add custom code

  2. Add GTM Head Code

    Paste this 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 -->

<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 actual container ID.

  3. Save

    Click Save button.

Scenario B: Host Platform ALREADY Has GTM

Use your existing GTM container for both host and Ecwid.

No additional installation needed - your existing GTM container will automatically work with the Ecwid widget if it's on the same page.

Note: If host platform GTM is NOT on same page as Ecwid widget (e.g., Ecwid on subdomain), install GTM separately in Ecwid using Scenario A steps.

Verification

Check if GTM is installed correctly:

  1. Visit your store

  2. Open browser console (F12)

  3. Run command:

    console.log(window.google_tag_manager);

  4. Expected output: Object with your container ID

    If returns undefined, GTM is not loaded correctly.

Step 3: Configure Data Layer

Ecwid automatically pushes ecommerce events to the data layer. Verify it's working:

Check Data Layer

  1. Visit product page

  2. Open console (F12)

  3. View data layer:

    console.table(window.dataLayer);

  4. Look for Ecwid events:

    • product_viewed
    • cart_changed
    • etc.

If Data Layer is Empty

Ecwid should populate data layer automatically. If not:

  1. Check Ecwid version: Update to latest
  2. Check JavaScript errors: Fix any console errors
  3. Manual data layer setup: See Data Layer documentation

Step 4: Add Tracking Tags

Now add your tracking tags in GTM.

Example: Add GA4 Configuration Tag

  1. In GTM, go to Tags → New

  2. Tag Configuration:

  3. Configuration:

    • Measurement ID: Enter your GA4 ID (G-XXXXXXXXXX)
    • Configuration Settings: Add any custom parameters

  4. Triggering:

    • Click Triggering
    • Select All Pages

  5. Name and Save:

    • Name: "GA4 - Configuration"
    • Click Save

Example: Add GA4 Event Tag

  1. Tags → New

  2. Tag Configuration:

    • Select Google Analytics: GA4 Event

  3. Configuration:

    • Configuration Tag: Select "GA4 - Configuration"
    • Event Name: view_item
    • Event Parameters: Add parameters from data layer

  4. Triggering:

    • Create trigger for Ecwid product view event
    • Type: Custom Event
    • Event name: product_viewed

  5. Save as "GA4 - View Item"

See Data Layer documentation for complete event mapping.

Example: Add Meta Pixel Base Tag

  1. Tags → New

  2. Tag Configuration:

    • Select Custom HTML

  3. HTML:

    <script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');

fbq('init', '1234567890123456');
fbq('track', 'PageView');
</script>

    Replace 1234567890123456 with your Pixel ID.

  4. Triggering: All Pages

  5. Save as "Meta Pixel - Base Code"

Step 5: Create Variables

Create GTM variables to extract Ecwid data.

Example: Product ID Variable

  1. Variables → New

  2. Variable Configuration:

    • Type: Data Layer Variable
    • Data Layer Variable Name: ecommerce.detail.products.0.id
    • Data Layer Version: Version 2

  3. Name: DLV - Product ID

  4. Save

Example: Cart Total Variable

  1. Variables → New

  2. Variable Configuration:

    • Type: Data Layer Variable
    • Data Layer Variable Name: ecommerce.cart.total

  3. Name: DLV - Cart Total

  4. Save

See Data Layer Variables for complete list.

Step 6: Create Triggers

Create triggers for Ecwid-specific events.

Example: Product Viewed Trigger

  1. Triggers → New

  2. Trigger Configuration:

    • Type: Custom Event
    • Event name: product_viewed

  3. Name: Ecwid - Product Viewed

  4. Save

Example: Purchase Trigger

  1. Triggers → New

  2. Trigger Configuration:

    • Type: Custom Event
    • Event name: order_placed

  3. Name: Ecwid - Order Placed

  4. Save

Common Ecwid Triggers

Create triggers for:

  • product_viewed - Product detail view
  • cart_changed - Cart updated
  • checkout_started - Checkout initiated
  • order_placed - Purchase completed

Step 7: Test with Preview Mode

Always test before publishing.

Enable Preview Mode

  1. In GTM, click "Preview" (top right)

  2. Enter your store URL

  3. Click "Connect"

Test Flow

  1. Navigate to store - Tag Assistant opens

  2. View product - Check product_viewed event fires

  3. Add to cart - Check cart_changed event fires

  4. Start checkout - Check checkout_started fires

  5. Complete test order - Check order_placed fires

Verify in Tag Assistant

For each event:

  • Tags Fired: Should show your tags
  • Data Layer: Should show Ecwid data
  • Variables: Should populate correctly

Debug Issues

Tag not firing:

  • Check trigger conditions
  • Verify event name matches exactly
  • Check for JavaScript errors

Variable undefined:

  • Check data layer path
  • Verify event has fired
  • Check variable name

Step 8: Publish Container

Once testing is complete, publish your container.

  1. Click "Submit" (top right)

  2. Version Name: E.g., "Initial Ecwid Setup"

  3. Version Description: Describe changes

  4. Publish

Post-Publish Verification

  1. Clear browser cache

  2. Visit store in incognito mode

  3. Verify tracking works:

    • GA4 Realtime reports
    • Meta Events Manager
    • Other analytics platforms

  4. Monitor for 24-48 hours for any issues

Host Platform Integration

WordPress

Option 1: GTM Plugin

Use Google Tag Manager for WordPress:

  1. Install plugin
  2. Enter GTM Container ID
  3. Plugin adds GTM to all pages (including Ecwid widget)

Option 2: Manual

Add GTM to theme header.php and footer.php.

Wix

Wix has built-in GTM support:

  1. Settings → Tracking & Analytics
  2. Google Tag Manager
  3. Enter Container ID
  4. Works automatically with Ecwid widget

Squarespace

Add GTM via code injection:

  1. Settings → Advanced → Code Injection
  2. Header: Add GTM head code
  3. Footer: Add GTM body code

Custom HTML Sites

Add GTM code directly to your HTML:

<!DOCTYPE html>
<html>
<head>
  <!-- Google Tag Manager -->
  <script>(function(w,d,s,l,i){...})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
  <!-- End Google Tag Manager -->
</head>
<body>
  <!-- Google Tag Manager (noscript) -->
  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"...></iframe></noscript>
  <!-- End Google Tag Manager (noscript) -->

  <!-- Your Ecwid store widget -->
  <div id="my-store-123456"></div>
</body>
</html>

Advanced Configuration

Multiple Containers

Use separate containers for different purposes:

  • Master Container: Main tracking (GA4, Meta Pixel)
  • Testing Container: For testing new tags
  • Partner Container: For agency/partner access

Install multiple containers:

// Load multiple containers
gtag('js', new Date());
gtag('config', 'GTM-XXXXXXX'); // Container 1
gtag('config', 'GTM-YYYYYYY'); // Container 2

Custom Data Layer Variables

Push custom Ecwid data to data layer:

Ecwid.OnAPILoaded.add(function() {

  Ecwid.OnPageLoad.add(function(page) {
    window.dataLayer = window.dataLayer || [];
    dataLayer.push({
      'event': 'ecwid_page_load',
      'ecwid_page_type': page.type,
      'ecwid_page_id': page.productId || page.categoryId || null
    });
  });

});

Add this to Ecwid Custom JavaScript Code section.

Server-Side GTM

For advanced tracking and privacy compliance:

  1. Set up Server-Side GTM container in Google Cloud
  2. Configure Ecwid webhooks to send server-side events
  3. Route events through server-side GTM
  4. Better data privacy and tracking accuracy

See Server-Side GTM documentation for setup.

Workspace and Version Control

Create Workspace

For team collaboration:

  1. Workspaces → Create
  2. Name workspace: E.g., "Holiday Campaign"
  3. Make changes in workspace
  4. Submit and merge when ready

Version History

View and restore previous versions:

  1. Versions (sidebar)
  2. View version details
  3. Restore if needed

Troubleshooting

GTM Not Loading

Check:

  • Container ID correct (GTM-XXXXXXX)
  • No JavaScript errors in console
  • Code in correct location

Test:

console.log(window.google_tag_manager);

Should show GTM object with your container ID.

Tags Not Firing

Common causes:

  • Container not published
  • Trigger conditions not met
  • JavaScript errors blocking execution
  • Event name misspelled

Debug:

  • Use Preview mode
  • Check Tag Assistant
  • Verify data layer events

Data Layer Empty

Causes:

  • Ecwid not loaded yet
  • JavaScript errors
  • Old Ecwid version

Fix:

  • Update Ecwid to latest version
  • Check console for errors
  • Manually implement data layer (see Data Layer guide)

Duplicate Events

Cause: Multiple GTM containers or duplicate tracking implementations.

Fix:

  • Check for multiple GTM containers
  • Verify host platform doesn't also have tracking
  • Remove duplicate implementations

Best Practices

1. Use Descriptive Naming

Good names:

  • Tag: "GA4 - View Item Event"
  • Trigger: "Ecwid - Product Viewed"
  • Variable: "DLV - Product ID"

Bad names:

  • Tag: "Tag 1"
  • Trigger: "Trigger"
  • Variable: "Var"

2. Add Descriptions

Document what each tag, trigger, and variable does.

3. Use Folders

Organize tags into folders:

  • Google Analytics
  • Meta Pixel
  • Custom Events
  • Utilities

4. Test Before Publishing

Always use Preview mode before publishing changes.

5. Version Naming

Use clear version names:

  • "Initial Setup - GA4 and Meta Pixel"
  • "Add Custom Events for Holiday Campaign"
  • "Fix Purchase Event Duplicate Tracking"

6. Limit Users

Only give GTM access to team members who need it.

7. Regular Audits

Quarterly:

  • Remove unused tags
  • Check for deprecated tags
  • Update tag configurations
  • Review triggers

Next Steps

For general GTM concepts, see Google Tag Manager Guide.

返回顶部