Updated design for Other ways tab, #PG-2871 (#21081)

* Updated design for Other ways tab, #PG-2871

* Removed unwanted translation key amd updated UI tests

* Removed translation key changes

* PO chnages and added UI test for other tab

* Removed ol

* Updated UI test files

* Removed unwanted translation

plugins/CoreAdminHome/lang/en.json

@@ -33,7 +33,6 @@
         "ImageTrackingLink": "Image Tracking Link",
         "ImportFromGoogleAnalytics": "Import from Google Analytics",
         "ImportFromGoogleAnalyticsDescription": "If you have a Google Analytics property and are switching to Matomo, you can import your existing data using the %1$sGoogleAnalyticsImporter%2$s plugin.",
-        "ImportingServerLogs": "Importing Server Logs",
         "ImportingServerLogsDesc": "An alternative to tracking visitors through the browser (either via JavaScript or an image link) is to continuously import server logs. Learn more about %1$sServer Log File Analytics%2$s.",
         "InvalidPluginsWarning": "The following plugins are not compatible with %1$s and could not be loaded: %2$s.",
         "InvalidPluginsYouCanUninstall": "You can update or uninstall these plugins on the %1$sManage Plugins%2$s page.",

plugins/CoreAdminHome/templates/trackingCodeGenerator.twig

@@ -20,7 +20,7 @@
             {{ 'General_GoTo2'|translate }}:
             <a href="#/javaScriptTracking">{{ 'CoreAdminHome_JavaScriptTracking'|translate  }}</a>
             <a href="#/imageTracking">{{ 'CoreAdminHome_ImageTracking'|translate }}</a>
-            <a href="#/importServerLogs">{{ 'CoreAdminHome_ImportingServerLogs'|translate }}</a>
+            <a href="#/importServerLogs">{{ 'SitesManager_LogAnalytics'|translate }}</a>
             <a href="#/mobileAppsAndSdks">{{ 'SitesManager_MobileAppsAndSDKs'|translate }}</a>
             <a href="#/trackingApi">{{ 'CoreAdminHome_HttpTrackingApi'|translate }}</a>
             <a href="#/singlePageApplication">{{ 'SitesManager_SiteWithoutDataSinglePageApplication'|translate }}</a>
@@ -48,7 +48,7 @@
     default-site="{{ defaultSiteDecoded|json_encode }}"
 ></div>
 
-<div vue-entry="CoreHome.ContentBlock" content-title="{{ 'CoreAdminHome_ImportingServerLogs'|translate }}"
+<div vue-entry="CoreHome.ContentBlock" content-title="{{ 'SitesManager_LogAnalytics'|translate }}"
      anchor="importServerLogs">
     <p>
         {{ 'CoreAdminHome_ImportingServerLogsDesc'|translate('<a href="https://matomo.org/log-analytics/" rel="noreferrer noopener" target="_blank">','</a>')|raw }}

plugins/SitesManager/lang/en.json

@@ -59,7 +59,7 @@
         "LogAnalyticsDescription": "If the Javascript tracking method isn’t feasible, you can %1$suse server log analytics%2$s as an alternative method for tracking your website’s users.",
         "MainDescription": "Your Web Analytics reports need Websites! Add, update, delete Websites, and show the JavaScript to insert in your pages.",
         "MenuManage": "Manage",
-        "MobileAppsAndSDKs": "Mobile apps and SDKs",
+        "MobileAppsAndSDKs": "Mobile Apps and SDKs",
         "MobileAppsAndSDKsDescription": "Not tracking a website? You can alternatively track a mobile app or any other type of application using one of the %1$savailable SDKs%2$s.",
         "NotAnEcommerceSite": "Not an Ecommerce site",
         "NotFound": "No websites found for",
