Native Events & Custom Events

Introduction

Google Analytics (GA) is a tool that collects and processes data on user interactions within a website or app. It allows tracking events such as clicks, page views, and conversions, providing insights for optimization.
This documentation explains the types of events we have and how to trigger events for GA.

Currently, events are classified into two types: view and action, each following a specific pattern.

View-Type Events

View events follow a specific pattern and include:

• page_view
• view_cart
• begin_checkout
• {step}_view

The format of these events is:

{
    "event": "unknown",
    "cartId": "string",
    "ecommerce": "EcommerceDetails",
    "ecommerceV2": {
        "ecommerce": "EcommerceDetails"
    },
    "user": "UserDetails",
    "payment": "PaymentDetails"
}

 

Action-Type Events

Action events follow two distinct patterns. Some trigger a variation of the corresponding view event, while others follow the same pattern adopted by VTEX.

Examples of action events:

• page_view
• view_cart
• add_to_cart
• remove_from_cart
• begin_checkout
• add_profile_info_enriched
• add_payment_info
• add_shipping_info
• refund
• purchase

New Event Pattern

Some action events are triggered together with the corresponding view event. For example, when a user adds profile information, an action event can be logged alongside the relevant view information.

 {  
    "event": "add_profile_info_enriched",  
    "cartId": "string",  
    "user": {  
        "userType": "guest" | "identified",  
        "userContactInfo": {  
            "userId": "string",  
            "firstName": "string",  
            "lastName": "string"  
        },  
        "userDemographicInfo": ["string"],  
        "userOptinNewsLetter": "boolean"  
    }  
}

VTEX Pattern

In the VTEX pattern, events always trigger the ecommerce object, adding only a few specific pieces of information.
For example, in the add_shipping_info event, in addition to the standard ecommerce data, the shipping_tier (google naming convention) attribute is included, representing the name of the selected SLA for the shipping package.

{
    "event": "add_shipping_info",
    "ecommerce": {
        "currency": "string",
        "value": "number",
        "coupon": "string",
        "shipping_tier": "string",
        "items": ["items"]
    }
}

Creating a Custom Event

To trigger a custom event, simply use the push function from useAnalytics in our SDK. After that, you can call push at any point in the application where you want to log the event.

import React from "react";
import { useAnalytics } from "@ollieshop/sdk/react";

export const AddBPO = () => {  
  const { push } = useAnalytics();
  
  useEffect(() => {
    push("custom_event", {
      event: "add_bpo",
      ...
    });
  }, []);

  return (
    ...
  );
};

export default AddBPO;

Creating a Custom Event (In Development)

Developers can trigger both custom events and our native events. To do this, simply use the push function from useAnalytics in our SDK and pass the event name along with the cart object as a parameter.

const { cart } = useCart();
const { push } = useAnalytics();

useEffect(() => {
  push("add_shipping_info", cart);
}, []);

To-Do

• Add a variation of the add_profile_info_enriched event without enriched or rename the existing event.
• Standardize action-type events:
• All must contain the ecommerce object to maintain GA structure.
• Include specific action information to enrich the event.
• These details were added to new events, but existing ones remained unchanged.
• Add missing action-type events, such as:
• select_sla
• add_coupon
• Decide whether the refund event should be kept or removed.