Install Google Analytics 4 on Shopify

There are three main methods to install GA4 on your Shopify store, each with different capabilities and limitations.

Method Comparison

Method 1: Native Shopify Integration (Easiest)

Shopify provides a built-in Google Analytics integration in the Sales Channels.

Setup Steps

1. Add Google Sales Channel

   • Go to Settings → Apps and sales channels
   • Click Google (or add it from the Shopify App Store)
   • Connect your Google account

2. Enable Google Analytics

   • In the Google channel, go to Settings
   • Find Google Analytics section
   • Enter your GA4 Measurement ID (format: G-XXXXXXXXXX)
   • Click Save

3. Configure Enhanced Conversions (Optional)

   • In GA4, go to Admin → Data collection and modification → Enhanced conversions
   • Enable enhanced conversions
   • This sends hashed customer data for better attribution

What Gets Tracked (Native Integration)

All Stores:

• Page views
• Basic product views
• Add to cart events
• Purchases (on order confirmation page only)

Shopify Plus Only:

• Checkout step events
• Begin checkout
• Add payment info
• Add shipping info

Limitations of Native Integration

• No customization of events or parameters
• Cannot add custom dimensions or metrics
• Limited control over user ID tracking
• Checkout tracking requires Shopify Plus
• Cannot track cart removals or quantity changes
• No control over consent management

Method 2: Manual Theme Implementation

Add GA4 directly to your theme for more control over implementation.

Setup Steps

1. Access Theme Code

   • Go to Online Store → Themes
   • Click Actions → Edit code on your active theme

2. Add GA4 gtag.js to theme.liquid

   Find </head> in theme.liquid and add above it:

   <!-- 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,
       'user_id': '{{ customer.id }}', // If customer is logged in
       'currency': '{{ cart.currency.iso_code }}'
     });
   </script>
   

   Replace G-XXXXXXXXXX with your GA4 Measurement ID.

3. Add Consent Management (Recommended)

   If using Shopify's Customer Privacy API:

   <script>
     // Wait for consent before initializing GA4
     document.addEventListener('DOMContentLoaded', function() {
       if (window.Shopify && window.Shopify.customerPrivacy) {
         const consent = window.Shopify.customerPrivacy.currentVisitorConsent();
   
         if (consent && consent.analytics) {
           // Initialize GA4 here or update consent mode
           gtag('consent', 'update', {
             'analytics_storage': 'granted'
           });
         }
       }
     });
   
     // Listen for consent changes
     document.addEventListener('visitorConsentCollected', function(event) {
       const consent = event.detail;
       if (consent.analytics) {
         gtag('consent', 'update', {
           'analytics_storage': 'granted'
         });
       }
     });
   </script>
   

4. Save and Test

   • Click Save
   • Visit your store and open GA4 Realtime report
   • Navigate through your store to verify events

Checkout Tracking (Shopify Plus Only)

If you have Shopify Plus and access to checkout.liquid:

1. Access checkout.liquid

   • In theme code editor, find Layout → checkout.liquid

2. Add GA4 to Checkout

   Add the same GA4 script before </head> in checkout.liquid:

   <!-- Google Analytics 4 for Checkout -->
   <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');
   </script>
   

3. Add Checkout Events

   See GA4 Event Tracking for checkout event implementation.

Non-Plus Stores: Order Status Page

For stores without Plus, you can only track on the order confirmation page:

1. Go to Settings → Checkout

2. Scroll to Order status page → Additional scripts

3. Add GA4 purchase tracking:

   <script>
     gtag('event', 'purchase', {
       transaction_id: '{{ order.order_number }}',
       value: {{ total_price | money_without_currency }},
       currency: '{{ currency }}',
       tax: {{ tax_price | money_without_currency }},
       shipping: {{ shipping_price | money_without_currency }},
       items: [
         {% for line_item in line_items %}
         {
           item_id: '{{ line_item.sku }}',
           item_name: '{{ line_item.title }}',
           item_category: '{{ line_item.product.type }}',
           price: {{ line_item.final_price | money_without_currency }},
           quantity: {{ line_item.quantity }}
         }{% unless forloop.last %},{% endunless %}
         {% endfor %}
       ]
     });
   </script>
   

Method 3: Google Tag Manager (Recommended)

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

Why Use GTM?

• Easier to manage: Update tracking without editing theme code
• Better organization: All tags in one place
• Advanced features: Custom events, triggers, variables
• Better performance: Single container load for multiple tags
• Non-technical updates: Marketers can update without developers

Setup Steps

1. Install GTM on Shopify

   See Install Google Tag Manager for full GTM installation guide.

2. Create GA4 Tag in GTM

   Once GTM is installed:

   a. In GTM, go to Tags → New

   b. Click Tag Configuration → Google Analytics: GA4 Configuration

   c. Enter your Measurement ID (G-XXXXXXXXXX)

   d. Configuration Settings (optional):

   • Add user_id variable if tracking logged-in users
   • Add custom parameters for currency, customer type, etc.

   e. Triggering: Select All Pages

   f. Save and name it "GA4 - Configuration"

3. Configure User Properties (Optional)

   In the GA4 Configuration tag, add Fields to Set:

   user_id = {{Customer ID}}  // If logged in
   currency = {{Currency}}
   

   You'll need to create these variables in GTM using Shopify's data layer.

4. Publish Container

   • Click Submit in GTM
   • Add version name and description
   • Click Publish

5. Test

   • Use GTM Preview mode to verify tags fire
   • Check GA4 Realtime reports
   • Verify data layer variables populate correctly

GTM + Shopify Data Layer

Shopify provides a native data layer that GTM can access. See:

• Shopify Data Layer Structure
• GA4 Event Tracking
• GA4 Ecommerce Tracking

Verification & Testing

1. Check GA4 Realtime Reports

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

2. Use GA4 DebugView

Enable debug mode to see detailed event data:

In GTM:

• Use Preview mode
• Events automatically appear in DebugView

Manual Implementation:

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

In GA4:

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

3. Verify Ecommerce Events

Test the full purchase funnel:

1. View product → check view_item event
2. Add to cart → check add_to_cart event
3. Begin checkout → check begin_checkout (Plus only)
4. Purchase → check purchase event
5. Order confirmation → verify transaction details

4. Check for Common Issues

• Duplicate events: Both native integration AND manual code installed
• Missing checkout events: Non-Plus store limitation
• Currency issues: Wrong currency code in parameters
• Missing items array: Product data not properly formatted

Troubleshooting

Events Not Firing

See Events Not Firing Troubleshooting for detailed debugging steps.

Quick checks:

• Verify Measurement ID is correct (starts with G-)
• Check browser console for JavaScript errors
• Ensure ad blockers are disabled for testing
• Verify GTM container is published (if using GTM)

Duplicate Events

Cause: Multiple GA4 implementations on the same page.

Fix:

1. Check for native Shopify Google integration
2. Check theme code for GA4 snippets
3. Check GTM for multiple GA4 tags
4. Check Shopify apps that might add GA4
5. Remove all but one implementation

Checkout Events Missing (Non-Plus)

Cause: Shopify Basic/Standard/Advanced don't allow custom checkout scripts.

Limitation: Cannot track begin_checkout, add_payment_info, or add_shipping_info.

Workaround: Only purchase event available on order confirmation page.

Solution: Upgrade to Shopify Plus for full checkout tracking.

Next Steps

• Configure GA4 Events - Track custom Shopify events
• Set up Ecommerce Tracking - Track products, cart, and purchases
• Install GTM - For easier tag management

For general GA4 concepts, see Google Analytics 4 Guide.