Google Tag Manager - dataLayer has previous value of items for new Event (Next JS App)

Question

I have two Event of GA on same page. First Event works on page view that is view_promotion and second is select_promotion .

for view_promotion, Iam sending data like =>

const items = newItems.map((item: any , index:any) => ({
        item_id: `${index}`,
        item_name: `SKU_123${index}`,
        promotion_id: `${data?.promotion_id}-inner SBC`,
        promotion_name: `${data?.promotion_name}-inner SBC`,
        creative_name: `${item?.creative_name}-inner SBC`,
        creative_slot: `${item?.creative_slot}-inner SBC`,
        event_id: new Date().getTime(),
      }));
 window.dataLayer.push({
        event: "view_promotion",
        creative_name: newItems
          ?.map((item: any) => `${item?.creative_name}-outer SBC`)
          .join("|"),
        creative_slot: newItems
          ?.map((item: any) => `${item?.creative_slot}-outer SBC`)
          .join("|"),
            items: items,
      });

and for select_promotion is like =>

 const itemData = {
        promotion_id: `${promotion_id}-inner SBC`,
        promotion_name: `${promotion_name}-inner SBC`,
        creative_name: `${creative_name}-inner SBC`,
        creative_slot: `${creative_slot}-inner SBC`,
      };
  window.dataLayer.push({
        event: 'select_promotion',
        creative_name: `${creative_name}-outer SBC`,
        creative_slot: `${creative_slot}-outer SBC`,
        items: [itemData],  // Push the item for select_promotion
      });

I tried to remove old data in GTM like this in my next JS App for view_promotion and for select_promotion .

 window.dataLayer.push({ items: [] });
    window.dataLayer.push({ event: "gtm.js", items: []  });
    window.dataLayer.push({
      event: "clear_items",
      items: []
    });

But still I am able to see old items array in select_promotion in GTM output section , In GTM preview mode Api call is correct but in OUTPUT section dataLayer is showing old items array of length 6 . which we send on view_promotion .

Even I check console.log before and after GA fire event like this console.log("Before push:", JSON.parse(JSON.stringify(window.dataLayer))); but it is showing correct data (for select_promotion items with lenght 1). Even i check dataLayer extension that is also showing correct data that means for select_promotion items of lenght 1 . but in preview mode of GTM it is showing items with lenght of 6, which triggered for view_promotion (GTM showing old items array data) .

Due to that in my GA dashboard data of click is showing in correct because it is sending click event for all 6 items array .

Can anyone please let me know how to fix this issues ? . Is this issue is from frontend ? Api section of GTM preview mode is like below this is correct => GTM Api section of select_promotion

Below is output section of GTM which is incorrect because it contain all 6 items which get trigger for view_promotion GTM datalayer section of select_promotion

Answer 1

Here's the solution from Google's documentation:

Google recommends clearing the previous ecommerce object before pushing new data:

dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.

Document link

When implemented correctly, you should see the preview like this:

This is necessary because dataLayer values accumulate from previous push operations. Therefore, Google recommends clearing the ecommerce object by setting it to null before pushing new ecommerce data.

This practice helps prevent data duplication and ensures accurate tracking of your ecommerce events.