GTM on page transitions

[elisabetperez]

What did you expect? 🧐

Hello! I've worked on several websites using Swup, and recently I've developed two sites in the same way. Here's how Swup is set up on both:

 this.swup = new Swup({
            linkSelector: "a[href]:not([href$='.pdf']), area[href], svg a[*|href]",
            plugins: [
                new SwupHeadPlugin({ persistAssets: true }),
                // new SwupDebugPlugin({
                //     globalInstance: true,
                // }),
                new SwupScriptsPlugin({ head: true, body: process.env == "virtual" ? true : false }),
                new SwupJsPlugin(transitionOptions),
            ],
        });

On these 2 pages, I use Boostify to load GTM. This is what I do in both:

/**
         *  Since we are using Boostify, we need to check if the Google Scripts are loaded a few seconds after the page is loaded
         *  If they are, we load the GTM script
         *  This project utilizes page transitions, necessitating a custom event after each page change to correspond with a page view in GTM.
         */
        var response = await import('@terrahq/helpers/hasGoogleScripts');
        const hasGoogleScripts = response.hasGoogleScripts;
        await hasGoogleScripts({maxTime:5000}).then((detected) => {
            if (detected) {
               window.dataLayer.push({
                event: 'VirtualPageview',
                virtualPageURL: window.location.pathname + window.location.search,
                virtualPageTitle: document.title
              });
            } else {
                console.log("Google Scripts not detected");
            }
        });

However, on one of these two pages, I went a step further and added a feature for when the page changes because I suspected the initial setup wasn't tracking page changes in GTM:

 this.swup.hooks.on('page:view', (visit) => {
            window.dataLayer.push({
                event: 'VirtualPageview',
                virtualPageURL: window.location.pathname + window.location.search,
                virtualPageTitle: document.title
            });
        });

What actually happened? 😵‍💫

The surprise came when I talked to my Digital team, and they told me that both setups were working fine and tracking page changes. My question is: what's the correct way to handle this? Thanks in advance.
cc @andresclua

Swup and plugin versions 📝

"swup": "^4.5.1",
"@swup/debug-plugin": "^4.0.4",
"@swup/forms-plugin": "^3.4.2",
"@swup/head-plugin": "^2.1.2",
"@swup/js-plugin": "^3.1.1",
"@swup/scripts-plugin": "^2.1.0",
"boostify": "^0.0.13",

What browsers are you seeing the problem on? 🧭

No response

Relevant log output 🤓

No response

URL to minimal reproduction 🔗

https://renewalclaimsolutions.com/

Checked all these? 📚

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

[daun]

GTM can be configured to listen to history changes, in which case it would also track subsequent page views without a need for custom hooks. If the history change trigger is disabled, the hook should however be required unless you only want to track the initial page view on load. So it depends on your GTM config.