Merge pull request #674 from matomo-org/pg-2969-js-tracker-install-check

Add tracking code install test to no data tab
matomo-org · Sep 7, 2023 · ea3b59e · ea3b59e
2 parents 94408aa + 5e84ca1
commit ea3b59e
Show file tree

Hide file tree

Showing 10 changed files with 10,467 additions and 4,568 deletions.
diff --git a/TagManager.php b/TagManager.php
@@ -16,6 +16,7 @@
 use Piwik\Log;
 use Piwik\Piwik;
 use Piwik\Plugin;
+use Piwik\Plugin\Manager;
 use Piwik\Plugins\TagManager\Access\Capability\PublishLiveContainer;
 use Piwik\Plugins\TagManager\Access\Capability\TagManagerWrite;
 use Piwik\Plugins\TagManager\Access\Capability\UseCustomTemplates;
@@ -266,6 +267,7 @@ public function addTagManagerCode(&$out)
         $view = new View("@TagManager/trackingCode");
         $view->action = Piwik::getAction();
         $view->showContainerRow = $model->getNumContainersTotal() > 1;
+        $view->isJsTrackerInstallCheckAvailable = Manager::getInstance()->isPluginActivated('JsTrackerInstallCheck');
         $out .= $view->render();
     }
 
@@ -854,6 +856,9 @@ public function getClientSideTranslationKeys(&$result)
         $result[] = 'TagManager_CustomUrl';
         $result[] = 'TagManager_PageViewTriggerName';
         $result[] = 'TagManager_MatomoTagName';
+        $result[] = 'TagManager_SiteWithoutDataMtmIntro';
+        $result[] = 'TagManager_SiteWithoutDataMtmStep2';
+        $result[] = 'TagManager_SiteWithoutDataMtmStep3';
     }
 
     public function getStylesheetFiles(&$stylesheets)

diff --git a/lang/en.json b/lang/en.json
@@ -915,6 +915,9 @@
         "SPAFollowStep14": "In the field \"%1$s\", set the version to, for example, %2$s1.0%3$s",
         "SPAFollowStep15": "Click the green \"%1$s\" button. Now that you have completed the configuration in the Tag Manager, follow the last step below to finish the setup within your app.",
         "SPAFollowStep16": "Copy the code below and paste it in the header of your SPA / PWA. We recommend pasting it immediately before the closing %1$s tag. %2$sLearn more%3$s.",
-        "ReactFollowStep16": "Inject the %1$sMatomo Tag Manager JS%2$s code into your %3$s (or other relevant files), we recommend doing this using the \"%4$s\" method. The example below shows how to add the %1$sMatomo Tag Manager JS%2$s code into a \"%5$s\" app in %6$s."
+        "ReactFollowStep16": "Inject the %1$sMatomo Tag Manager JS%2$s code into your %3$s (or other relevant files), we recommend doing this using the \"%4$s\" method. The example below shows how to add the %1$sMatomo Tag Manager JS%2$s code into a \"%5$s\" app in %6$s.",
+        "SiteWithoutDataMtmIntro": "The Matomo Tag Manager may be a better choice than tracking via the regular JavaScript code. It lets you manage and unify all your tracking and marketing tags (also known as \"pixels\" or \"custom HTML/JS tags\") in one place. Using the Matomo Tag Manager makes your life easier when you want to modify any of these tags, as you will no longer need a developer to make the needed changes for you. %1$sLearn more%2$s.",
+        "SiteWithoutDataMtmStep2": "If you would like to customize this container, visit the %1$sContainer Dashboard%2$s",
+        "SiteWithoutDataMtmStep3": "Copy the code below and paste it on every page of your website. We recommend pasting it immediately before the closing %1$s tag. %2$sLearn more%3$s."
     }
 }
diff --git a/templates/trackingCode.twig b/templates/trackingCode.twig
@@ -2,5 +2,6 @@
         vue-entry="TagManager.TrackingCodePage"
         current-action="{{ action|json_encode }}"
         show-container-row="{{ showContainerRow|json_encode }}"
+        is-js-tracker-install-check-available="{{ isJsTrackerInstallCheckAvailable|json_encode }}"
 >
 </div>
