Merge pull request #456 from matomo-org/nodatalayout

Adjustments according to new no data page layout

SiteContentDetection/GoogleAnalyticsImporter.php

@@ -28,7 +28,12 @@ public static function getName(): string
         return Piwik::translate('GoogleAnalyticsImporter_AdminMenuTitle');
     }
 
-    public static function getContentType(): string
+    public static function getIcon(): string
+    {
+        return './plugins/GoogleAnalyticsImporter/images/ga-icon.svg';
+    }
+
+    public static function getContentType(): int
     {
         return self::TYPE_OTHER;
     }
@@ -43,16 +48,18 @@ public function isDetected(?string $data = null, ?array $headers = null): bool
         return false;
     }
 
-    public function shouldShowInstructionTab(SiteContentDetector $detector = null): bool
+    public function isRecommended(SiteContentDetector $detector): bool
     {
-        return Piwik::hasUserSuperUserAccess() && (
-            $detector->wasDetected(GoogleAnalytics3::getId()) || $detector->wasDetected(GoogleAnalytics4::getId())
-        );
+        return $detector->wasDetected(GoogleAnalytics3::getId()) || $detector->wasDetected(GoogleAnalytics4::getId());
     }
 
-    public function shouldHighlightTabIfShown(): bool
+    public function getRecommendationDetails(SiteContentDetector $detector): array
     {
-        return true;
+        return [
+            'title' => Piwik::translate('GoogleAnalyticsImporter_RecommendationTitle'),
+            'text' => Piwik::translate('GoogleAnalyticsImporter_RecommendationText'),
+            'button' => Piwik::translate('GoogleAnalyticsImporter_RecommendationButton'),
+        ];
     }
 
     public function renderInstructionsTab(SiteContentDetector $detector): string
@@ -71,7 +78,6 @@ public function renderInstructionsTab(SiteContentDetector $detector): string
         $view->extensions = Controller::getComponentExtensions(true);
         $view->hasClientConfiguration = $authorization->hasClientConfiguration();
         $view->isConfigured = $authorization->hasAccessToken();
-        $view->isNoDataPage = true;
         return $view->render();
     }
 

javascripts/googleAnalyticsImporter.js

