[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>

5 files changed, 18 insertions, 2 deletions

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