Google Tag Manager shows previous page title after navigation with Swup

[NereaFontecha]

Describe your problem 🧐

We're using Swup for smooth, SPA-like navigation, along with Google Tag Manager (GTM). We've noticed that when we navigate to a new page, the document.title being pushed to GTM corresponds to the previous page, not the current one.

This happens even though we're using Swup’s page:view event and pushing data to window.dataLayer.
In some projects with little content, the title updates correctly before the dataLayer push. here
In this specific project, it seems like document.title hasn't updated yet when the page:view hook here.

Example of the behavior:
You're on page-A → Correct title in GTM: ✅
Navigate to page-B → GTM still shows the title of page-A ❌
Navigate to page-C → GTM now shows the title of page-B ❌

Current setup:

window.dataLayer = window.dataLayer || [];
swup.hooks.on('page:view', () => {
  window.dataLayer.push({
    event: 'page_view',
    page_path: window.location.pathname,
    page_title: document.title
  });
});

What is your question? 🙋‍♀️

Is there a recommended Swup hook we should use to ensure that document.title has been fully updated before pushing data to dataLayer?
Should we maybe listen for a different event (like contentReplaced, animationOutDone, etc.) before triggering the push?

URL to minimal reproduction 🔗

http://sei.com/

Checked all these? 📚

• I have read and searched the official docs
• I have checked discussions and existing issues for answers to my question
• I agree to follow this project's Code of Conduct
• I have provided all necessary information to the best of my knowledge

[daun]

One idea is you could add a small artificial delay using setTimeout() before pushing to the data layer. Maybe that's enough.

Alternatively, you could use the title of the new document directly. The hook should receive a visit object as its first argument. The new title should in theory be accessible at visit.to.document.title.

[NereaFontecha]

Hi @daun , I have noticed that the setTimeout function is not working as expected. Additionally, the function responsible for retrieving the page title is executed before the title has been updated.Any further ideas?

[daun]

In the page:view hook, both document.title and visit.to.document.title contain the title of the new page. Just tested it real quick locally. So the issue is probably somewhere else.

swup.hooks.on('page:view', () => {
  console.log(visit.to.document.title) // 'New title'
  console.log(document.title) // 'New title'
})

[NereaFontecha]

Hi @daun , I use this code and still does not work even the visit.to.document.title says the New title. The GTM Tag, gets the Old Title.

``` this.swup.hooks.on("page:view", async (visit) => {
            if (this.detected) {
                const newTitle = visit?.to?.document?.title || document.title;  
                const newURL = visit?.to?.url || window.location.href; // Use stored URL or fallback to current URL
                window.previousPageURL =
                    window.location.href;
                window.dataLayer.push({
                    event: "VirtualPageview",
                    virtualPageURL: newURL,
                    virtualPageTitle: newTitle,
                });
            }
        });

[daun]

All out of ideas in that case :(