How to Set Up GA4 in PrestaShop: Step-by-Step

published on 16 November 2024

Setting up Google Analytics 4 (GA4) in PrestaShop is crucial for tracking your store's performance. Here's a quick guide:

  1. Create a GA4 property
  2. Add tracking code to PrestaShop
  3. Set up e-commerce events
  4. Configure data streams
  5. Test your setup

Key benefits of GA4 for PrestaShop:

  • Tracks website and app data in one place
  • Uses first-party cookies for better privacy
  • Provides cross-device user journey insights
  • Future-proof (Universal Analytics shuts down July 2023)

To get started:

  • Check your PrestaShop version compatibility
  • Set up your GA4 account
  • Prepare your data layer

Before You Start

Let's get your PrestaShop store ready for Google Analytics 4 (GA4). Here's what you need to do:

GA4 Account Setup

First up: set up your GA4 account. If you haven't already, create a new GA4 property. This is crucial because GA4 is taking over from Universal Analytics (UA) soon.

"Starting on July 1, 2023, standard Universal Analytics properties will stop processing new data. To maintain your website measurement, you'll need a Google Analytics 4 property."

When setting up GA4, make sure your property settings match your business. Get the currency and time zone right - it's key for accurate reporting.

PrestaShop Version Check

PrestaShop

Not all PrestaShop versions work with GA4. Check if yours does. For example, the PrestaShop Google Tag Manager module works with version 8.x.x and supports multi-store.

Want to play it safe? Try this:

  1. Copy your live store to a test server.
  2. Test GA4 there first.
  3. Back up your files and database before changing anything.

Data Layer Setup

The data layer is your bridge between PrestaShop and GA4. It's how you send e-commerce data for tracking.

Here's the deal with data layers:

  • They hold info about user actions and e-commerce events.
  • You need to set them up right to track e-commerce data.
  • You can set them up yourself, get a developer to do it, or use a plugin if there's one.

One PrestaShop user said: "I am not a developer but trying to send e-commerce data to datalayer." They added data to the order-confirmation.tpl file. This can work, but make sure you're catching all the important e-commerce events.

How to Install GA4

Want to add Google Analytics 4 (GA4) to your PrestaShop store? Here's how to do it using Google Tag Manager or server-side tracking.

Using Google Tag Manager

Google Tag Manager

Google Tag Manager (GTM) makes adding GA4 to PrestaShop a breeze:

1. Install the PrestaShop Google Tag Manager module

This module works with PrestaShop 8.x.x and supports multi-store setups.

2. Set up the module

In your PrestaShop admin panel:

  • Find and install the GTM module
  • Enable "Insert GTM snippet"
  • Add your GTM web container ID

3. Configure GTM

In your Google Tag Manager account:

  • Create a new GA4 configuration tag
  • Set it to fire on all pages
  • Create triggers for e-commerce events (page views, add to cart, purchases)

GTM lets you manage tracking codes without touching your PrestaShop code. Pretty neat, right?

"The PrestaShop module for server GTM automatically adds a web GTM snippet to every page of your online store, making tracking scripts resistant to ad blockers and enriching the dataLayer with product and user data", explains a GTM integration specialist.

Server-Side Tracking

Want better data accuracy and privacy? Try server-side tracking:

1. Install a server-side tracking module

Options include Google Integrator 4 or Converge.

2. Set up the module

  • Add your GA4 Measurement ID (looks like 'G-XXXXXXXXXX')
  • Enter the secret API key for Measurement Protocol
  • Add necessary CRON tasks

3. GTM setup (if using)

Add a "conversion linking tag" but don't add forwarding events to GA4 in GTM.

Server-side tracking perks:

  • Tracks at the web server level for better accuracy
  • Reduces client-side scripts for better privacy
  • Handles ad blockers like a champ

"The Google Integrator module sends a rich set of e-commerce events and transactions based on order status using Measurement Protocol and server-side API", notes a PrestaShop integration expert.

Whichever method you choose, remove other Google tracking modules to avoid conflicts. And always test your setup to make sure you're collecting data correctly.

sbb-itb-38e9f15

Setting Up GA4

Let's get your GA4 up and running in your PrestaShop store. We'll cover creating a data stream, adding the tracking code, and setting up store tracking.

