Gtm
Integration & Usage
How to use the Method ?
When user interacts with the website, we need to track some necessary event. To do that, we use our method which we created by using the package provided by the package.
example: User is adding an product to the cart and we need to tack the event so that we can determine the product's performance.
import { logEvent } from "~/utils/event-logger"; // import the method
function handleAddToCart() {
logEvent({
options: {
eventAction: "click", // user action
eventProperties: "", // additional properties
ecommerce: {
// ecommerce properties for sending the ecommerce data which google analytics needs to track the performance of the product
currency: "EUR",
value: 123, // price of the product
value_excluding_tax: 111, // price of the product without tax
delivery_method_code: 001, // delivery method code which is choosen by the user
item_list_name: "Related products", // name of the item list
item_list_id: "related_products", // id of the item list
items: formattedItem, // this includes the product in a format which is required by google analytics and it can understand
},
eventInteraction: true,
eventLabel: `User action: 123 added to cart`, // event label
eventName: "add_to_cart", // required and important to track the event this naming comvension is required by google analytics
},
});
}
// here is the formattedItem which is required by google analytics
const formattedItem = [
{
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,
},
{
item_id: "SKU_12346",
item_name: "Google Grey Women's Tee",
affiliation: "Google Merchandise Store",
coupon: "SUMMER_FUN",
discount: 3.33,
index: 1,
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: "gray",
location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
price: 21.01,
quantity: 2,
},
];
How to format our data into the format which google analytics needs ?
The google analytics requires the data in a specific format. so we need to format our data into the format which google analytics needs. For that we need to create a reusable method which will help us to do that.
// Function to format single or multiple products into the required structure
export const formatEcommerceItems = (
products: Product | any[],
listName = "Related products",
listId = "related_products"
) => {
// Ensure products is an array
const itemsArray = Array.isArray(products) ? products : [products];
return itemsArray.map((product, index) => ({
item_id: product.code,
item_name: product.name,
affiliation: "Your Store",
coupon: product.coupon,
discount: product?.prices?.raw.discount_value || 0,
index: index,
item_brand: product.brand,
item_category: product.taxonomies?.[0]?.[0]?.name,
item_category2: product.taxonomies?.[0]?.[1]?.name,
item_category3: product.taxonomies?.[0]?.[2]?.name,
item_list_name: listName,
item_list_id: listId,
item_variant: product.pack_size,
price: product?.prices?.raw.gross,
price_excluding_tax: product?.prices?.raw.net,
quantity: product.quantity,
}));
};
To lern more about the ecommerce properties please click here