Single Page Application Website Tracking Issue

Product Support
1

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)

2

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.

1 Like
10

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

1 Like
11

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
screenshot-forum.mautic.org-2023.09.17-18_31_511920×1042 94.1 KB

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

12

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).

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);
  });
};
2 Likes