@@ -211,6 +211,10 @@
         "ReactDetectedEmail": "React.js was detected on your website. Did you know you can use the \"Matomo Tag Manager\" to track the website data? Learn more here: %1$s",
         "SiteWithoutDataSPADescription": "It is easy to start tracking your Single Page Application (SPA) or Progressive Web App (PWA) using Matomo Analytics. The easiest way to do this is using the Matomo Tag Manager (%1$slearn more%2$s) using the steps below, alternatively you can use the JavaScript Tracking code (%3$sfollowing this guide%4$s).",
         "SiteWithoutDataSPAFollowStepCompleted": "%1$sCongratulations!%2$s You have successfully installed the Matomo Analytics tracking code via the Matomo Tag Manager. To verify that hits are being tracked, visit your SPA / PWA and check that this data is visible in your Matomo instance.",
-        "SiteWithoutDataGoogleAnalyticsImport": "Google Analytics Import"
+        "SiteWithoutDataGoogleAnalyticsImport": "Google Analytics Import",
+        "OtherWaysTabDescription": "Even if the solutions provided in the other tabs were not right for you, you can easily setup Matomo with one of the methods below. You may need the following information:",
+        "ImageTrackingDescription": "When a visitor has disabled JavaScript, or when JavaScript cannot be used, you can use an image tracking link to track visitors. For the whole list of options you can use with an image tracking link, see the %1$sTracking API Documentation%2$s.",
+        "ImportDataFromGoogleAnalytics": "Import Data from Google Analytics",
+        "ImportDataFromGoogleAnalyticsDescription": "Import your Google Analytics properties and reporting data to create a backup and analyse them using Matomo’s powerful analytics tools. Check out our %1$sguide%2$s."
     }
 }

plugins/SitesManager/stylesheets/SitesManager.less

@@ -289,6 +289,12 @@ td.editable-site-field:hover {
             }
         }
     }
+
+    #other {
+        h3 {
+            margin-bottom: 0.4rem;
+        }
+    }
 }
 
 #js-visitor-cv-extra th {

plugins/SitesManager/templates/_siteWithoutDataTabs.twig

@@ -214,7 +214,14 @@
     {% endif %}
 
     <div id="other" class="col s12">
-        <h3 class="no-mt-top">{{ 'SitesManager_LogAnalytics'|translate }}</h3>
+        <p>{{ 'SitesManager_OtherWaysTabDescription'|translate }}</p>
+        <p>Matomo URL: <code vue-directive="CoreHome.CopyToClipboard">{{ piwikUrl }}</code></p>
+        <p>{{ 'SitesManager_EmailInstructionsYourSiteId'|translate('<code vue-directive="CoreHome.CopyToClipboard">' ~ idSite ~ '</code>')|raw }}</p>
+
+        <h3>{{ 'CoreAdminHome_ImageTracking'|translate }}</h3>
+        <p>{{ 'SitesManager_ImageTrackingDescription'|translate('<a href="https://matomo.org/docs/tracking-api/reference/" rel="noreferrer noopener" target="_blank">', '</a>')|raw }}</p>
+
+        <h3>{{ 'SitesManager_LogAnalytics'|translate }}</h3>
         <p>{{ 'SitesManager_LogAnalyticsDescription'|translate('<a href="https://matomo.org/log-analytics/" rel="noreferrer noopener" target="_blank">', '</a>')|raw }}</p>
 
         <h3>{{ 'SitesManager_MobileAppsAndSDKs'|translate }}</h3>
@@ -223,26 +230,36 @@
         <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_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>WordPress</h3>
-        <p>{{ 'SitesManager_SiteWithoutDataWordpressDescription'|translate('<a target="_blank" rel="noreferrer noopener" href="https://matomo.org/faq/new-to-piwik/how-do-i-install-the-matomo-tracking-code-on-wordpress/">','</a>')|raw }}</p>
+        {% if not gtmUsed %}
+            <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>
+        {% endif %}
 
-        <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 cms is not same as('wordpress') %}
+            <h3>WordPress</h3>
+            <p>{{ 'SitesManager_SiteWithoutDataWordpressDescription'|translate('<a target="_blank" rel="noreferrer noopener" href="https://matomo.org/faq/new-to-piwik/how-do-i-install-the-matomo-tracking-code-on-wordpress/">','</a>')|raw }}</p>
+        {% endif %}
 