Set Up Data Stream

First, let's create a data stream in GA4. This is how GA4 will collect data from your store.

1. Create a new data stream

Head to your GA4 account's Admin section. In the Property column, click "Data Streams" then "Add Stream". Pick "Web" as your platform.

2. Enter your website details

Type in your PrestaShop store's URL and name your stream. Something like "PrestaShop Main Store" works well.

3. Configure enhanced measurement

GA4 offers some great enhanced measurement options. For e-commerce, turn on page views, scrolls, outbound clicks, site search, video engagement, and file downloads.

"Enhanced measurement in GA4 is a game-changer for e-commerce. It automatically captures key user interactions without additional coding", says Ali Shah, founder of Web Star Research.

Add Tracking Code

Now, let's add the GA4 tracking code to your store.

1. Get your Measurement ID

In your GA4 property, go to Admin > Data Streams and click your new stream. You'll see a Measurement ID that looks like "G-XXXXXXXXXX".

2. Install Google Tag Manager (GTM)

If you haven't already, get the PrestaShop Google Tag Manager module. It works with PrestaShop 8.x.x and supports multi-store setups.

3. Add GA4 tag in GTM

In your GTM account, create a new GA4 Configuration tag. Set it to fire on all pages and put in your Measurement ID.

Set Up Store Tracking

Last step: set up tracking for specific store activities. This is where GA4 really shines for e-commerce.

1. Enable Enhanced Ecommerce

In your GA4 property, go to Admin > Ecommerce Settings and turn on "Enable Enhanced Ecommerce Reporting".

2. Set up e-commerce events

GA4 uses an event-based model. You'll want to track key e-commerce events like view_item, add_to_cart, begin_checkout, and purchase.

You'll need to push these events to the data layer. Here's how you might track a purchase event:

dataLayer.push({
  event: "purchase",
  ecommerce: {
    transaction_id: "{{ order.id }}",
    value: "{{ order.total_paid }}",
    tax: "{{ order.total_tax }}",
    shipping: "{{ order.total_shipping }}",
    items: [
      {
        item_name: "{{ product.name }}",
        item_id: "{{ product.reference }}",
        price: "{{ product.price }}",
        quantity: "{{ product.quantity }}"
      }
    ]
  }
});

3. Set up conversions

In GA4, go to Configure > Conversions and add your key events (like "purchase") as conversions. This lets you track your most important business outcomes.

And there you have it! Your GA4 is now set up and ready to track your PrestaShop store. Happy analyzing!

Track Store Events

Now that GA4 is set up for your PrestaShop store, let's focus on tracking customer actions. This is where GA4 really shines for e-commerce.

Basic Store Events

Here are the key events you should track:

  1. View Item: Fires when a customer looks at a product page
  2. Add to Cart: Triggers when someone adds a product to their cart
  3. Begin Checkout: Starts when a customer kicks off the checkout process
  4. Purchase: The big one - tracks completed sales

To set these up, you'll need the Google Integrator module or some custom code. Here's what a purchase event might look like:

dataLayer.push({
  event: "purchase",
  ecommerce: {
    transaction_id: "{{ order.id }}",
    value: "{{ order.total_paid }}",
    tax: "{{ order.total_tax }}",
    shipping: "{{ order.total_shipping }}",
    items: [
      {
        item_name: "{{ product.name }}",
        item_id: "{{ product.reference }}",
        price: "{{ product.price }}",
        quantity: "{{ product.quantity }}"
      }
    ]
  }
});

Don't forget to set "purchase" as a conversion in GA4. It's key for tracking sales and measuring your store's performance.

Check Event Data

After setting up your events, make sure they're sending the right info to GA4:

  1. Use Google Tag Manager Preview mode to see which tags are firing and what data they're sending.
  2. Check GA4 DebugView for real-time event data.
  3. Make sure your event names in GA4 match exactly what you're sending. For example, use "add_to_cart" not "addToCart".

Here's a real-world example:

"Using Tag Manager Preview mode, the tags are firing, but I am not seeing any e-commerce related events in GA4 (purchase, add to cart, etc)." - A user on WordPress.org

This user's problem is common: events fire but don't show up in GA4. It's often due to mismatched event names or wrong GA4 setup.

