Install Google Analytics 4 on Ecwid

Ecwid provides multiple methods to install GA4 tracking, each with different capabilities depending on your Ecwid plan and host platform.

Method Comparison

Understanding Ecwid's Architecture

Ecwid is a widget-based e-commerce platform that embeds into existing websites:

• Host Page: Your website where Ecwid widget is embedded
• Ecwid Widget: The shopping cart interface (product grid, cart, checkout)
• Tracking Scope: Both host page and widget need tracking setup

Important Considerations

Dual Tracking Environment:

• Host platform may have its own GA4 installation
• Ecwid widget requires separate tracking setup
• Both can coexist if configured correctly

Checkout Flow:

• Ecwid handles full checkout within the widget
• No redirect to external checkout page
• All tracking happens on same domain

Method 1: Built-in Ecwid Integration (Easiest)

Ecwid provides native GA4 integration in the Control Panel.

Requirements

• Ecwid Venture plan or higher
• GA4 Measurement ID
• No coding required

Setup Steps

1. Access Ecwid Control Panel

   • Log in to my.ecwid.com
   • Go to Settings → General → Tracking & Analytics

2. Add Google Analytics

   • Find Google Analytics section
   • Click Connect Google Analytics
   • Enter your GA4 Measurement ID (format: G-XXXXXXXXXX)
   • Click Save

3. Configure Tracking Options

   Enable Ecommerce Tracking:

   • Toggle Track ecommerce to ON
   • This sends purchase events with full transaction details

   Enable Enhanced Ecommerce (recommended):

   • Toggle Enhanced ecommerce to ON
   • Tracks product views, add to cart, checkout steps

   User ID Tracking (optional):

   • Toggle Track user ID to ON
   • Associates actions with logged-in customers

4. Test Integration

   • Visit your store
   • Open GA4 Realtime report
   • Navigate through products, add to cart
   • Verify events appear

What Gets Tracked (Built-in Integration)

Page Views:

• ✓ Product detail views
• ✓ Category page views
• ✓ Cart page views
• ✓ Checkout page views

Ecommerce Events:

• ✓ view_item - Product views
• ✓ add_to_cart - Items added to cart
• ✓ begin_checkout - Checkout started
• ✓ purchase - Order completed
• ✓ Full product data (ID, name, price, category, quantity)

User Properties:

• ✓ Customer ID (if logged in)
• ✓ Customer email (hashed, if enhanced conversions enabled)

Limitations of Built-in Integration

• Requires Ecwid Venture plan ($35/month) or higher
• Cannot customize event parameters
• Cannot add custom dimensions
• No control over consent management
• Cannot track custom events (newsletter signup, etc.)
• Limited debugging capabilities

Method 2: Custom Code Injection

Add GA4 directly to your Ecwid store using custom code injection.

Requirements

• Any Ecwid plan
• Access to Ecwid Control Panel
• Basic JavaScript knowledge (for customization)

Setup Steps

1. Access Custom Code Section

   • Ecwid Control Panel → Settings → General → Tracking & Analytics
   • Scroll to Custom JavaScript Code section
   • Click Add custom code

2. Add GA4 Base Tracking

   <!-- Google Analytics 4 -->
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
   <script>
     window.dataLayer = window.dataLayer || [];
     function gtag(){dataLayer.push(arguments);}
     gtag('js', new Date());
   
     gtag('config', 'G-XXXXXXXXXX', {
       'send_page_view': true,
       'currency': 'USD', // Change to your default currency
       'allow_google_signals': true,
       'allow_ad_personalization_signals': true
     });
   </script>
   

   Replace G-XXXXXXXXXX with your GA4 Measurement ID.

