[UI] Add SPA/PWA to tracking code section (#18827)

* update hints

update hints

* Update en.json

update a or

* update wording

update wording

* Update UIIntegrationTest_admin_manage_tracking_code.png

update screenshots

* Update plugins/CoreAdminHome/lang/en.json

Co-authored-by: Stefan Giehl <stefan@matomo.org>

* remove duplicates and add a short title

remove duplicates and add a short title

* remove duplicated wording

remove duplicated wording

* update screenshot

* Update plugins/CoreAdminHome/templates/trackingCodeGenerator.twig

Co-authored-by: Stefan Giehl <stefan@matomo.org>

* Update plugins/CoreAdminHome/lang/en.json

Co-authored-by: Justin Velluppillai <justin@innocraft.com>

* Update UIIntegrationTest_admin_manage_tracking_code.png

update screenshots

Co-authored-by: sgiehl <stefan@matomo.org>
Co-authored-by: Justin Velluppillai <justin@innocraft.com>

9 files changed, 30 insertions, 4 deletions

diff --git a/plugins/CoreAdminHome/CoreAdminHome.php b/plugins/CoreAdminHome/CoreAdminHome.php
index 4c45a22459..4b312ba876 100644
--- a/plugins/CoreAdminHome/CoreAdminHome.php
+++ b/plugins/CoreAdminHome/CoreAdminHome.php
@@ -205,5 +205,8 @@ class CoreAdminHome extends \Piwik\Plugin
         $translationKeys[] = 'Actions_ColumnPageName';
         $translationKeys[] = 'CoreAdminHome_JSTracking_MergeSubdomainsDesc';
         $translationKeys[] = 'CoreAdminHome_JSTracking_CustomCampaignQueryParamDesc';
+        $translationKeys[] = 'CoreAdminHome_SinglePageApplicationDescription';
+
+
     }
 }
diff --git a/plugins/CoreAdminHome/lang/en.json b/plugins/CoreAdminHome/lang/en.json
index 51f29e3d34..f5c03a78f6 100644
--- a/plugins/CoreAdminHome/lang/en.json
+++ b/plugins/CoreAdminHome/lang/en.json
@@ -24,6 +24,7 @@
         "ForBetaTestersOnly": "For beta testers only",
         "HttpTrackingApi": "HTTP Tracking API",
         "HttpTrackingApiDescription": "The %1$sHTTP Tracking API%2$s allows you to track anything. This may be useful if you are using a programming language for which no SDK exists yet. It may also be useful when you want to track devices or application in a special way.",
+        "SinglePageApplicationDescription": "If you are tracking a single-page application (SPA) or progressive web application (PWA), please see %1$sthis guide%2$s.",
         "ImageTracking": "Image Tracking",
         "ImageTrackingIntro1": "When a visitor has disabled JavaScript, or when JavaScript cannot be used, you can use an image tracking link to track visitors.",
         "ImageTrackingIntro2": "Generate the link below and copy-paste the generated HTML in the page. If you're using this as a fallback for JavaScript tracking, you can surround it in %1$s tags.",
diff --git a/plugins/CoreAdminHome/templates/trackingCodeGenerator.twig b/plugins/CoreAdminHome/templates/trackingCodeGenerator.twig
index 30555f6ce2..c3c1f305f5 100644
--- a/plugins/CoreAdminHome/templates/trackingCodeGenerator.twig
+++ b/plugins/CoreAdminHome/templates/trackingCodeGenerator.twig
@@ -23,6 +23,7 @@
             <a href="#/importServerLogs">{{ 'CoreAdminHome_ImportingServerLogs'|translate }}</a>
             <a href="#/mobileAppsAndSdks">{{ 'SitesManager_MobileAppsAndSDKs'|translate }}</a>
             <a href="#/trackingApi">{{ 'CoreAdminHome_HttpTrackingApi'|translate }}</a>
+            <a href="#/singlePageApplication">{{ 'SitesManager_SiteWithoutDataSinglePageApplication'|translate }}</a>
             {{ postEvent('Template.endTrackingCodePageTableOfContents') }}
         </div>
     </div>
