Wrong title on first page view and on refresh while using vue/nuxt SPA

[Waleed_SHEIKH]

Hi!

I installed Piwik PRO on my website which uses vue.js and nuxt.js. The standard configuration seems to be working fine.

My only problem is with page views! Once my clients enter their username and password, the website retrieves the necessary information for its construction in the nuxt.js configuration, then looks for the information necessary to display the page in vue.js.

The problem is that I specified a default page title in my nuxt.js configuration, so for a few milliseconds during the first page load or page refresh, a default title is displayed and then replaced by the actual page title specified in the vue.js page.

Unfortunately, Piwik PRO retrieves the page title too quickly and does not allow vue.js to load the correct page title, so I end up with the wrong title. How do I modify the standard configuration so that the pageview trigger waits between 1 to 3 seconds for the correct title to load?

Thanks for you help.

[kuba]

Hi there. I assume that you use the standard SPA tracking switcher available from administration.

To solve your issue, I’d configure the default Piwik PRO tag to not trigger a page view at all (it’s the tag that loads after FULL page refresh).

Tag Manager > Piwik PRO tag (tracking code) > Other options > Track page views manually

From this point you can decide how you’d like to trigger the first page view. You can use History API to trigger an event there or set up a virtual page view tag with trigger that matches your expectations (e.g. a datalayer push event that is fired only when the app loads for the first time).

Other option would be to delay a bit loading of the main Analytics tag by reconfiguring the “All page views” to load a bit later:

(but that might not be enough, since you mentioned “1 to 3 seconds”)

[Waleed_SHEIKH]

Hi kuba,

Thanks for informations !

• I tried to delay loading of the main analytics tag but it didn’t work.
• Yes, “Track page views in SPA” is activated.
• Ok, i activate “Track page view manually” and now i dont have pageviews when I log in for the first time or when I refresh the page
• So what you’re saying is that i can use API from developer documentation or set up virtual page view tag from tag manager using datalayer ? I prefer the second option but i need some help, can you tell me the steps ? Or do you have documentation that explains how to do it step by step?

Thanks in advance for your help.

[kuba]

Assuming that you can write code, you should be able to do datalayer.push at the moment when page title is available during the first page load.

So, you create a tag:

Here’s the configuration:

(small note: page title variable is not available by default. You have to create it, but it’s quite simple. Just a new Variable with type Document and title as the value)

This tag should be fired based on a dataLayer trigger. Example code for your datalayer:

<script>
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
        'event': 'my_page_view',
    });
</script>

You could even pass your page title here as additional value. As you can see, you have full control.

<script>
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
        'event': 'my_page_view',
        'my_page_title': 'My page title',
    });
</script>

Then a datalayer trigger would look like that:

Other datalayer values can be intercepted using… datalayer variables

[kuba]

Alternatively you can do the first page view with a custom code triggered on all page views. Something like that:

<script>
	setTimeout(function() {
  		_paq.push(['setCustomUrl', {{ Page Url }}]);
  		_paq.push(['setDocumentTitle', {{ Page title }}]);
 		_paq.push(['trackPageView']);
	}, 2000);
</script>

Generally it’s much simpler and should work, but using timeouts is always risky Users with really slow connections might need 3 or 4 seconds to fetch all needed assets.

[Waleed_SHEIKH]

Hi Kuba,

Thanks for you help !
I try to pass a page title as additionnal value with the code below but it’s not working…

<script>
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
        'event': 'my_page_view',
        'my_page_title': 'My page title',
    });
</script>

So at the moment I am using the code below with a timeout

setTimeout(() => {
            window.dataLayer = window.dataLayer || [];
            window.dataLayer.push({
                'event': 'my_page_view',
            });
        }, 2000);

But as you said it’s not the best way for users with slow connections …

D you know why the additionnal value (page title) doesn’ working ?

Thanks for your help.

[kuba]

Hi. It works for me. Just tested via console:

Event is available:

The page title variable as part of this event as well: