Free GA4 Integration

Free GA4 Integration (freega4)

A free module for integrating Google Analytics 4 (GA4) into PrestaShop.

It injects the GA4 <code>gtag.js</code> snippet and (optionally) sends basic e-commerce events using PrestaShop’s front events.

Features

• Add the GA4 Global Site Tag (<code>gtag.js</code>) to your storefront.
• Back Office configuration:
• Enable/disable the module output.
• Set your GA4 Measurement ID (e.g. <code>G-XXXXXXXXXX</code>).
• Enable E-commerce tracking (beta).
• Choose Vanilla JS implementation for the <code>add_to_cart</code> event (beta).
• GA4 events implemented (when e-commerce tracking is enabled):
• <code>view_item</code> on product page
• <code>add_to_cart</code> when cart is updated via PrestaShop events
• <code>purchase</code> on order confirmation

Requirements

• PrestaShop 1.6+ (as declared by the module).
• For e-commerce tracking the module notes it “Requires PrestaShop > 1.7.6.x”.
• A GA4 property and a valid Measurement ID.

Installation

1. Copy the module folder to:

<code>modules/freega4/</code>

2. In Back Office go to Modules > Module Manager. 3. Find Free GA4 Integration and click Install.

Configuration

Go to Modules > Module Manager > Free GA4 Integration > Configure.

Settings

• Active
• If disabled, the module won’t output any tracking code.

• GA4 ID
• Your GA4 Measurement ID (example: <code>G-XXXXXXXXXX</code>).

• Ecommerce tracking (beta)
• Enables additional GA4 e-commerce events.

• Use vanilla JS
• Uses a Vanilla JS listener instead of jQuery for the <code>add_to_cart</code> event.

What the module outputs

Hooks used

The module registers and uses these hooks:

• <code>displayHeader</code> → outputs the GA4 global tag (<code>views/templates/hook/gtag.tpl</code>).
• <code>displayFooterProduct</code> → outputs <code>view_item</code> event (<code>views/templates/hook/productview.tpl</code>).
• <code>displayFooter</code> → outputs <code>add_to_cart</code> tracking (<code>views/templates/hook/ga4_jscart.tpl</code> or <code>ga4_jscart_vanilla.tpl</code>).
• <code>orderConfirmation</code> → outputs <code>purchase</code> event (<code>views/templates/hook/orderconfirmation.tpl</code>).

Events details

• Global Tag (<code>gtag.tpl</code>)
• Loads <code>https://www.googletagmanager.com/gtag/js?id=G-...</code>
• Calls <code>gtag(&#039;config&#039;, &#039;G-...&#039;)</code>

• Product page (<code>productview.tpl</code>)
• Sends the <code>view_item</code> event.

• Add to cart (<code>ga4_jscart.tpl</code> / <code>ga4_jscart_vanilla.tpl</code>)
• Listens to PrestaShop’s JS event <code>prestashop.on(&#039;updateCart&#039;, ...)</code>.
• Sends <code>add_to_cart</code> when <code>event.reason.linkAction == &#039;add-to-cart&#039;</code>.

• Order confirmation (<code>orderconfirmation.tpl</code>)
• Sends <code>purchase</code> including order totals and item lines.

Notes / Troubleshooting

• Make sure the GA4 ID is correct and the module is Active.
• If you don’t see events in GA4:
• Use GA4 DebugView.
• Check the browser console for JS errors.
• Verify that <code>gtag</code> is defined on the page (the global tag must load).
• If your theme doesn’t load jQuery and you want <code>add_to_cart</code> tracking:
• Enable Use vanilla JS.

License

MIT.

Author / Support

• Author: Tecnoacquisti.com
• Website: https://www.tecnoacquisti.com