@@ -23,7 +23,7 @@
     (async () => {
       const response = await fetch(window.piwik.piwik_url + '/index.php?' + new URLSearchParams(searchParams));
       const data = await response.json();
-      if ($('.site-without-data').length && data.isGASite) {
+      if ($('#site-without-data').length && data.isGASite) {
         displayPendingNotification('', 'successMessage');
       } else if (data.displayPending) {
         displayPendingNotification(data.availableDate, 'infoMessage');

lang/en.json

@@ -154,6 +154,9 @@
         "UploadSuccessful": "Upload successful!",
         "StreamId": "Stream ID",
         "StreamIdFilter": "Filter by Stream ID (optional)",
-        "StreamIdFilterHelpText": "The Stream ID for which you want to import data. %1$sLearn more.%2$s %3$sNote:%4$s Leave this field blank to import data from all streams."
+        "StreamIdFilterHelpText": "The Stream ID for which you want to import data. %1$sLearn more.%2$s %3$sNote:%4$s Leave this field blank to import data from all streams.",
+        "RecommendationTitle": "Import Google Analytics data to Matomo (recommended for you)",
+        "RecommendationText": "We have detected Google Analytics on your site, so you can set up Matomo by importing your Google Analytics data.",
+        "RecommendationButton": "Import data"
     }
 }

plugin.json

@@ -4,7 +4,7 @@
     "version": "5.0.2",
     "theme": false,
     "require": {
-        "matomo": ">=5.0.0-rc3,<6.0.0-b1"
+        "matomo": ">=5.0.0-rc5,<6.0.0-b1"
     },
     "authors": [
         {

stylesheets/styles.less

@@ -17,10 +17,14 @@
 }
 
 #site-without-data {
-  #googleanalyticsimporter {
+  #start-tracking-details[data-method=GoogleAnalyticsImporter] {
     .form-group.row {
       margin-top: -0.5rem;
       margin-bottom: unset;
+
+      .col {
+        padding-left: 0;
+      }
     }
 
     .ga-import-warning {
@@ -37,7 +41,6 @@
     }
 
     .btn-quick-connect, .advance-upload-button, .btn-forward-to-Oauth {
-      margin-left: 1.5rem;
       margin-top: 1rem;
       margin-bottom: 1.2rem;
     }

templates/gaImportNoData.twig

@@ -1,12 +1,11 @@
+<h2>{{ 'SitesManager_StepByStepGuide'|translate }}</h2>
+
 {% if isGA3 %}
     <div class="alert alert-warning" id="ga3WarningNotification">
         {{ 'GoogleAnalyticsImporter_ConfigureTheImporterHelpNewDate'|translate('<strong>', '</strong>')|raw }}
         <button type="button" class="close" data-dismiss="alert"> × </button>
     </div>
 {% endif %}
-<div class="right">
-    <img src="plugins/GoogleAnalyticsImporter/images/google-analytics.png" style="height: 3rem;">
-</div>
 <p>{{ 'GoogleAnalyticsImporter_NoDataScreenIntro'|translate }}</p>
 <br>
 {% if isConnectAccountsActivated %}
@@ -15,8 +14,7 @@
 {% else %}
     <p>{{ 'GoogleAnalyticsImporter_NoDataScreenFollowThisSteps'|translate }}</p>
 {% endif %}
-<ul class="list-style-decimal" id="{{ isConnectAccountsActivated ? 'manual-advance-option' : 'manual-option' }}">
-<div
+<ul class="list-style-decimal" id="{{ isConnectAccountsActivated ? 'manual-advance-option' : 'manual-option' }}"
         vue-entry="GoogleAnalyticsImporter.Connect"
         is-no-data-page="true"
         extensions="{{ extensions|json_encode }}"
@@ -28,7 +26,6 @@
         configure-connection-props="{{ configureConnectionProps|json_encode }}"
         strategy-to-use="{{ strategy }}"
 >
-</div>
 </ul>
 <br>
 <p>{{ 'GoogleAnalyticsImporter_NoDataScreenFollowStepComplete'|translate('<strong>', '</strong>', '<a href="'~ linkTo({'action': 'index', 'module': 'GoogleAnalyticsImporter'}) ~ '" target="_blank" rel="noreferrer noopener  ">', '</a>')|raw }}</p>

tests/UI/EmptySite_GA_spec.js

@@ -10,16 +10,58 @@
 describe("EmptySite_GA", function () {
   this.timeout(0);
 
-  this.fixture = "Piwik\\Plugins\\GoogleAnalyticsImporter\\tests\\Fixtures\\EmptySiteWithSiteContentDetectionGA";
+  this.fixture = "Piwik\\Tests\\Fixtures\\EmptySite";
 
   const generalParams = 'idSite=1&period=day&date=2010-01-03';
 
-  it('should show no data screen with GA import and with ga3 offset banner', async function () {
+  before(function () {
+    testEnvironment.detectedContentDetections = [];
+    testEnvironment.connectedConsentManagers = [];
+    testEnvironment.save();
+  });
+
+  after(function () {
+    // unset all detections so fake class is no longer used
+    delete testEnvironment.detectedContentDetections;
+    delete testEnvironment.connectedConsentManagers;
+    testEnvironment.save();
+  });
+
+  it('should show no data screen with GA import recommended', async function () {
+    testEnvironment.detectedContentDetections = ['GoogleAnalytics3', 'Cloudflare'];
+    testEnvironment.connectedConsentManagers = [];
+    testEnvironment.save();
+
     const urlToTest = "?" + generalParams + "&module=CoreHome&action=index";
     await page.goto(urlToTest);
 
     const pageElement = await page.$('.page');
-    expect(await pageElement.screenshot()).to.matchImage('emptySiteDashboard');
+    expect(await pageElement.screenshot()).to.matchImage('list');
   });
 
+  it('should show import details with ga3 offset banner', async function () {
+    await page.evaluate(() => $('#start-tracking-detection a[href="#googleanalyticsimporter"]')[0].click());
+
+    const pageElement = await page.$('.page');
+    expect(await pageElement.screenshot()).to.matchImage('details_ga3');
+  });
+
+  it('should show no data screen with GA import recommended', async function () {
+    testEnvironment.detectedContentDetections = ['GoogleAnalytics4', 'Cloudflare'];
+    testEnvironment.connectedConsentManagers = [];
+    testEnvironment.save();
+
+    const urlToTest = "?" + generalParams + "&module=CoreHome&action=index";
+    await page.goto(urlToTest);
+
+    const pageElement = await page.$('.page');
+    expect(await pageElement.screenshot()).to.matchImage('list');
+  });
+
+  it('should show import details', async function () {
+    await page.evaluate(() => $('#start-tracking-detection a[href="#googleanalyticsimporter"]')[0].click());
+
+    const pageElement = await page.$('.page');
+    expect(await pageElement.screenshot()).to.matchImage('details_ga4');
+  });
 });