单页网站和渐进式Web应用程序在过去几年已经成为标准。正确跟踪此类网站和应用程序对你的成功至关重要，因为你需要确保测量的数据是有意义和正确的。
如果你正在使用一个流行的框架，比如Angular、Angular JS、Vue.js、React Native等，那么我们建议你先检查一下你的框架是否有集成可用:查看Matomo的所有可用集成．
首先，您需要像往常一样将JavaScript跟踪代码嵌入到单页网站或web应用程序中。要做到这一点，在你的Matomo实例的右上角的“管理”，点击“跟踪代码”，并根据你的需要调整跟踪代码。你可以在我们的JavaScript跟踪客户端文档
当您需要跟踪一个新的页面视图时，挑战就开始了。单页应用程序不同于通常的网站，因为没有常规的新页面加载，Matomo不能自动检测当一个新页面被查看。这意味着当URL和页面标题发生变化时，您需要让Matomo知道。您可以使用方法来做到这一点setCustomUrl和setDocumentTitle是这样的:
窗口。addEventListener('hashchange'， function() {_paq. addEventListener)push(['setCustomUrl'， '/' + window.location.hash.substr(1)]);_paq。push(['setDocumentTitle'， 'My New Title']);_paq.push ([' trackPageView ']);})；如果你已经设置了自定义变量在作用域“page”中，你需要确保再次删除这些自定义变量，因为它们也会归属于新的页面视图，否则:
_paq。push([‘deleteCustomVariables’,'页']);_paq.push ([' trackPageView ']);注:我们建议您使用自定义尺寸而不是自定义变量，因为它们将在未来被弃用。
与自定义变量类似，您也需要取消设置自定义尺寸当他们改变页面时，否则将被再次跟踪。
_paq。推动([deleteCustomDimension, 1]);_paq.push ([' trackPageView ']);根据你是否想要跟踪前一页作为新页面视图的引用者，你应该通过将其设置为前一页URL来更新引用者URL:
_paq。推动([setReferrerUrl, previousPageUrl]);_paq.push ([' trackPageView ']);当您显示一个新页面时，您的单页面DOM也可能会改变。例如，您可以使用通过Ajax从服务器加载的新内容替换页面的部分内容。这意味着您需要指示Matomo扫描DOM以查找新内容。我们现在将讨论各种内容类型(视频和音频，表单，链接和下载，内容跟踪)。
如果你使用媒体分析跟踪您的视频和音频的功能，每当显示一个新页面时，您需要调用以下方法:
_paq。推动([MediaAnalytics:: scanForMedia, documentOrElement]);当您不传递任何参数时，它将扫描整个DOM以寻找新媒体。或者，你可以传递一个元素只扫描你的网站或应用程序的特定区域的新媒体。
如果你使用形式分析特性来衡量您的在线表单的性能，每当显示一个新页面时，您需要调用以下方法:
_paq。推动([FormAnalytics:: scanForForms, documentOrElement]);在哪里documentOrElement指向文档重新扫描整个DOM(没有设置参数时的默认值)，或者您可以传递一个元素来限制重新扫描到特定的区域。
假设您使用链接跟踪特性进行测量outlinks和下载当你的DOM发生变化时，Matomo需要重新扫描整个DOM以寻找新添加的链接。为了确保Matomo会跟踪这样的链接，调用这个方法:
_paq.push ([' enableLinkTracking ']);如果你使用内容跟踪当一个新的页面被显示并且DOM的某些部分发生变化时，你需要调用这个方法:
_paq。推动([trackContentImpressionsWithinNode, documentOrElement]);在哪里documentOrElement指向文档或者一个类似于其他方法的元素。然后Matomo将扫描页面中新添加的内容块。
为了支持单页网站和web应用程序的开箱即用，的热图＆会议记录将自动检测一个新的页面视图时，您调用trackPageView方法。如果你打电话，这也适用trackPageView几次没有实际的页面重载。Matomo会在每次呼叫之后trackPageView停止任何活动的记录，并根据新的URL重新评估是否应该为新页面记录活动。
如果你有一个单页的网站，你使用trackPageView对于任何其他目的，而不是实际的页面视图，建议使用此方法禁用默认行为，并通过调用这两个方法显式地让热图和会话记录知道何时有一个新的页面视图disableAutoDetectNewPageView和setNewPageView．
如果在单页网站中设置自定义URL，则可能需要使用matchTrackerUrl ()以便让Matomo跟踪器正确触发热图和会话记录。
欲知详情，请浏览JS Tracker API参考热图和会话记录．
在这个例子中，我们展示了所有东西是如何一起工作的，假设你想在哈希发生变化时跟踪一个新页面:
var currentUrl = location.href;窗口。addEventListener('hashchange'， function() {_paq. addEventListener)推动([setReferrerUrl, currentUrl]);currentUrl = '/' + window.location.hash.substr(1);_paq。推动([setCustomUrl, currentUrl]);_paq。push(['setDocumentTitle'， 'My New Title']);//删除所有以前分配的自定义变量，需要Matomo(以前的Piwik) 3.0.2 _paq。push([‘deleteCustomVariables’,'页']);_paq.push ([' trackPageView ']); // make Matomo aware of newly added content var content = document.getElementById('content'); _paq.push(['MediaAnalytics::scanForMedia', content]); _paq.push(['FormAnalytics::scanForForms', content]); _paq.push(['trackContentImpressionsWithinNode', content]); _paq.push(['enableLinkTracking']); });如果你在使用标签管理器来实现你的Matomo分析跟踪，然后亚博ap下载在你的单页应用程序中，每当有一个新页面加载在你的应用程序中，你将需要你的Matomo标签被触发以跟踪Page视图。
来触发您的Matomo标记(它调用trackPageView)，你可以选择:
{事件:“mtm。页面浏览人数'}在JavaScript中调用下面这行代码:window._mtm。push({'事件':' mtm.PageView '});．window._mtm。push({'事件':' DOMReady '});)或当您使用“窗口加载触发器”(调用_mtm。push({'事件':' WindowLoad '});如果您的web应用程序需要脱机跟踪，请参阅Matomo离线跟踪指南。
如果你有任何问题或需要帮助，请请与我们的支持团队联系或免费支持:在论坛上提问．