3. Add Ecwid Event Tracking

   Use the Ecwid JavaScript API to track ecommerce events:

   <script>
   // Wait for Ecwid to load
   Ecwid.OnAPILoaded.add(function() {
   
     // Track product views
     Ecwid.OnPageLoad.add(function(page) {
       if (page.type === 'PRODUCT') {
         // Get product data
         Ecwid.getProduct(page.productId, function(product) {
           gtag('event', 'view_item', {
             currency: product.currency || 'USD',
             value: product.defaultDisplayedPrice,
             items: [{
               item_id: product.id.toString(),
               item_name: product.name,
               item_category: product.categoryIds[0] || '',
               price: product.defaultDisplayedPrice,
               quantity: 1
             }]
           });
         });
       }
     });
   
     // Track add to cart
     Ecwid.OnCartChanged.add(function(cart) {
       // Detect items added
       if (cart.items && cart.items.length > 0) {
         var lastItem = cart.items[cart.items.length - 1];
   
         gtag('event', 'add_to_cart', {
           currency: cart.currency || 'USD',
           value: lastItem.price,
           items: [{
             item_id: lastItem.product.id.toString(),
             item_name: lastItem.product.name,
             price: lastItem.price,
             quantity: lastItem.quantity
           }]
         });
       }
     });
   
     // Track checkout started
     Ecwid.OnPageLoad.add(function(page) {
       if (page.type === 'CHECKOUT_ADDRESS') {
         gtag('event', 'begin_checkout', {
           currency: page.cart.currency || 'USD',
           value: page.cart.total,
           items: page.cart.items.map(function(item) {
             return {
               item_id: item.product.id.toString(),
               item_name: item.product.name,
               price: item.price,
               quantity: item.quantity
             };
           })
         });
       }
     });
   
     // Track purchase
     Ecwid.OnOrderPlaced.add(function(order) {
       gtag('event', 'purchase', {
         transaction_id: order.vendorOrderNumber,
         value: order.total,
         tax: order.tax,
         shipping: order.shippingOption.shippingMethodName ? order.shippingOption.shippingRate : 0,
         currency: order.currency || 'USD',
         items: order.items.map(function(item) {
           return {
             item_id: item.product.id.toString(),
             item_name: item.product.name,
             price: item.price,
             quantity: item.quantity
           };
         })
       });
     });
   
   });
   </script>
   

4. Save and Publish

   • Click Save
   • Changes take effect immediately

Host Page Tracking

If your host platform (WordPress, Wix, etc.) has its own GA4 installation:

Option 1: Use Same Measurement ID

• Both host and Ecwid send to same GA4 property
• Simplest approach for unified reporting

Option 2: Use Different Measurement IDs

• Separate GA4 properties for host and Ecwid
• Better for multi-tenant scenarios
• More complex reporting

Option 3: Use GTM (recommended)

• Single GTM container manages both
• See Method 3 below

Method 3: Google Tag Manager (Recommended)

GTM provides the most flexibility and is recommended for most Ecwid stores.

Why Use GTM with Ecwid?

• Centralized management: All tracking in one place
• Easy updates: Change tracking without editing code
• Advanced features: Custom events, triggers, variables
• Better consent management: GDPR/CCPA compliance
• Works with host platform: Unified tracking across host and widget

Setup Steps

1. Install GTM Container

   If host platform doesn't have GTM:

   Add GTM to Ecwid's Custom JavaScript Code section:

   <!-- 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>
   

   Replace GTM-XXXXXXX with your GTM Container ID.

   If host platform already has GTM:

   • Use existing GTM container
   • Add Ecwid-specific tags to same container

2. Create GA4 Configuration Tag

   In GTM:

   a. Go to Tags → New

   b. Tag Configuration → Google Analytics: GA4 Configuration

   c. Enter your Measurement ID (G-XXXXXXXXXX)

   d. Configuration Settings (optional):

   currency = USD
   send_page_view = true
   

   e. Triggering: Select All Pages

   f. Save as "GA4 - Configuration"

3. Add Ecwid Data Layer Events

   Ecwid automatically pushes ecommerce events to dataLayer. Create triggers for:

   • view_item - Product viewed
   • add_to_cart - Item added to cart
   • begin_checkout - Checkout started
   • purchase - Order completed

   See Ecwid Data Layer for complete structure.

4. Create GA4 Event Tags

   For each ecommerce event, create a GA4 Event tag:

   Example: Add to Cart Event

   a. Tags → New

   b. Tag Configuration → Google Analytics: GA4 Event

   c. Configuration Tag: Select "GA4 - Configuration"

   d. Event Name: add_to_cart

   e. Event Parameters: Add from data layer variables

   f. Triggering: Create custom event trigger for Ecwid add_to_cart

   g. Save

