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

3 files changed, 10 insertions, 0 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 %}