diff --git a/tests/UI/ContainerVersion_spec.js b/tests/UI/ContainerVersion_spec.js
@@ -193,7 +193,9 @@ describe("ContainerVersion", function () {
 
     it('should be able to create new version through menu', async function () {
         await page.goto(container1Base);
+        await page.waitForNetworkIdle();
         await (await page.jQuery('#secondNavBar .item:contains(Publish)')).click();
+        await page.waitForNetworkIdle();
         await page.evaluate(function () {
             if (window.scrollTo) {
                 window.scrollTo(0,0);

diff --git a/vue/dist/TagManager.umd.js b/vue/dist/TagManager.umd.js
diff --git a/vue/dist/TagManager.umd.min.js b/vue/dist/TagManager.umd.min.js
diff --git a/vue/src/TagmanagerTrackingCode/TagManagerTrackingCode.less b/vue/src/TagmanagerTrackingCode/TagManagerTrackingCode.less
@@ -1,11 +1,13 @@
-div[anchor='tagmanager'] div[matomo-tagmanager-tracking-code] {
+div.admin > div[vue-entry='TagManager.TrackingCodePage'] {
   .list-style-decimal {
     list-style-type: decimal;
     list-style-position: inside;
   }
 
-  .tagManagerTrackingCode .row {
-    margin-bottom: 0rem !important;
-    margin-top: -0.5rem !important;
+  .tagManagerTrackingCode {
+    > .row, > .row .row {
+      margin-bottom: -0.5rem !important;
+      margin-top: -0.5rem !important;
+    }
   }
 }
diff --git a/vue/src/TagmanagerTrackingCode/TagmanagerTrackingCode.vue b/vue/src/TagmanagerTrackingCode/TagmanagerTrackingCode.vue
@@ -4,22 +4,26 @@
   @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
 -->
 <template>
-  <div class="tagManagerTrackingCode">
+  <ol class="list-style-decimal">
+    <li v-html="$sanitize(setupStep1)" v-if="showContainerRow"></li>
     <TrackingCodeCommon
       :show-container-row="showContainerRow"
       :showBottom="true"
-      :showDescription="true"
+      :showDescription="false"
+      :showPlainMtmSteps="true"
+      :showTestSection="showTestSection"
       @fetchInstallInstructions="fetchInstallInstructions"
       ref="trackingCodeCommon"
     />
-  </div>
+  </ol>
 </template>
 
 <script lang="ts">
 import { defineComponent, nextTick } from 'vue';
 import {
   AjaxHelper,
-  SelectOnFocus,
+  MatomoUrl,
+  translate,
 } from 'CoreHome';
 import TrackingCodeCommon from './TrackingCodeCommon.vue';
 import {
@@ -29,24 +33,25 @@ import {
 export default defineComponent({
   props: {
     showContainerRow: Boolean,
+    showTestSection: Boolean,
   },
   components: {
     TrackingCodeCommon,
   },
-  directives: {
-    SelectOnFocus,
+  data() {
+    return {
+      setupStep1: '',
+    };
   },
   methods: {
     fetchInstallInstructions() {
       // eslint-disable-next-line
       const refs = (this.$refs.trackingCodeCommon as any);
       refs.installInstructions = [];
 
-      if (
-        !refs?.idContainer
-        || !refs?.environment
-        || !refs?.site?.id
-      ) {
+      this.updateStep1Text();
+
+      if (!refs?.site?.id || !refs?.environment) {
         return;
       }
 
@@ -71,6 +76,41 @@ export default defineComponent({
         refs.isLoading = false;
       });
     },
+    linkTo(action: string, idSite: string, idContainer: string, hash?: QueryParameters) {
+      let url = MatomoUrl.stringify({
+        ...MatomoUrl.urlParsed.value,
+        module: 'TagManager',
+        action,
+        idSite,
+        idContainer,
+      });
+      if (hash) {
+        url += `#?${MatomoUrl.stringify(hash)}`;
+      }
+      return `?${url}`;
+    },
+    updateStep1Text() {
+      // eslint-disable-next-line
+      const refs = (this.$refs.trackingCodeCommon as any);
+
+      if (!refs?.site?.id) {
+        return;
+      }
+
+      // Allow an empty container ID, since we only need the site ID for the URL
+      const idContainer = !refs?.idContainer ? '' : refs.idContainer;
+      const manageContainerURL = this.linkTo('manageContainers', refs.site.id, idContainer);
+      this.setupStep1 = translate(
+        'TagManager_SPAFollowStep1',
+        '<br><strong>',
+        '</strong>',
+        `<a href="${manageContainerURL}" target="_blank" rel="noreferrer noopener">`,
+        '</a>',
+      );
+    },
+  },
+  mounted() {
+    this.updateStep1Text();
   },
 });
 </script>
diff --git a/vue/src/TagmanagerTrackingCode/TrackingCodeCommon.vue b/vue/src/TagmanagerTrackingCode/TrackingCodeCommon.vue
@@ -74,38 +74,27 @@
           :href="installInstruction.helpUrl"
         >{{ translate('TagManager_LearnMore') }}</a>.
       </p>
-      <pre
-        class="codeblock"
-        v-text="installInstruction.embedCode"
-        v-select-on-focus="{}"
-        ref="codeblock"
-      />
-    </div>
-    <div v-if="showBottom">
-      <h3 v-if="idContainer && currentAction !== 'siteWithoutDataTabs'">
-        {{ translate('TagManager_CustomizeTracking') }}
-      </h3>
-      <p v-if="idContainer">{{ translate('TagManager_CustomizeTrackingTeaser') }}</p>
-      <ul v-if="idContainer">
-        <li v-if="!matomoConfigs.length">
-          {{ translate('TagManager_NoMatomoConfigFoundForContainer') }}
-        </li>
-        <li
-          v-for="matomoConfig in matomoConfigs"
-          :key="matomoConfig.idvariable"
-        >
-          <a :href="linkTo('manageVariables', idContainer,
-          {idVariable: matomoConfig.idvariable})"
-          >
-            <span class="icon-edit">&nbsp;</span>{{ matomoConfig.name }}
-          </a>
+      <div v-if="showPlainMtmSteps">
+        <li>
+          <span v-html="$sanitize(getMtmStep2)">
+          </span>.&nbsp;<span v-html="$sanitize(getLearnMoreLink)"></span>.
         </li>
-      </ul>
-      <p v-if="idContainer">
-        <a :href="linkTo('dashboard', idContainer)">
-          <span class="icon-show">&nbsp;</span>{{ translate('TagManager_ViewContainerDashboard') }}
-        </a>
-      </p>
+        <li v-html="$sanitize(getMtmStep3)"></li>
+      </div>
+      <div>
+        <pre
+          class="codeblock"
+          v-text="installInstruction.embedCode"
+          ref="codeblock"
+          v-copy-to-clipboard="{}"
+        />
+      </div>
+    </div>
+    <div v-if="showBottom" v-show="!noReleaseFound">
+      <p v-if="idContainer && !showTestSection" v-html="$sanitize(getCongratulationsText)"></p>
+      <template v-if="idContainer && showTestSection">
+        <li><component :is="testComponent" :site="site"></component></li>
+      </template>
     </div>
   </div>
 </template>
@@ -116,10 +105,12 @@ import {
   AjaxHelper,
   ActivityIndicator,
   SiteSelector,
-  SelectOnFocus,
   SiteRef,
   MatomoUrl,
   Matomo,
+  translate,
+  CopyToClipboard,
+  useExternalPluginComponent,
 } from 'CoreHome';
 import { Field } from 'CorePluginsAdmin';
 import {
@@ -165,6 +156,8 @@ export default defineComponent({
     currentAction: String,
     showBottom: Boolean,
     showDescription: Boolean,
+    showPlainMtmSteps: Boolean,
+    showTestSection: Boolean,
   },
   components: {
     ActivityIndicator,
@@ -173,7 +166,7 @@ export default defineComponent({
   },
   emits: ['fetchInstallInstructions'],
   directives: {
-    SelectOnFocus,
+    CopyToClipboard,
   },
   data(): TagmanagerTrackingCodeState {
     return {
@@ -315,11 +308,12 @@ export default defineComponent({
       this.$emit('fetchInstallInstructions');
       this.fetchVariables(draftVersion);
     },
-    linkTo(action: string, idContainer: string, hash: QueryParameters) {
+    linkTo(action: string, idSite: string, idContainer: string, hash: QueryParameters) {
       const newQuery = MatomoUrl.stringify({
         ...MatomoUrl.urlParsed.value,
         module: 'TagManager',
         action,
+        idSite,
         idContainer,
       });
 
@@ -349,5 +343,43 @@ export default defineComponent({
       });
     },
   },
+  computed: {
+    getLearnMoreLink() {
+      return translate(
+        'TagManager_CustomHtmlTagHelpText',
+        '<a rel="noreferrer noopener" target="_blank" href="https://matomo.org/faq/tag-manager/container-dashboard-in-matomo-tag-manager/">',
+        '</a>',
+      );
+    },
+    getMtmStep2() {
+      const idSite = this.site && this.site.id ? this.site.id as string : '';
+      const link = this.linkTo('dashboard', idSite, this.idContainer, []);
+      return translate(
+        'TagManager_SiteWithoutDataMtmStep2',
+        `<a href="${link}">`,
+        '</a>',
+      );
+    },
+    getMtmStep3() {
+      return translate(
+        'TagManager_SiteWithoutDataMtmStep3', '&lt;/head&gt;',
+        '<a rel="noreferrer noopener" target="_blank" href="https://developer.matomo.org/guides/tagmanager/embedding">',
+        '</a>',
+      );
+    },
+    getCongratulationsText() {
+      return translate(
+        'TagManager_SiteWithoutDataReactFollowStepCompleted',
+        '<strong>',
+        '</strong>',
+      );
+    },
+    testComponent() {
+      if (this.showTestSection) {
+        return useExternalPluginComponent('JsTrackerInstallCheck', 'JsTrackerInstallCheck');
+      }
+      return '';
+    },
+  },
 });
 </script>
diff --git a/vue/src/TagmanagerTrackingCode/TrackingCodePage.vue b/vue/src/TagmanagerTrackingCode/TrackingCodePage.vue
@@ -6,20 +6,30 @@
 
 <template>
   <div v-if="currentAction === 'siteWithoutDataTabs'">
-    <p v-html="$sanitize(trackingInfoTextLine1)"></p>
-    <p v-html="$sanitize(trackingInfoTextLine2)"></p>
-    <TagmanagerTrackingCode :show-container-row="showContainerRow" :current-action="currentAction"/>
+    <p v-html="$sanitize(siteWithoutDataMtmIntro)"></p>
+    <br>
+    <p>
+      <strong>{{ translate('SitesManager_SiteWithoutDataCloudflareFollowStepsIntro') }}</strong>
+    </p>
+    <TagmanagerTrackingCode
+      :show-container-row="showContainerRow"
+      :current-action="currentAction"
+      :showTestSection="isJsTrackerInstallCheckAvailable"/>
   </div>
   <ContentBlock
     anchor="tagmanager"
     :content-title="translate('TagManager_MatomoTagManager')"
     v-else
   >
-    <p>&nbsp;</p>
-    <p v-html="$sanitize(trackingInfoTextLine1)"></p>
+    <p v-html="$sanitize(siteWithoutDataMtmIntro)"></p>
     <br>
-    <p v-html="$sanitize(trackingInfoTextLine2)"></p>
-    <TagmanagerTrackingCode :show-container-row="showContainerRow" :current-action="currentAction"/>
+    <p>
+      <strong>{{ translate('SitesManager_SiteWithoutDataCloudflareFollowStepsIntro') }}</strong>
+    </p>
+    <TagmanagerTrackingCode
+      :show-container-row="showContainerRow"
+      :current-action="currentAction"
+      :showTestSection="false"/>
   </ContentBlock>
 </template>
 
@@ -32,6 +42,7 @@ export default defineComponent({
   props: {
     currentAction: String,
     showContainerRow: Boolean,
+    isJsTrackerInstallCheckAvailable: Boolean,
   },
   components: {
     ContentBlock,
@@ -64,6 +75,19 @@ export default defineComponent({
         '</a>',
       );
     },
+    siteWithoutDataMtmIntro() {
+      const gettingStartedLink = `?${MatomoUrl.stringify({
+        ...MatomoUrl.urlParsed.value,
+        module: 'TagManager',
+        action: 'gettingStarted',
+      })}`;
+
+      return translate(
+        'TagManager_SiteWithoutDataMtmIntro',
+        `<a href="${gettingStartedLink}">`,
+        '</a>',
+      );
+    },
   },
 });
 </script>