window.dataLayer push more key value in the same event

Question

In a ReactJS app, in the root.tsx, push an event "website_pageview" with pageInfo

        window.dataLayer.push({
            event: "website_pageview",
            pageInfo: {
                path: window.location,
                title: window.document.title,
            }
        });

In another route file blog.tsx which contains tags and authors, how can I push more key-value to the existing pageInfo in the same event: "website_pageview"? I tried the following

        window.dataLayer[0].push({
            pageInfo: {
                tags: {categoryList},
                author: {authorList}
            }
        });

But it will return 2 entries as following when console.log `window.dataLayer``

(2)[
 {
   pageInfo: {
      tags: "Tag1, Tag2",
      authors: "Author1, Author2",
   }
 },
 {
   event: "website_pageview",
   pageInfo: {
      path: "https://google.com",
      title: "Page title",
   }
 }
]

What I want to achieve is the following. In GTM, based on the event: "website_pageview" it will trigger a pageview with all the needed info - path, title, tags, authors.

(1)[
 {
   event: "website_pageview",
   pageInfo: {
      path: "https://google.com",
      title: "Page title",
      tags: "Tag1, Tag2",
      authors: "Author1, Author2",
   }
 }
]

Thank you in advance.

Darrellwan · Answer

I think it's okay that it's not in the same dataLayer array. Because in Google Tag Manager, it will combine it automatically in the Datalayer Variable

Here is the test result from you dataLayer :

I paste the dataLayer code in the console.

Create the Datalayer Variable in Google Tag Manager

We can see that the test-Pageinfo variable already merge all the parameters!

window.dataLayer push more key value in the same event

1 Answers