Google Analytics

Implement server-side events with Google Analytics Measurement Protocol.

Introduction

Google Analytics provides a JS SDK to push events to their servers. To do server-to-server communication, you need to use Google Analytics Measurement Protocol.

Prerequisites

To use Google Analytics Measurement Protocol, you need to get your API Secret and your measurement ID.

• Measurement ID
• Measurement Protocol API Secret

info

Please follow the Google Analytics Measurement Protocol Documentation to learn how to get them.

Setup Front-Commerce

Update your app/config/serverEvents.ts file:

app/config/serverEvents.ts

import {
  ConsoleIntegration,
  AnalyticsIntegration,
} from "@front-commerce/core/server-events/integrations";
// higlihjt-next-line
import analytics from "@front-commerce/core/analytics";

export default {
  //...
  integrations: [
    // ...
    new AnalyticsIntegration("front-commerce", [
      analytics.GA4MeasurementProtocol(
        "G-XXXXXXXX", // Your Analytics Measurement ID
        "XXXXXXXXXXXXXXXXXXXXXX" // Your Analytics Measurement Protocol Secret
      ),
    ]),
  ],
};

Then in analytics configuration, enable server tracking in analytics configuration:

app/config/analytics.ts

//...
export default {
  analytics: {
    enable: true,
    debug: process.env.NODE_ENV !== "production",
    serverTracking: {
      enabled: true,
    },
    //..
  } satisfies AnalyticsConfig,
};

And that's it! Now every event will be submitted to Google Analytics by your server!

Compatible events

Front-Commerce event	Google Analytics event
Products Searched	search
Product List Viewed	view_item_list
Product Clicked	select_content
Product Viewed	view_item
Product Added	add_to_cart
Product Removed	remove_from_cart
Cart Viewed	view_cart
Checkout Started	begin_checkout
Payment Info Entered	add_payment_info
Order Completed	purchase
User Logged in	login
User Created	sign_up
Product Added to Wishlist	add_to_wishlist