👋 Hello Radan Jovic,

To implement e-commerce events (like add_to_cart or purchase) in Google Analytics 4 using Google Tag Manager and the @next/third-parties/google package's sendGTMEvent function in Next.js, the process involves leveraging the dataLayer.

1. Do you know what is the DataLayer?

The dataLayer is a JavaScript array used by GTM to store and pass structured event data (e.g., user interactions, e-commerce events) to GTM. GTM processes this data and sends it to the configured analytics platforms (in this case, GA4).

When you use sendGTMEvent, it essentially pushes an object to the dataLayer with a specific event name and its associated parameters. GTM then picks up this data and forwards it to GA4 based on your tag and trigger configuration.

2. How Does sendGTMEvent Work?

The sendGTMEvent function pushes a structured object to the dataLayer. The object includes:

• Event Name: A label like add_to_cart or purchase that identifies the interaction.
• Parameters: Data associated with the event (e.g., product details, transaction values, quantities).

For example:

• add_to_cart event includes details like product name, price, and quantity.
• purchase event includes details like transaction ID, total value, and tax.

4. How the DataLayer and GTM Work Together

1. Event Data Push to DataLayer:
   When a user performs an action (e.g., adds a product to the cart and purchase), the sendGTMEvent function pushes an object with event data to the dataLayer.

   Example dataLayer object for an add_to_cart and purchase event:

   {
     event: "add_to_cart and purchase",
     ecommerce: {
       currency: "USD",
       value: 50.0,
       items: [
         {
           item_id: "SKU_12345",
      item_name: "Stan and Friends Tee",
      affiliation: "Google Merchandise Store",
      coupon: "SUMMER_FUN",
      discount: 2.22,
      index: 0,
      item_brand: "Google",
      item_category: "Apparel",
      item_category2: "Adult",
      item_category3: "Shirts",
      item_category4: "Crew",
      item_category5: "Short sleeve",
      item_list_id: "related_products",
      item_list_name: "Related Products",
      item_variant: "green",
      location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
      price: 10.01,
      quantity: 3,
         }
       ]
     }
   }
   

2. GTM Tag Triggers:
   GTM listens for specific events in the dataLayer (e.g., add_to_cart). When it detects the event, it triggers the corresponding GA4 event tag.

3. GA4 Event Sent:
   The GA4 tag in GTM forwards the event data to your GA4 property. The ecommerce data gets parsed and displayed in GA4’s e-commerce reports.

📚 Could You Share Your Website URL I Want to Audit Your Website and How to Setup GA4 events according to GA4 Requirements. I will explain everything. I enabled lots of dataLayer from custom-made websites. I can enable dataLayer and event ( like add_to_cart, purchase ) setup in GA4