# Single Page Application Website Tracking Issue

**URL:** <https://forum.mautic.org/t/single-page-application-website-tracking-issue/25229>\
**Category:** Product Support\
**Created:** [August 30, 2022, 11:42am UTC](https://forum.mautic.org/t/single-page-application-website-tracking-issue/25229 "2022-08-30T11:42:13Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![mikew](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/mikew/32/5156_2.png) [@mikew](https://forum.mautic.org/u/mikew)\
**Post date:** [August 30, 2022, 11:42am UTC](https://forum.mautic.org/t/single-page-application-website-tracking-issue/25229/1 "2022-08-30T11:42:13Z")

</div>

Has anyone come up with a good solution for tracking when the tracking script is put on a single page application website.

From my understanding what happens in websites like this is the header is consistent across the entire site and any page that is loaded gets a new url, but the header stays the same, as such Mautic is unable to track different page hits in the site. The only way to see a new page hit is if someone refreshes the entire site (on a new page for example) and then a new anonymous lead is created in contacts.

I am very interested to see how this can be overcome without having to manually go and insert the tracking script in the body of each page (considering some sites could have thousands of pages)

---

<div class="post-metadata">

**Author:** ![mzagmajster](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/mzagmajster/32/687_2.png) [@mzagmajster](https://forum.mautic.org/u/mzagmajster)\
**Post date:** [August 31, 2022, 6:49pm UTC](https://forum.mautic.org/t/single-page-application-website-tracking-issue/25229/2 "2022-08-31T18:49:41Z")

</div>

Well, I have not tried this, but looking at how tracking is done in GTM for those kind of apps and how mautic tracking script works.

I would approach it as follows:

- in your SPA attach listener to browser location change
- trigger mt(‘send’, ‘pageview’); inside the callback
- move the logic to component and use component on every page of your app (note: you should benefit using the component in main - root component, but without experiments, there is no telling).

You might have to modify mauitc tracking script slightly (you already have an event in mautic for this) to go with your frontend framerwork (react, angular, etc.).

About the title - with SPA it does not really matter if it does not change as you can adjust the mautic tracking script to get value from some other variable than page title.

If you want, you can also change the title of the page via SPA - I would probably first try this as then I would be able to avoid at least some modifications of tracking script.

---

<div class="post-metadata">

**Author:** ![mikew](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/mikew/32/5156_2.png) [@mikew](https://forum.mautic.org/u/mikew)\
**Post date:** [September 5, 2023, 6:05am UTC](https://forum.mautic.org/t/single-page-application-website-tracking-issue/25229/10 "2023-09-05T06:05:58Z")

</div>

@silavapi - above message been coming up a lot. Spam.

---

<div class="post-metadata">

**Author:** ![silavapi](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/silavapi/32/7424_2.png) [@silavapi](https://forum.mautic.org/u/silavapi)\
**Post date:** [September 17, 2023, 5:35pm UTC](https://forum.mautic.org/t/single-page-application-website-tracking-issue/25229/11 "2023-09-17T17:35:13Z")

</div>

Thanks @mikew , in the future, please use the built in flagging tool to raise posts for mods to action:

 ![screenshot-forum.mautic.org-2023.09.17-18_31_51](https://us1.discourse-cdn.com/flex020/uploads/mautic/original/2X/b/bc9c625666748bec4523bb7ded02d9f51ac92d5b.jpeg)

I have deleted the user + post and blocked the IP in this case 🙂

---

<div class="post-metadata">

**Author:** ![iparker](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/iparker/32/1936_2.png) [@iparker](https://forum.mautic.org/u/iparker)\
**Post date:** [January 16, 2024, 11:52am UTC](https://forum.mautic.org/t/single-page-application-website-tracking-issue/25229/12 "2024-01-16T11:52:23Z")

</div>

We use nuxt/vuejs for our site and we created a plugin to integrate the mautic tracking script code. In this plugin we send the mt-event after each routing (= pageview).

```auto
export default ({app}) => {
  (function (w, d, t, u, n, a, m) {
    w['MauticTrackingObject'] = n;
    (w[n] =
      w[n] ||
      function () {
        (w[n].q = w[n].q || []).push(arguments);
      }),
      (a = d.createElement(t)),
      (m = d.getElementsByTagName(t)[0]);
    a.async = 1;
    a.src = u;
    m.parentNode.insertBefore(a, m);
  })(
    window,
    document,
    'script',
    process.env.NUXT_ENV_MAUTIC_TRACKING_SCRIPT,
    'mt'
  );

  app.router.afterEach(() => {
    let trackingData = {};
    if (app.$auth.loggedIn) {
      trackingData = {
        uuid: app.$auth.user.id,
      };
    }

    // eslint-disable-next-line no-undef
    mt('send', 'pageview', trackingData);
  });
};

```