Google Analytics 4 Setup on 3dcart (Shift4Shop)

Step-by-step guide to implementing GA4 on 3dcart/Shift4Shop using native integration, Global Footer, and GTM methods.

This guide covers three methods for implementing Google Analytics 4 on 3dcart (now Shift4Shop): the native admin integration, Global Footer implementation, and Google Tag Manager.

Prerequisites

Before implementing GA4 on 3dcart/Shift4Shop:

Create a GA4 Property:
- Sign in to Google Analytics
- Create a new GA4 property for your store
- Note your Measurement ID (format: G-XXXXXXXXXX)
Verify Store Access:
- Admin access to your 3dcart/Shift4Shop store
- Access to Settings → General or Settings → Design sections
Choose Implementation Method:
- Native Integration: Easiest, basic tracking
- Global Footer: More control, custom events
- GTM: Most flexible, recommended for advanced tracking

Method 1: Native Admin Panel Integration (Recommended for Beginners)

The built-in Google Analytics integration provides automatic setup with basic ecommerce tracking.

Installation Steps

Navigate to Analytics Settings:
- Log in to 3dcart/Shift4Shop admin panel
- Go to Settings → General → Analytics
- Or go to Marketing → Analytics
Enter GA4 Measurement ID:
- Find the Google Analytics Account Number field
- Enter your GA4 Measurement ID (G-XXXXXXXXXX)
- Click Save
Enable Ecommerce Tracking:
- Check Enable Enhanced Ecommerce
- Enable Track Product Impressions
- Enable Track Product Clicks
- Click Save

What's Tracked Automatically

The native integration tracks:

Page views on all store pages
Product impressions on category pages
Product detail views
Add to cart events (basic)
Transactions on order confirmation

Limitations

Cannot customize event parameters, triggers, or tracking logic beyond the built-in options
Basic implementation of GA4 events
Cannot customize event parameters easily
No access to advanced GA4 features
May not capture all ecommerce events

Note: For full GA4 ecommerce tracking with custom parameters, use Method 2 or Method 3.

Manual implementation via Global Footer provides full control over GA4 configuration and event tracking.

Navigate to Design Settings:
- Go to Settings → Design → Advanced
- Scroll to Global Footer section
Remove Old Tracking (if present):
- Remove any existing Google Analytics (UA) code
- Remove GA4 code if already present from native integration
- Check for duplicate implementations

Step 2: Add GA4 Base Script

Add this code to the Global Footer section:

<!-- Google Analytics 4 Base Configuration -->
<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,
    'allow_google_signals': true,
    'cookie_flags': 'SameSite=None;Secure'
  });
</script>

Important: Replace G-XXXXXXXXXX with your actual GA4 Measurement ID (in both places).

Step 3: Add Page Type Tracking

Enhance tracking with 3dcart page context:

<script>
  // Detect page type based on URL and elements
  var pageType = 'other';

  if (window.location.pathname === '/' || window.location.pathname === '/default.asp') {
    pageType = 'home';
  } else if (window.location.pathname.indexOf('/product') !== -1) {
    pageType = 'product';
  } else if (window.location.pathname.indexOf('/category') !== -1) {
    pageType = 'category';
  } else if (window.location.pathname.indexOf('/cart') !== -1) {
    pageType = 'cart';
  } else if (window.location.pathname.indexOf('/checkout') !== -1) {
    pageType = 'checkout';
  } else if (window.location.pathname.indexOf('/receipt') !== -1) {
    pageType = 'confirmation';
  }

  // Send page view with page type
  gtag('event', 'page_view', {
    'page_type': pageType,
    'page_location': window.location.href,
    'page_path': window.location.pathname
  });
</script>

Step 4: Configure Enhanced Measurement

In Google Analytics:
- Go to Admin → Data Streams
- Click your web data stream
- Toggle on Enhanced Measurement
Enable Recommended Events:
- Scrolls (90% scroll depth)
- Outbound clicks
- Site search
- Video engagement
- File downloads

Step 5: Save and Verify

Save Changes:
- Click Save in Global Footer settings
- Changes take effect immediately
Clear Store Cache:
- Go to Settings → General → Store Settings
- Look for cache clearing option (if available)
- Or wait 5-10 minutes for cache to refresh

Step 6: Verify Installation

Use Google Tag Assistant:

Install Google Tag Assistant Chrome Extension
Visit your 3dcart/Shift4Shop store
Open Tag Assistant
Verify GA4 tag fires on page load

Check Real-Time Reports:

Go to Google Analytics
Navigate to Reports → Realtime
Visit your store in a different browser tab
Verify your visit appears in real-time report

Method 3: Google Tag Manager (Advanced, Most Flexible)

For the most flexible implementation, use GTM to manage GA4 and other tracking tags.

Why Use GTM?

Benefits:

Manage all tracking from one interface
No code changes needed after initial setup
Easy A/B testing of tracking configurations
Built-in debugging and preview mode
Version control for all tracking changes

