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

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

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

• reactjs
• next.js
• google-analytics
• frontend
• google-tag-manager

Share Improve this question Follow edited Feb 10 at 12:02 Dipu Roy asked Feb 4 at 11:57 Dipu RoyDipu Roy 111 bronze badge 2

• "I tried to remove old data" - that makes no sense, you can not "un-push" something, once you pushed it onto the data layer. "Is this issue is from frontend ?" - how should we know; so far you have only shown us the isolated snippets that push the actual event data, but not where / how these snippets actually get invoked. – C3roe Commented Feb 4 at 12:12
• first one is view_promotion , when user scroll and that component come in UI that time view_promotion get trigger and I am sending all six items in a array Second one is select_promotion it get invoked when we click on any item of that component and , for that I need to send data related to same items . But when i check in preview mode of GTM , view_promotion data is showing correct but for select_promotion items array is having all items which get trigger for view_promotion . that means some how GTM is persesting old data . – Dipu Roy Commented Feb 10 at 11:53

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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.