@@ -57,6 +58,11 @@
     <p>{{ 'CoreAdminHome_HttpTrackingApiDescription'|translate('<a href="https://developer.matomo.org/api-reference/tracking-api" rel="noreferrer noopener" target="_blank">','</a>')|raw }}</p>
 </div>
 
+<div piwik-content-block content-title="{{ 'SitesManager_SiteWithoutDataSinglePageApplication'|translate }}" anchor="singlePageApplication">
+     <p>{{ 'CoreAdminHome_SinglePageApplicationDescription'|translate('<a href="https://developer.matomo.org/guides/spa-tracking" rel="noreferrer noopener" target="_blank">','</a>')|raw }}</p>
+</div>
+
+
 {{ postEvent('Template.endTrackingCodePage') }}
 
 {% endblock %}
diff --git a/plugins/Installation/tests/UI/expected-screenshots/Installation_js_tracking.png b/plugins/Installation/tests/UI/expected-screenshots/Installation_js_tracking.png
index 38086a7c51..81692b05d3 100644
--- a/plugins/Installation/tests/UI/expected-screenshots/Installation_js_tracking.png
+++ b/plugins/Installation/tests/UI/expected-screenshots/Installation_js_tracking.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:486bc7f6e7e60d3fdb574e23ac244d9336617a07d24698ce56d58da94b307fa6
-size 237987
+oid sha256:2b1e4e18f0ab87028578d81871f2ac029eac579f679c6733e856264488629170
+size 252556
diff --git a/plugins/SitesManager/SitesManager.php b/plugins/SitesManager/SitesManager.php
index cb1680c6da..42879c1d51 100644
--- a/plugins/SitesManager/SitesManager.php
+++ b/plugins/SitesManager/SitesManager.php
@@ -447,5 +447,8 @@ class SitesManager extends \Piwik\Plugin
         $translationKeys[] = "SitesManager_EmailInstructionsButton";
         $translationKeys[] = "SitesManager_EmailInstructionsSubject";
         $translationKeys[] = "SitesManager_JsTrackingTagHelp";
+        $translationKeys[] = "SitesManager_SiteWithoutDataSinglePageApplication";
+        $translationKeys[] = "SitesManager_SiteWithoutDataSinglePageApplicationDescription";
+
     }
 }
diff --git a/plugins/SitesManager/lang/en.json b/plugins/SitesManager/lang/en.json
index 51b1ada059..8e0decd70e 100644
--- a/plugins/SitesManager/lang/en.json
+++ b/plugins/SitesManager/lang/en.json
@@ -85,8 +85,10 @@
         "SiteWithoutDataOtherIntegrations": "Other integrations",
         "SiteWithoutDataGoogleTagManager": "Google Tag Manager",
         "SiteWithoutDataMatomoTagManager": "Matomo Tag Manager",
+        "SiteWithoutDataSinglePageApplication": "Single-Page Application or Progressive Web App",
         "SiteWithoutDataMatomoTagManagerNotActive": "Don't know what a Tag Manager is? Check out our %1$sTag Manager guide%2$s. If you are embedding multiple resources from 3rd party websites into your website, then tracking your website using the Tag Manager may be a better choice for you compared to using the regular JavaScript tracking.",
         "SiteWithoutDataGoogleTagManagerDescription": "You can use Matomo with Google Tag Manager. To setup Matomo Tracking in Google Tag Manager, follow the instructions from this %1$sguide%2$s.",
+        "SiteWithoutDataSinglePageApplicationDescription": "For Single-Page Application or Progressive Web App Tracking. Check out our %1$sguide%2$s.",
         "SiteWithoutDataDetectedSite": "We've detected you're using a %1$s site. Simply follow the instructions from this %2$sguide%3$s.",
         "SiteWithoutDataDetectedGtm": "We've also detected you're using a Google Tag Manager. If you prefer to set up Matomo using GTM please follow this %2$sguide%3$s.",
         "SuperUserAccessCan": "A user with Super User access can also %1$s specify global settings%2$s for new websites.",