Step 1: Install GTM

Follow the GTM Setup Guide to install Google Tag Manager on your 3dcart store.

Step 2: Create GA4 Configuration Tag

In GTM, create a new tag:
- Tag Type: Google Analytics: GA4 Configuration
- Measurement ID: G-XXXXXXXXXX
- Tag Name: GA4 - Configuration
Configure Tag Settings:
- Send a page view event when this configuration loads: Checked
- Configuration Parameters:
  - allow_google_signals: true
  - cookie_flags: SameSite=None;Secure
Set Trigger:
- Trigger: Initialization - All Pages
Save Tag

Step 3: Create Page View Tag (Optional)

If you want custom page view tracking:

Create GA4 Event Tag:
- Tag Type: Google Analytics: GA4 Event
- Configuration Tag: \{\{GA4 - Configuration\}\}
- Event Name: page_view
Add Event Parameters:
- page_type: Use custom JavaScript variable (see data layer guide)
- page_location: \{\{Page URL\}\}
- page_path: \{\{Page Path\}\}
Trigger: Page View - All Pages

Step 4: Publish Container

Click Submit in GTM
Name the version: "Initial GA4 Setup"
Click Publish

Verify GTM Implementation

Use GTM Preview Mode:
- Click Preview in GTM
- Enter your store URL
- Verify GA4 tags fire correctly
Check GA4 Real-Time:
- Open GA4 Reports → Realtime
- Confirm events are being received

3dcart/Shift4Shop-Specific Configuration

Using Template Variables

3dcart provides template variables for dynamic content:

<script>
  // Customer tracking (on logged-in pages)
  gtag('set', 'user_properties', {
    'customer_id': '[customerid]',
    'customer_type': '[customertypeid]'
  });

  // Product page tracking
  gtag('event', 'page_view', {
    'page_type': 'product',
    'product_id': '[productid]',
    'product_name': '[productname]',
    'product_price': parseFloat('[productprice]')
  });
</script>

Available Template Variables:

[customerid] - Customer ID
[productid] - Product ID
[productname] - Product name
[productprice] - Product price
[categoryid] - Category ID
[categoryname] - Category name

Order Confirmation Tracking

On the receipt/confirmation page, add transaction tracking:

In Global Footer, add conditional code:

<script>
  // Only fire on order confirmation page
  if (window.location.pathname.indexOf('/receipt') !== -1) {
    gtag('event', 'purchase', {
      transaction_id: '[invoicenumber]',
      affiliation: 'Online Store',
      value: parseFloat('[invoicetotal]'),
      currency: 'USD',
      tax: parseFloat('[invoicetax]'),
      shipping: parseFloat('[invoiceshipping]'),
      items: [
        // Items array would need custom implementation
        // See ecommerce tracking guide for details
      ]
    });
  }
</script>

For complete ecommerce tracking with items array, see GA4 Ecommerce Tracking.

Multi-Store Configuration

If managing multiple 3dcart stores:

Option 1: Separate Properties

Create different GA4 properties for each store
Use different Measurement IDs in each store

Option 2: Single Property with Data Streams

Use one GA4 property
Create separate data streams for each store
Use different Measurement IDs

Option 3: Single Property with Custom Dimension

Use same Measurement ID
Add store identifier as custom dimension:

gtag('config', 'G-XXXXXXXXXX', {
  'custom_map': {
    'dimension1': 'store_name'
  }
});

gtag('event', 'page_view', {
  'store_name': 'Store A'
});

Troubleshooting

GA4 Tag Not Firing

Check these items:

Verify Measurement ID:
- Confirm G-XXXXXXXXXX is correct
- Check for typos or extra spaces
- Verify in GA4 Admin → Data Streams
Check Global Footer:
- Ensure code is saved in Global Footer
- Verify no JavaScript errors in browser console (F12)
- Check that script loads in page source (view source)
Clear Browser Cache:
- Clear browser cache and cookies
- Test in incognito/private browsing
- Try different browser
Check for Conflicts:
- Look for duplicate GA implementations
- Check for JavaScript errors from other scripts
- Disable browser extensions (especially ad blockers)

Duplicate Page Views

Causes:

Both native integration AND manual implementation active
Multiple GA4 scripts in Global Footer
GTM and direct implementation both running

Fix:

Choose ONE implementation method
Remove code from all other locations
If using native integration, clear the Analytics field in Settings
If using GTM, remove direct GA4 scripts from Global Footer

Data Not Appearing in Reports

Allow Processing Time:

Real-time reports: Immediate (within seconds)
Standard reports: 24-48 hours for full processing

Verify Data Stream:

Go to GA4 Admin → Data Streams
Check that data stream is active
Verify Measurement ID matches implementation

Check DebugView:

Enable debug mode: Add ?debug_mode=true to URL
Go to GA4 Admin → DebugView
Verify events are being received

Events Not Capturing Template Variables

Problem: Template variables showing literal text like [productid] instead of actual values.