GA4 Integration with Odoo 19:
Track E-commerce Events, Conversions & Revenue Attribution

{
    "name": "GA4 E-commerce Tracking",
    "version": "19.0.1.0.0",
    "category": "Website",
    "summary": "Full GA4 e-commerce event tracking with data layer",
    "depends": ["website_sale"],
    "data": [
        "views/templates.xml",
    ],
    "assets": {
        "web.assets_frontend": [
            "ga4_ecommerce/static/src/js/ga4_tracker.js",
        ],
    },
    "installable": True,
    "auto_install": False,
    "license": "LGPL-3",
}

/** @odoo-module **/
import publicWidget from "@web/legacy/js/public/public_widget";

publicWidget.registry.GA4Tracker = publicWidget.Widget.extend({
    selector: "#wrapwrap",
    events: {
        "click .js_add_cart_json, .a-submit": "_onAddToCart",
        "click .js_delete_product": "_onRemoveFromCart",
    },

    /**
     * Push a GA4 e-commerce event, clearing stale data first.
     * @param {string} eventName - GA4 event name
     * @param {Object} ecommerceData - GA4 ecommerce payload
     */
    _pushGA4Event(eventName, ecommerceData) {
        window.dataLayer = window.dataLayer || [];
        // Clear previous ecommerce object
        window.dataLayer.push({ ecommerce: null });
        window.dataLayer.push({
            event: eventName,
            ecommerce: ecommerceData,
        });
    },

    /**
     * Fires add_to_cart when user clicks Add to Cart.
     * Reads product data from the closest product card or detail.
     */
    _onAddToCart(ev) {
        const $product = $(ev.currentTarget).closest(
            "[data-product-product-id]"
        );
        if (!$product.length) return;

        const productId = $product.data("product-product-id");
        const productName = $product.find(".product_name, h5, h3")
            .first().text().trim();
        const price = parseFloat(
            $product.find("[data-product-price]")
                .data("product-price") || 0
        );
        const currency = document.querySelector(
            "meta[name='currency']"
        )?.content || "USD";

        this._pushGA4Event("add_to_cart", {
            currency: currency,
            value: price,
            items: [{
                item_id: String(productId),
                item_name: productName,
                price: price,
                quantity: 1,
            }],
        });
    },

    /**
     * Fires remove_from_cart when user removes an item.
     */
    _onRemoveFromCart(ev) {
        const $line = $(ev.currentTarget).closest("tr, .js_cart_line");
        const productName = $line.find(".td-product_name, .cart-line-name")
            .first().text().trim();
        const price = parseFloat(
            $line.find("[data-line-price]").data("line-price") || 0
        );

        this._pushGA4Event("remove_from_cart", {
            items: [{
                item_name: productName,
                price: price,
                quantity: 1,
            }],
        });
    },
});

export default publicWidget.registry.GA4Tracker;

<!-- begin_checkout: fires on /shop/checkout -->
<template id="ga4_begin_checkout"
          inherit_id="website_sale.checkout"
          name="GA4 Begin Checkout">
  <xpath expr="//div[@id='checkout']" position="after">
    <script t-if="order">
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({ ecommerce: null });
      window.dataLayer.push({
        event: "begin_checkout",
        ecommerce: {
          currency: "<t t-esc="order.currency_id.name"/>",
          value: <t t-esc="order.amount_total"/>,
          items: [
            <t t-foreach="order.order_line" t-as="line">
            {
              item_id: "<t t-esc="line.product_id.default_code or line.product_id.id"/>",
              item_name: "<t t-esc="line.product_id.name"/>",
              price: <t t-esc="line.price_unit"/>,
              quantity: <t t-esc="line.product_uom_qty"/>,
              discount: <t t-esc="line.discount"/>
            }<t t-if="not line_last">,</t>
            </t>
          ]
        }
      });
    </script>
  </xpath>
</template>

<!-- purchase: fires on /shop/confirmation -->
<template id="ga4_purchase_confirmation"
          inherit_id="website_sale.confirmation"
          name="GA4 Purchase Confirmation">
  <xpath expr="//div[@id='oe_structure_website_sale_confirmation_1']"
         position="after">
    <script t-if="order">
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({ ecommerce: null });
      window.dataLayer.push({
        event: "purchase",
        ecommerce: {
          transaction_id: "<t t-esc="order.name"/>",
          currency: "<t t-esc="order.currency_id.name"/>",
          value: <t t-esc="order.amount_total"/>,
          tax: <t t-esc="order.amount_tax"/>,
          shipping: <t t-esc="order.carrier_id and order.delivery_price or 0"/>,
          coupon: "<t t-esc="order.applied_coupon_ids[:1].code if order.applied_coupon_ids else ''"/>",
          items: [
            <t t-foreach="order.order_line.filtered(lambda l: not l.is_delivery)" t-as="line">
            {
              item_id: "<t t-esc="line.product_id.default_code or line.product_id.id"/>",
              item_name: "<t t-esc="line.product_id.name"/>",
              item_category: "<t t-esc="line.product_id.categ_id.name"/>",
              price: <t t-esc="line.price_unit"/>,
              quantity: <t t-esc="line.product_uom_qty"/>,
              discount: <t t-esc="line.discount"/>
            }<t t-if="not line_last">,</t>
            </t>
          ]
        }
      });
    </script>
  </xpath>
</template>

// ── STEP 1: Set defaults BEFORE gtag.js loads ──
// Inject via QWeb template inheriting website.layout
// with position="before" on the GA4 script tag.

window.dataLayer = window.dataLayer || [];
function gtag() { window.dataLayer.push(arguments); }

// Set defaults to denied (GDPR-safe)
gtag("consent", "default", {
  ad_storage: "denied",
  ad_user_data: "denied",
  ad_personalization: "denied",
  analytics_storage: "denied",
  wait_for_update: 500,
});
gtag("set", "url_passthrough", true);
gtag("set", "ads_data_redaction", true);

// ── STEP 2: Update on user acceptance ──
// Odoo's cookie banner uses .o_cookie_consent
document.addEventListener("click", function(e) {
  if (e.target.closest(".o_cookie_consent .js_accept")) {
    gtag("consent", "update", {
      ad_storage: "granted",
      ad_user_data: "granted",
      ad_personalization: "granted",
      analytics_storage: "granted",
    });
  }
});