# Page timings in low-code platform (single-page application)

**URL:** <https://community.piwik.pro/t/page-timings-in-low-code-platform-single-page-application/821>\
**Category:** Data collection and tags\
**Created:** [July 18, 2022, 1:43pm UTC](https://community.piwik.pro/t/page-timings-in-low-code-platform-single-page-application/821 "2022-07-18T13:43:42Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jeroen](https://avatars.discourse-cdn.com/v4/letter/j/bbe5ce/32.png) [@Jeroen](https://community.piwik.pro/u/Jeroen)\
**Post date:** [July 18, 2022, 1:43pm UTC](https://community.piwik.pro/t/page-timings-in-low-code-platform-single-page-application/821/1 "2022-07-18T13:43:42Z")

</div>

Hi,

I’m trying to get helpful performance metrics (page timings) insights of my Mendix application. Mendix is a low-code platform compiling to a single-page application meaning I only have 1 URL. Now, I would like to achieve 2 things:

1. Send every page to Piwik Pro
2. Use the page timings to measure DOM loading / time to interact for each page

So far I have not been able to achieve the first step with the documentation for auto SPA or even manual SPA [How can I track a single-page application (manual method)? | Piwik PRO help center](https://help.piwik.pro/support/questions/how-can-i-track-a-single-page-application-manual-method/). Is there someone who has any experience in this field?

Thanks in advance.  
Jeroen

---

<div class="post-metadata">

**Author:** ![kuba](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/kuba/32/7_2.png) [@kuba](https://community.piwik.pro/u/kuba)\
**Post date:** [July 18, 2022, 3:08pm UTC](https://community.piwik.pro/t/page-timings-in-low-code-platform-single-page-application/821/2 "2022-07-18T15:08:40Z")

</div>

Our solution for automatic SPA tracking uses browser’s history API. If you have consent manager implemented, make sure that you have proper consent for tracking - it won’t work without that.

---

<div class="post-metadata">

**Author:** ![Jeroen](https://avatars.discourse-cdn.com/v4/letter/j/bbe5ce/32.png) [@Jeroen](https://community.piwik.pro/u/Jeroen)\
**Post date:** [July 20, 2022, 10:44am UTC](https://community.piwik.pro/t/page-timings-in-low-code-platform-single-page-application/821/3 "2022-07-20T10:44:36Z")

</div>

Hi Kuba,

Thanks for your reply. I have SPA tracking enabled using a:

- Custom variable (document title)
- History change trigger (SPA)
- Virtual page view with the trigger enabled

I’m getting page views in but no specific document titles. I’m currently trying out different configurations in the virtual page view setup using {{ Page URL }} and {{ History Fragment }}. I haven’t found the correct setup yet. Any suggestions?

---

<div class="post-metadata">

**Author:** ![kuba](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/kuba/32/7_2.png) [@kuba](https://community.piwik.pro/u/kuba)\
**Post date:** [July 21, 2022, 9:58am UTC](https://community.piwik.pro/t/page-timings-in-low-code-platform-single-page-application/821/4 "2022-07-21T09:58:42Z")

</div>

Do you have this setting enabled?

 ![image](https://europe1.discourse-cdn.com/flex005/uploads/piwikpro/original/1X/4d2d472df50234caf476741c275fc95fb5994917.png)

Sometimes the `document.title` is a bit delayed, so we have to wait for the variable to be set.

---

<div class="post-metadata">

**Author:** ![Jeroen](https://avatars.discourse-cdn.com/v4/letter/j/bbe5ce/32.png) [@Jeroen](https://community.piwik.pro/u/Jeroen)\
**Post date:** [July 21, 2022, 3:11pm UTC](https://community.piwik.pro/t/page-timings-in-low-code-platform-single-page-application/821/5 "2022-07-21T15:11:10Z")

</div>

Yes we have this enbaled. Any other idea?

---

<div class="post-metadata">

**Author:** ![kuba](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/kuba/32/7_2.png) [@kuba](https://community.piwik.pro/u/kuba)\
**Post date:** [July 22, 2022, 7:05am UTC](https://community.piwik.pro/t/page-timings-in-low-code-platform-single-page-application/821/6 "2022-07-22T07:05:46Z")

</div>

Is `document.title` set to the previous URL or doesn’t work at all? How did you implement routing in your SPA app? How is the variable for page title defined?

---

<div class="post-metadata">

**Author:** ![Jeroen](https://avatars.discourse-cdn.com/v4/letter/j/bbe5ce/32.png) [@Jeroen](https://community.piwik.pro/u/Jeroen)\
**Post date:** [July 26, 2022, 8:50am UTC](https://community.piwik.pro/t/page-timings-in-low-code-platform-single-page-application/821/7 "2022-07-26T08:50:33Z")

</div>

It’s hard to tell if Mendix sets the document.title correctly inside the history object of the browser (see screenshot).

 ![Screenshot 2022-07-26 at 10.49.23](https://europe1.discourse-cdn.com/flex005/uploads/piwikpro/original/1X/f43c18dfbbbcccf75b4d631b864ce8c2f2ce1c41.png)

Where is Piwik expecting some value inside the history object? Can I use the state.path as a trigger?

---

<div class="post-metadata">

**Author:** ![kuba](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/kuba/32/7_2.png) [@kuba](https://community.piwik.pro/u/kuba)\
**Post date:** [July 26, 2022, 10:55am UTC](https://community.piwik.pro/t/page-timings-in-low-code-platform-single-page-application/821/8 "2022-07-26T10:55:44Z")

</div>

Is the `document.title` set to some older value (previous page view) or not set at all? I guess there are no problems with the URL since it’s something available directly through History API.

---

<div class="post-metadata">

**Author:** ![Jeroen](https://avatars.discourse-cdn.com/v4/letter/j/bbe5ce/32.png) [@Jeroen](https://community.piwik.pro/u/Jeroen)\
**Post date:** [July 26, 2022, 2:09pm UTC](https://community.piwik.pro/t/page-timings-in-low-code-platform-single-page-application/821/9 "2022-07-26T14:09:19Z")

</div>

When I switch pages, the`document.title` is changed.  
 ![Screenshot 2022-07-26 at 16.07.48](https://europe1.discourse-cdn.com/flex005/uploads/piwikpro/original/1X/0937aa64618eb98a929b68ade098f9561598292e.png)  
 ![Screenshot 2022-07-26 at 16.08.05](https://europe1.discourse-cdn.com/flex005/uploads/piwikpro/original/1X/b5fc1d471ac6d7291f1ddc2159b124288c10d4cb.png)

---

<div class="post-metadata">

**Author:** ![kuba](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/kuba/32/7_2.png) [@kuba](https://community.piwik.pro/u/kuba)\
**Post date:** [July 26, 2022, 2:45pm UTC](https://community.piwik.pro/t/page-timings-in-low-code-platform-single-page-application/821/10 "2022-07-26T14:45:36Z")

</div>

Thanks for that. I just realized that I missed the most important part from the first post. Since your app is served under one URL, our SPA solution and history change triggers wont work. Do you think that it’s possible to update the app so that the URLs are updated in line with the state.path?

---

<div class="post-metadata">

**Author:** ![Jeroen](https://avatars.discourse-cdn.com/v4/letter/j/bbe5ce/32.png) [@Jeroen](https://community.piwik.pro/u/Jeroen)\
**Post date:** [July 27, 2022, 6:33am UTC](https://community.piwik.pro/t/page-timings-in-low-code-platform-single-page-application/821/11 "2022-07-27T06:33:22Z")

</div>

Sadly that’s not possible out of the box. Is there any other way to trigger a page change automatically with Piwik? Note that our main goals is to get insights in end user performance (DOM loading and time to interact)

---

<div class="post-metadata">

**Author:** ![kuba](https://dub1.discourse-cdn.com/flex005/user_avatar/community.piwik.pro/kuba/32/7_2.png) [@kuba](https://community.piwik.pro/u/kuba)\
**Post date:** [July 27, 2022, 11:25am UTC](https://community.piwik.pro/t/page-timings-in-low-code-platform-single-page-application/821/12 "2022-07-27T11:25:50Z")

</div>

To have a full control, the best option is to publish datalayer event every time the page url changes. This datalayer event would contain the current url and page title as variables.

Example structure:

```auto
<script>
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    'event': 'pageview',
    'page_title': 'yourtitle',
    'page_url': 'https://domain.com',
  });
</script>

```

The only issue with this solution is fact that those events have to be published by the frontend app.

Regarding page timings, we did recently some research on that and it turns out that measuring performance of SPA is a totally different topic than the standard full page reloads. Comment from our dev team:

> There is no automatic way to gather that (page performance metrics) like in the traditional page load scenario. SPA can handle virtual page loads in many different ways and it’s defined by developer in JS, so all we can do is provide developer with a way to time any arbitrary process he wants to monitor and add it in statistics. This would require good documentation to explain how to use such a tool and rework in the analytics reports for page performance (to add arbitrary loading metrics in addition to the standard ones we use already).

I’ll fill a feature request to bump the priority of this task.

---

<div class="post-metadata">

**Author:** ![Jeroen](https://avatars.discourse-cdn.com/v4/letter/j/bbe5ce/32.png) [@Jeroen](https://community.piwik.pro/u/Jeroen)\
**Post date:** [August 1, 2022, 11:12am UTC](https://community.piwik.pro/t/page-timings-in-low-code-platform-single-page-application/821/13 "2022-08-01T11:12:34Z")

</div>

Hi kuba and dev team,

Thanks for the time you spent on this topic. I agree with the dev team that it becomes very hard to determine the actual page loading / time to interact with a page when applications start using different ways to load pages and data. That having said, I’ll implement some custom JS when an action is triggered and try to capture when the actual page is loaded.