-        <h3>Cloudflare</h3>
-        <p>{{ 'SitesManager_SiteWithoutDataCloudflareDescription'|translate('<a target="_blank" rel="noreferrer noopener" href="https://matomo.org/faq/new-to-piwik/how-do-i-install-the-matomo-tracking-code-on-my-cloudflare-setup/">','</a>')|raw }}</p>
+        {% if not cloudflare %}
+            <h3>Cloudflare</h3>
+            <p>{{ 'SitesManager_SiteWithoutDataCloudflareDescription'|translate('<a target="_blank" rel="noreferrer noopener" href="https://matomo.org/faq/new-to-piwik/how-do-i-install-the-matomo-tracking-code-on-my-cloudflare-setup/">','</a>')|raw }}</p>
+        {% endif %}
 
-        <h3>Vue.js</h3>
-        <p>{{ 'SitesManager_SiteWithoutDataVueDescription'|translate('<a target="_blank" rel="noreferrer noopener" href="https://github.com/AmazingDreams/vue-matomo">vue-matomo</a>', '<a target="_blank" rel="noreferrer noopener" href="https://matomo.org/faq/new-to-piwik/how-do-i-install-the-matomo-tracking-code-on-websites-that-use-vue-js/">','</a>')|raw }}</p>
+        {% if jsFramework is not same as('vue')  %}
+            <h3>Vue.js</h3>
+            <p>{{ 'SitesManager_SiteWithoutDataVueDescription'|translate('<a target="_blank" rel="noreferrer noopener" href="https://github.com/AmazingDreams/vue-matomo">vue-matomo</a>', '<a target="_blank" rel="noreferrer noopener" href="https://matomo.org/faq/new-to-piwik/how-do-i-install-the-matomo-tracking-code-on-websites-that-use-vue-js/">','</a>')|raw }}</p>
+        {% endif %}
 
-        <h3>React.js</h3>
-        <p>{{ 'SitesManager_SiteWithoutDataReactDescription'|translate('<a target="_blank" rel="noreferrer noopener" href="https://matomo.org/guide/tag-manager/">', '</a>', '<a target="_blank" rel="noreferrer noopener" href="https://matomo.org/faq/new-to-piwik/how-do-i-start-tracking-data-with-matomo-on-websites-that-use-react/">','</a>')|raw }}</p>
+        {% if jsFramework is not same as('react') %}
+            <h3>React.js</h3>
+            <p>{{ 'SitesManager_SiteWithoutDataReactDescription'|translate('<a target="_blank" rel="noreferrer noopener" href="https://matomo.org/guide/tag-manager/">', '</a>', '<a target="_blank" rel="noreferrer noopener" href="https://matomo.org/faq/new-to-piwik/how-do-i-start-tracking-data-with-matomo-on-websites-that-use-react/">','</a>')|raw }}</p>
+        {% endif %}
 
-        {% if googleAnalyticsImporterMessage is defined %}
+        {% if googleAnalyticsImporterMessage is defined and googleAnalyticsImporterMessage is not empty  %}
             {{ googleAnalyticsImporterMessage|raw }}
+        {% elseif not ga3Used and not ga4Used %}
+            <h3>{{ 'SitesManager_ImportDataFromGoogleAnalytics'|translate }}</h3>
+            <p>{{ 'SitesManager_ImportDataFromGoogleAnalyticsDescription'|translate('<a target="_blank" rel="noreferrer noopener" href="https://matomo.org/guide/installation-maintenance/import-google-analytics/">', '</a>')|raw }}</p>
         {% endif %}
     </div>
 </div>

tests/UI/specs/EmptySite_spec.js

@@ -49,6 +49,14 @@ describe("EmptySite", function () {
         expect(await pageElement.screenshot()).to.matchImage('spa_pwa_page');
       });
 
+    it('should show the Other tab when clicked', async function () {
+        await page.evaluate(() => $('.no-data-screen-ul-tabs a[href="#other"]')[0].click());
+        await page.waitForTimeout(500);
+
+        const pageElement = await page.$('.page');
+        expect(await pageElement.screenshot()).to.matchImage('other_page');
+    });
+
     it('should have button to send tracking code to developer', async function() {
         var mailtoLink = await page.$eval('.emailTrackingCode', link => link.getAttribute('href'));