diff --git a/plugins/SitesManager/templates/_displayJavascriptCode.twig b/plugins/SitesManager/templates/_displayJavascriptCode.twig
index 52cced16af..d2dabea355 100644
--- a/plugins/SitesManager/templates/_displayJavascriptCode.twig
+++ b/plugins/SitesManager/templates/_displayJavascriptCode.twig
@@ -1,6 +1,6 @@
 <div class="trackingHelpHeader">
     <h2>{{ 'SitesManager_TrackingTags'|translate(displaySiteName) }}</h2>
-    <a class="btn" 
+    <a class="btn"
         href="mailto:?subject={{ 'SitesManager_EmailInstructionsSubject'|translate|url_encode|e('html_attr') }}&body={{ emailBody|url_encode|e('html_attr') }}">
         {{ 'SitesManager_EmailInstructionsButton'|translate }}
     </a>
@@ -35,6 +35,10 @@
 
     <h3>{{ 'CoreAdminHome_HttpTrackingApi'|translate }}</h3>
     <p>{{ 'CoreAdminHome_HttpTrackingApiDescription'|translate('<a href="https://developer.matomo.org/api-reference/tracking-api" rel="noreferrer noopener" target="_blank">','</a>')|raw }}</p>
+
+    <h3>{{ 'SitesManager_SiteWithoutDataSinglePageApplication'|translate }}</h3>
+    <p>{{ 'SitesManager_SiteWithoutDataSinglePageApplicationDescription'|translate('<a target="_blank" rel="noreferrer noopener" href="https://developer.matomo.org/guides/spa-tracking">','</a>')|raw }}</p>
+
     <p></p>
 
     {{ postEvent('Template.endTrackingHelpPage') }}
diff --git a/plugins/SitesManager/templates/_siteWithoutDataTabs.twig b/plugins/SitesManager/templates/_siteWithoutDataTabs.twig
index 6e50deb89e..5604415723 100644
--- a/plugins/SitesManager/templates/_siteWithoutDataTabs.twig
+++ b/plugins/SitesManager/templates/_siteWithoutDataTabs.twig
@@ -80,6 +80,9 @@
         <h3>{{ 'SitesManager_SiteWithoutDataGoogleTagManager'|translate }}</h3>
         <p>{{ 'SitesManager_SiteWithoutDataGoogleTagManagerDescription'|translate('<a target="_blank" rel="noreferrer noopener" href="https://matomo.org/faq/new-to-piwik/how-do-i-use-matomo-analytics-within-gtm-google-tag-manager">','</a>')|raw }}</p>
 
+        <h3>{{ 'SitesManager_SiteWithoutDataSinglePageApplication'|translate }}</h3>
+        <p>{{ 'SitesManager_SiteWithoutDataSinglePageApplicationDescription'|translate('<a target="_blank" rel="noreferrer noopener" href="https://developer.matomo.org/guides/spa-tracking">','</a>')|raw }}</p>
+
         {% if googleAnalyticsImporterMessage is defined %}
             {{ googleAnalyticsImporterMessage|raw }}
         {% endif %}
diff --git a/plugins/SitesManager/templates/_trackingCodeEmail.twig b/plugins/SitesManager/templates/_trackingCodeEmail.twig
index 804065ec4b..922d3c021a 100644
--- a/plugins/SitesManager/templates/_trackingCodeEmail.twig
+++ b/plugins/SitesManager/templates/_trackingCodeEmail.twig
@@ -33,7 +33,11 @@ https://matomo.org/integrate/#programming-language-platforms-and-frameworks
 ** {{ 'CoreAdminHome_HttpTrackingApi'|translate }}
 {{ 'CoreAdminHome_HttpTrackingApiDescription'|translate('', '') }}
 https://developer.matomo.org/api-reference/tracking-api
-    
+
+** {{ 'SitesManager_SiteWithoutDataSinglePageApplication'|translate }}
+{{ 'CoreAdminHome_SinglePageApplicationDescription'|translate('', '') }}
+https://developer.matomo.org/guides/spa-tracking
+
 ** {{ 'SitesManager_EmailInstructionsSiteDetailsHeading'|translate }}
 {{ 'SitesManager_EmailInstructionsSiteDetails'|translate }}
 * {{ 'SitesManager_EmailInstructionsYourSiteId'|translate(idSite) }}