5. Publish Container

   • Click Submit
   • Add version name: "Initial Ecwid GA4 Setup"
   • Click Publish

6. Test with Preview Mode

   • Enable Preview in GTM
   • Navigate to your store
   • Verify tags fire on events
   • Check GA4 DebugView

GTM + Ecwid Integration Benefits

• No plan restrictions (works with free Ecwid)
• Full control over event parameters
• Easy A/B testing of tracking configurations
• Consent management integration
• Works seamlessly with host platform GTM

Host Platform Considerations

Ecwid can be embedded on various platforms. Here's how GA4 setup differs:

WordPress

If using WordPress GA4 plugin:

• Plugin tracks host pages only
• Use Ecwid's built-in integration OR custom code for widget

Recommended approach:

• Install GTM via plugin (e.g., Google Tag Manager for WordPress)
• Configure Ecwid events in GTM
• Unified tracking across site and store

Wix

Wix has native GA4 integration:

• Tracks Wix pages automatically
• Does NOT track Ecwid widget
• Must add Ecwid tracking separately

Setup:

1. Use Wix's GA4 integration for pages
2. Add Ecwid built-in integration for store
3. Use same Measurement ID for both

Squarespace

Squarespace supports GA4 via code injection:

• Add GA4 to Squarespace settings
• Separately configure Ecwid tracking
• Both send to same property

Custom HTML Sites

Full control over implementation:

• Add GTM to host page <head>
• Configure Ecwid tracking in GTM
• Single container manages everything

Shopify (Ecwid as additional store)

Dual store scenario:

• Shopify has its own tracking
• Ecwid adds second store
• Use different Measurement IDs to separate data

Plan Limitations

Ecwid features vary by plan:

Recommendation: Use GTM (free) if on Free plan, or built-in integration if on Venture+.

Verification & Testing

1. Check GA4 Realtime Reports

• Open GA4 → Reports → Realtime
• Navigate your Ecwid store
• Verify events appear within 30 seconds

2. Use GA4 DebugView

Enable debug mode:

gtag('config', 'G-XXXXXXXXXX', {
  'debug_mode': true
});

In GA4:

• Admin → DebugView
• View events with full parameters in real-time

3. Test Full Purchase Funnel

1. View product → Check view_item event
2. Add to cart → Check add_to_cart event
3. Start checkout → Check begin_checkout event
4. Complete test order → Check purchase event
5. Verify transaction details match order

4. Use Browser Console

// Check if GA4 loaded
console.log(window.gtag);

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

// Check Ecwid API loaded
console.log(typeof Ecwid !== 'undefined');

Troubleshooting

Events Not Firing

See Events Not Firing Troubleshooting for detailed debugging.

Quick checks:

• Verify Measurement ID is correct (starts with G-)
• Check browser console for JavaScript errors
• Ensure Ecwid API has loaded before tracking code runs
• Disable ad blockers for testing
• Verify GTM container is published (if using GTM)

Duplicate Events

Cause: Multiple tracking implementations active simultaneously.

Check for:

• Ecwid built-in integration ON
• Custom code in Ecwid settings
• GTM tags firing
• Host platform GA4 installation tracking store events

Fix: Choose ONE method and disable others.

Host Page vs Widget Tracking

Issue: Host pages tracked but not Ecwid widget (or vice versa).

Diagnosis:

• Check if GA4 is on host page <head>
• Check if Ecwid integration is configured
• Verify GTM is on both host and widget

Fix: Ensure tracking covers both host and embedded widget.

Mobile App Considerations

Ecwid has native mobile apps. If you offer app checkout:

• Mobile apps use separate tracking
• Configure in Ecwid Control Panel → Mobile Apps
• Use Firebase for app analytics

Next Steps

• Configure GA4 Event Tracking - Track custom Ecwid events
• Set up Ecommerce Tracking - Detailed product and transaction tracking
• Install GTM - For easier tag management

For general GA4 concepts, see Google Analytics 4 Guide.