To fix this, double-check your GA4 tag setup in Google Tag Manager. Make sure the event name is set to {{event}}, not {{ecommerce}}. This small tweak can make a big difference in your data collection.

Check Your Setup

After setting up GA4 for your PrestaShop store, you need to make sure everything's working right. Here's how to test your events and fix common issues.

Test Events

Use GA4's DebugView to check if your setup is capturing data correctly. It lets you watch events and user properties in real-time.

To use DebugView:

  1. Turn on debug mode for client-side and server-side containers
  2. Add a 'debug_mode' parameter to event data sent to GA4
  3. Open the DebugView report in your GA4 property

If you don't see events in DebugView, try refreshing the report. It can be glitchy sometimes.

You can also use the "Datalayer Checker" Chrome extension:

  1. Install it in Chrome
  2. Turn off ad blockers for your store's domain
  3. Accept all cookies on your consent banner
  4. Make a test order (don't use free orders - they don't go to the order confirmation page)
  5. Look for the "purchase" event and its value in the Datalayer Checker

If you see the "purchase" event, your Google Analytics tag is probably working. If not, you might need to dig deeper.

Fix Common Problems

Even with careful setup, things can go wrong. Here's how to fix typical GA4 setup issues:

1. Missing reports

Make sure all important events (clicks, form submissions, transactions) are set up right in GA4. Use the GA Debugger Chrome extension to spot and fix tracking problems.

2. DebugView not working

  • Turn off browser extensions that might block GA4 (like uBlock Origin, Ghostery)
  • Clear your browser cache and cookies, then reload the page
  • Try a different browser or an incognito window
  • Check the browser console for GA4-related errors

3. "(not set)" source/medium for transactions

  • Update to the latest version of your GA4 module
  • Clear your store's cache
  • Double-check your Google services setup

4. GTM not working

  • Look for 'gtm.js' in your website's source code
  • Turn on Preview and Debug mode in GTM to check the connection
  • Use Chrome's developer tools to check for errors in the Console and look at the status of 'gtm.js' in the Network tab

"Regular maintenance and attention to detail in implementation can ensure accurate tracking and reporting of conversions." - Ali Shah, founder of Web Star Research

If you're still having trouble after trying these fixes, you might want to talk to a GA4 expert. Companies like Web Star Research know GA4 inside and out and can help with tricky setups.

Next Steps

Great job setting up GA4 for your PrestaShop store! You're now on track to better understand your customers and boost your e-commerce game. But don't stop here. Let's look at how to squeeze even more value from your new GA4 setup.

Dive Into Advanced GA4 Features

GA4 packs a punch with tools that go beyond basic tracking:

  • Predictive Metrics: GA4's crystal ball uses machine learning to guess what your customers might do next. It can even estimate how likely a user is to buy something in the next week.
  • Cross-Platform Tracking: Got a mobile app too? GA4 can follow user journeys across both your app and PrestaShop store. It's like having eyes everywhere!
  • Custom Audiences: Slice and dice your users into specific groups based on how they behave, who they are, or whatever criteria you dream up. Perfect for laser-focused marketing.

Team Up with Google Ads

GA4 and Google Ads are like peanut butter and jelly. Together, they let you:

  • Bring GA4 conversions into Google Ads to fine-tune your campaigns
  • Build remarketing audiences using GA4 data
  • Use GA4 insights to guide your bidding strategies

Unleash Enhanced Reporting

GA4's reporting game is stronger than ever. Check out:

  • Funnel Analysis: See exactly where customers bail out of your conversion path. It's like a treasure map for fixing your sales funnel.
  • User Lifetime Reports: Get the big picture of what your customers are worth over their entire relationship with your store.
  • Pathing Analysis: Follow the breadcrumbs of how users navigate your PrestaShop store. It's like being a detective, but for user behavior.

Keep Your Finger on the Pulse

GA4 is always changing. New features pop up all the time, so stay alert. Google's always cooking up new ways to help your PrestaShop store succeed.

"Google recommends creating both GA4 and Universal Analytics properties for the time being." - Tecnoacquisti.com

You're all set with GA4, but don't ditch Universal Analytics just yet. Keep it running until July 1, 2023, when it stops tracking new data. This way, you can compare notes and make sure you're not missing anything in the switch.

Related posts

Read more