# SPA and Contact Monitoring

**URL:** <https://forum.mautic.org/t/spa-and-contact-monitoring/4648>\
**Category:** Product Support\
**Created:** [July 27, 2016, 5:09am UTC](https://forum.mautic.org/t/spa-and-contact-monitoring/4648 "2016-07-27T05:09:16Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![raffaele](https://avatars.discourse-cdn.com/v4/letter/r/90db22/32.png) [@raffaele](https://forum.mautic.org/u/raffaele)\
**Post date:** [July 27, 2016, 5:09am UTC](https://forum.mautic.org/t/spa-and-contact-monitoring/4648/1 "2016-07-27T05:09:16Z")

</div>

Is it possible to use Mautic JS tracking tool in a single page application? I tried by calling mt(‘send’, ‘pageview’) multiple times for each page visited by the user but looks like only the first call will actually work so only the first page is tracked

---

<div class="post-metadata">

**Author:** ![raffaele](https://avatars.discourse-cdn.com/v4/letter/r/90db22/32.png) [@raffaele](https://forum.mautic.org/u/raffaele)\
**Post date:** [July 27, 2016, 5:09am UTC](https://forum.mautic.org/t/spa-and-contact-monitoring/4648/2 "2016-07-27T05:09:16Z")

</div>

Is it possible to use Mautic JS tracking tool in a single page application? I tried by calling mt(‘send’, ‘pageview’) multiple times for each page visited by the user but looks like only the first call will actually work so only the first page is tracked

---

<div class="post-metadata">

**Author:** ![lukas.frei](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/lukas.frei/32/205_2.png) [@lukas.frei](https://forum.mautic.org/u/lukas.frei)\
**Post date:** [October 15, 2020, 4:24pm UTC](https://forum.mautic.org/t/spa-and-contact-monitoring/4648/3 "2020-10-15T16:24:44Z")

</div>

does anyone have a solution for this now?

---

<div class="post-metadata">

**Author:** ![joeyk](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/joeyk/32/11164_2.png) [@joeyk](https://forum.mautic.org/u/joeyk)\
**Post date:** [October 15, 2020, 6:39pm UTC](https://forum.mautic.org/t/spa-and-contact-monitoring/4648/4 "2020-10-15T18:39:38Z")

</div>

Hi!  
Are we talking about a single page application, where the page reloads itself with ajax?  
If so, you can use the API to inject new info when the page is loaded.  
If not, than please rephrase, cause I’m not sure I understand.

---

<div class="post-metadata">

**Author:** ![namratasaun](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/namratasaun/32/2801_2.png) [@namratasaun](https://forum.mautic.org/u/namratasaun)\
**Post date:** [December 7, 2020, 12:28pm UTC](https://forum.mautic.org/t/spa-and-contact-monitoring/4648/5 "2020-12-07T12:28:24Z")

</div>

So, in SPAs, I have to go to every single page and call mt(“send”, “pageview”)

---

<div class="post-metadata">

**Author:** ![taro](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/taro/32/730_2.png) [@taro](https://forum.mautic.org/u/taro)\
**Post date:** [June 5, 2021, 12:55am UTC](https://forum.mautic.org/t/spa-and-contact-monitoring/4648/6 "2021-06-05T00:55:33Z")

</div>

Hi.

I am very annoyed that I can’t measure the URLs in my SPA pages with mautic.  
Can you please tell me what the API is?

---

<div class="post-metadata">

**Author:** ![joeyk](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/joeyk/32/11164_2.png) [@joeyk](https://forum.mautic.org/u/joeyk)\
**Post date:** [June 5, 2021, 3:57pm UTC](https://forum.mautic.org/t/spa-and-contact-monitoring/4648/7 "2021-06-05T15:57:44Z")

</div>

First can you please tell me what an SPA is, cause i know only the meaning when I’m soaking myself and getting a massage.

---

<div class="post-metadata">

**Author:** ![joeyk](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/joeyk/32/11164_2.png) [@joeyk](https://forum.mautic.org/u/joeyk)\
**Post date:** [June 5, 2021, 3:58pm UTC](https://forum.mautic.org/t/spa-and-contact-monitoring/4648/8 "2021-06-05T15:58:36Z")

</div>

Got it. Single page application duh.

---

<div class="post-metadata">

**Author:** ![joeyk](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/joeyk/32/11164_2.png) [@joeyk](https://forum.mautic.org/u/joeyk)\
**Post date:** [June 5, 2021, 4:02pm UTC](https://forum.mautic.org/t/spa-and-contact-monitoring/4648/9 "2021-06-05T16:02:47Z")

</div>

Add mautic to the header and it will measure everything.  
This is what api is:  
[https://lmgtfy.app/?q=api+wikipedia](https://lmgtfy.app/?q=api+wikipedia)  
Mautic api:  
[https://lmgtfy.app/?q=api+mautic](https://lmgtfy.app/?q=api+mautic)

But I dont think tracking with Api is the right way. Javascript is super easy. Need help?

---

<div class="post-metadata">

**Author:** ![taro](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/taro/32/730_2.png) [@taro](https://forum.mautic.org/u/taro)\
**Post date:** [June 6, 2021, 12:19am UTC](https://forum.mautic.org/t/spa-and-contact-monitoring/4648/10 "2021-06-06T00:19:37Z")

</div>

Hi.

Thank you for your reply!  
Also, sorry for the confusing question.  
Yes, SPA is a single page application.

For example, if a user is directed to the following page from a matutic email, the first page (Page1.html) can be measured in the matutic admin panel, but the next page (Page2.html) will not be measured.

demosite  
[http://mat000.php.xdomain.jp/Page1.html](http://mat000.php.xdomain.jp/Page1.html)

I use GoogleTagManager to set the tag of mautic to the website. Is it possible to tell me how I can measure these pages as well?

---

<div class="post-metadata">

**Author:** ![joeyk](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/joeyk/32/11164_2.png) [@joeyk](https://forum.mautic.org/u/joeyk)\
**Post date:** [June 6, 2021, 5:31pm UTC](https://forum.mautic.org/t/spa-and-contact-monitoring/4648/11 "2021-06-06T17:31:53Z")

</div>

Hi,  
The issue is, that Mautic tracks pageviews.  
But your app doesn’t reload the pages, just the embedded content. As a result, there is nothing to track.  
You need to fire the tracking event for each ‘content piece’ separately. I wouldn’t call those embedded content pieces pages, cause they are not.

---

<div class="post-metadata">

**Author:** ![taro](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/taro/32/730_2.png) [@taro](https://forum.mautic.org/u/taro)\
**Post date:** [June 6, 2021, 11:54pm UTC](https://forum.mautic.org/t/spa-and-contact-monitoring/4648/12 "2021-06-06T23:54:44Z")

</div>

Thank you for replying.

So does that mean that mautic can’t measure this kind of SPA page transition?

---

<div class="post-metadata">

**Author:** ![joeyk](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/joeyk/32/11164_2.png) [@joeyk](https://forum.mautic.org/u/joeyk)\
**Post date:** [June 7, 2021, 4:35am UTC](https://forum.mautic.org/t/spa-and-contact-monitoring/4648/13 "2021-06-07T04:35:33Z")

</div>

As others mentioned before, you need to correctly fire the pageview event. Add the javascript to each page and it might work.

Joey

---

<div class="post-metadata">

**Author:** ![taro](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/taro/32/730_2.png) [@taro](https://forum.mautic.org/u/taro)\
**Post date:** [June 7, 2021, 5:24am UTC](https://forum.mautic.org/t/spa-and-contact-monitoring/4648/14 "2021-06-07T05:24:03Z")

</div>

Hello.

Thank you for your kind answer.

I’m not an engineer, so I’m not too familiar with javascript, but do you know of any pages that show how to write it so that it works correctly?  
I’m not an engineer, so I don’t know much about javascript.

---

<div class="post-metadata">

**Author:** ![joeyk](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/joeyk/32/11164_2.png) [@joeyk](https://forum.mautic.org/u/joeyk)\
**Post date:** [June 7, 2021, 7:04am UTC](https://forum.mautic.org/t/spa-and-contact-monitoring/4648/15 "2021-06-07T07:04:04Z")

</div>

Hi,

I wouldn’t call them “Page 1” and “Page 2”. Rather “Content 1” and “Content 2”.

Mautic (and Google Analytics as well including any page tracking software) can track newly loaded pages by firing the tracking script in the header.

As you are not loading the header you need to fire the script somewhere else.

You can fire a tracking pixel:

```auto
<img src="https://example.com/mtracking.gif?page_url=http%3a%2f%2fexample.com%2fpage1&page_title=Page%20One&email=user%40theirdomain.com" style="display: none;" alt="mautic is open source marketing automation" />

```

Or you can add the js to that page and fire it on each page:  
(This is for page 2)

```auto
<script>
var mauticUrl = 'https://example.com';
var src = mauticUrl + '/mtracking.gif?page_url=' + encodeURIComponent(window.location.href) + '&page_title=page2_' + encodeURIComponent(document.title);
var img = document.createElement('img');
img.style.width = '1px';
img.style.height = '1px';
img.style.display = 'none';
img.src = src;
var body = document.getElementsByTagName('body')[0];
body.appendChild(img);
</script>

```

Please check [Contact tracking | Mautic](https://docs.mautic.org/en/contacts/manage-contacts/contact-monitoring)

Sorry to be blunt, I just want to save you some time: this is an engineering issue on your side. Ask someone who understands javascript.

Also:  
In case you’d use a free / hosted page builder: make sure you have your Mautic a subdomain of your Landing page domain otherwise tracking won’t really work due to 3rd party cookie limitations by browser policy.

Joey

---

<div class="post-metadata">

**Author:** ![taro](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/taro/32/730_2.png) [@taro](https://forum.mautic.org/u/taro)\
**Post date:** [June 7, 2021, 7:16am UTC](https://forum.mautic.org/t/spa-and-contact-monitoring/4648/16 "2021-06-07T07:16:21Z")

</div>

Hi.

Thank you so much for your prompt reply!

I’ll set the javascript you gave me and give it a try!