Added no-data tab for ga-import (#21008)

* Added no-data tab for ga-import, #PG-2926 * Started hiding logo images for width < 1000px
matomo-org · Jul 14, 2023 · fd2741c · fd2741c
1 parent 6bb1030
commit fd2741c
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 1 deletion.
diff --git a/plugins/SitesManager/Controller.php b/plugins/SitesManager/Controller.php
@@ -260,6 +260,8 @@ public function siteWithoutDataTabs()
             'serverSideDoNotTrackEnabled' => $dntChecker->isActive()
         ];
 
+        $templateData['showGAImportTab'] = $this->shouldShowGAImportTab($templateData);
+
         if ($this->siteContentDetector->consentManagerId) {
             $templateData['consentManagerName'] = $this->siteContentDetector->consentManagerName;
             $templateData['consentManagerUrl'] = $this->siteContentDetector->consentManagerUrl;
@@ -286,6 +288,8 @@ private function getActiveTabOnLoad($templateData)
             $tabToDisplay = 'gtm';
         } else if (!empty($templateData['cms']) && $templateData['cms'] === SitesManager::SITE_TYPE_WORDPRESS) {
             $tabToDisplay = 'wordpress';
+        } else if (!empty($templateData['showGAImportTab'])) {
+            $tabToDisplay = 'ga-import';
         } else if (!empty($templateData['cloudflare'])) {
             $tabToDisplay = 'cloudflare';
         } else if (!empty($templateData['jsFramework']) && $templateData['jsFramework'] === SitesManager::JS_FRAMEWORK_VUE) {
@@ -422,4 +426,13 @@ private function getSingleNotifications(&$templateData)
 
         return $info;
     }
+
+    private function shouldShowGAImportTab($templateData)
+    {
+        if (Piwik::hasUserSuperUserAccess() && Manager::getInstance()->isPluginActivated('GoogleAnalyticsImporter') && (!empty($templateData['ga3Used']) || !empty($templateData['ga4Used']))) {
+            return true;
+        }
+
+        return false;
+    }
 }
diff --git a/plugins/SitesManager/lang/en.json b/plugins/SitesManager/lang/en.json
@@ -210,6 +210,7 @@
         "ReactDetected": "React.js was detected on your website. Did you know you can use the \"%1$sMatomo Tag Manager%2$s\" to integrate Matomo into your site? %3$sLearn more in this guide%4$s.",
         "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."
+        "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"
     }
 }
diff --git a/plugins/SitesManager/stylesheets/SitesManager.less b/plugins/SitesManager/stylesheets/SitesManager.less
@@ -281,6 +281,14 @@ td.editable-site-field:hover {
     .list-style-disc {
         list-style: disc inside;
     }
+
+    @media screen {
+        @media (max-width: 999px) {
+            .right img {
+                display: none;
+            }
+        }
+    }
 }
 
 #js-visitor-cv-extra th {

diff --git a/plugins/SitesManager/templates/_siteWithoutDataTabs.twig b/plugins/SitesManager/templates/_siteWithoutDataTabs.twig
@@ -30,6 +30,9 @@
             {%  if tagManagerActive %}
                 <li class="tab col {{ columnClass }}"><a href="#spa">SPA / PWA</a></li>
             {% endif %}
+            {% if showGAImportTab %}
+                <li class="tab col {{ columnClass }}"><a {% if activeTab == 'ga-import' %} class="active" {% endif %} href="#ga-import">{{ 'SitesManager_SiteWithoutDataGoogleAnalyticsImport'|translate }}</a></li>
+            {% endif %}
             <li class="tab col {{ columnClass }}"><a href="#other">{{ 'SitesManager_SiteWithoutDataOtherWays'|translate }}</a></li>
         </ul>
     </div>
@@ -192,6 +195,12 @@
         </div>
     {% endif %}
 
+    {% if showGAImportTab %}
+    <div id="ga-import" class="col s12">
+        {{ postEvent('Template.embedGAImportNoData', ga3Used) }}
+    </div>
+    {% endif %}
+
     <div id="other" class="col s12">
         <h3 class="no-mt-top">{{ 'SitesManager_LogAnalytics'|translate }}</h3>
         <p>{{ 'SitesManager_LogAnalyticsDescription'|translate('<a href="https://matomo.org/log-analytics/" rel="noreferrer noopener" target="_blank">', '</a>')|raw }}</p>