Simplify and clean up vue components for tracking code

TagManager.php

@@ -429,10 +429,8 @@ public function getClientSideTranslationKeys(&$result)
         $result[] = 'TagManager_ConfigureEnvironmentsSuperUser';
         $result[] = 'TagManager_WantToDeployThisChangeCreateVersion';
         $result[] = 'TagManager_ConfigureWhenTagDoes';
-        $result[] = 'TagManager_CustomizeTracking';
         $result[] = 'TagManager_ViewContainerDashboard';
         $result[] = 'TagManager_NoMatomoConfigFoundForContainer';
-        $result[] = 'TagManager_CustomizeTrackingTeaser';
         $result[] = 'TagManager_PublishLiveEnvironmentCapabilityRequired';
         $result[] = 'TagManager_CapabilityPublishLiveContainer';
         $result[] = 'TagManager_VersionAlreadyPublishedToAllEnvironments';

lang/en.json

@@ -272,8 +272,6 @@
         "CustomRequestProcessingVariableName": "Custom Request Processing Function",
         "CustomRequestProcessingVariableDescription": "A custom function to use with a Matomo Tracker that can transform all tracking requests.",
         "CustomVariables": "Custom variables",
-        "CustomizeTracking": "Customize Tracking",
-        "CustomizeTrackingTeaser": "Want to configure the Matomo tracking for this container? Here is a list of existing Matomo configurations in this container:",
         "DashboardHelp1": "How does the \"Tag Manager → Dashboard\" page help me?",
         "DashboardHelp2": "The Tag Manager Dashboard provides an instant overview of both the names and quantity of tags, triggers, variables and versions of container configurations that have been created in your Matomo Tag Manager.",
         "DashboardHelp3": "Within the Tag Manager Dashboard, you also can edit or create new tags, triggers, variables and versions.",

vue/src/TagmanagerTrackingCode/TagManagerTrackingCode.less

@@ -1,13 +1,21 @@
-div.admin > div[vue-entry='TagManager.TrackingCodePage'] {
-  .list-style-decimal {
-    list-style-type: decimal;
-    list-style-position: inside;
+.tagManagerTrackingCode {
+  padding-top: 1rem;
+  display: inline-block;
+
+  > .row, > .row .row {
+    margin-bottom: 0;
+    margin-top: -0.5rem;
+  }
+
+  .loadingPiwik {
+    margin: 1.5rem 0;
+  }
+
+  .select-wrapper input.select-dropdown {
+    margin: 8px 0 0 0;
   }
 
-  .tagManagerTrackingCode {
-    > .row, > .row .row {
-      margin-bottom: -0.5rem !important;
-      margin-top: -0.5rem !important;
-    }
+  label[for="containers"], label[for="environment"] {
+    top: -4px !important;
   }
 }

vue/src/TagmanagerTrackingCode/TrackingCodeCommon.vue

@@ -1,11 +1,14 @@
 <template>
   <div class="tagManagerTrackingCode">
     <ActivityIndicator
-      :style="{opacity: isLoading ? 1 : 0}"
+      v-show="isLoading"
       :loading="true"
       v-if="showContainerRow || environments.length > 1"
     />
-    <div class="row" v-if="showContainerRow || environments.length > 1">
+    <div class="row"
+         v-if="showContainerRow || environments.length > 1"
+         v-show="!isLoading"
+    >
       <div class="col s12 m4 ">
         <div class="form-group row">
           <div class="col s12 input-field">
@@ -63,7 +66,7 @@
       {{ translate('TagManager_NoReleasesFoundForContainer') }}
       <a href>{{ translate('TagManager_PublishVersionToEnvironmentToViewEmbedCode') }} </a>
     </div>
-    <div
+    <template
       v-for="(installInstruction, index) in installInstructions"
       :key="index"
     >
@@ -74,13 +77,13 @@
           :href="installInstruction.helpUrl"
         >{{ translate('TagManager_LearnMore') }}</a>.
       </p>
-      <div v-if="showPlainMtmSteps">
+      <template v-if="showPlainMtmSteps">
         <li>
           <span v-html="$sanitize(getMtmStep2)">
           </span>.&nbsp;<span v-html="$sanitize(getLearnMoreLink)"></span>.
         </li>
         <li v-html="$sanitize(getMtmStep3)"></li>
-      </div>
+      </template>
       <div>
         <pre
           class="codeblock"
@@ -89,13 +92,13 @@
           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">
+    </template>
+    <template v-if="showBottom && !noReleaseFound && idContainer">
+      <p v-if="!showTestSection" v-html="$sanitize(getCongratulationsText)"></p>
+      <template v-else>
         <li><component :is="testComponent" :site="site"></component></li>
       </template>
-    </div>
+    </template>
   </div>
 </template>
 

vue/src/TagmanagerTrackingCode/TrackingCodePage.vue

@@ -5,38 +5,42 @@
 -->
 
 <template>
-  <div v-if="currentAction === 'getTrackingMethodsForSite'">
-    <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
+  <component
+    :is="currentAction === 'getTrackingMethodsForSite' ? 'div' : 'ContentBlock'"
     anchor="tagmanager"
     :content-title="translate('TagManager_MatomoTagManager')"
-    v-else
   >
     <p v-html="$sanitize(siteWithoutDataMtmIntro)"></p>
     <br>
     <p>
       <strong>{{ translate('SitesManager_SiteWithoutDataCloudflareFollowStepsIntro') }}</strong>
     </p>
-    <TagmanagerTrackingCode
-      :show-container-row="showContainerRow"
-      :current-action="currentAction"
-      :showTestSection="false"/>
-  </ContentBlock>
+    <ol style="list-style: inside decimal">
+      <li v-html="$sanitize(setupStep1)" v-if="showContainerRow"></li>
+      <TrackingCodeCommon
+        :show-container-row="showContainerRow"
+        :showBottom="true"
+        :showDescription="false"
+        :showPlainMtmSteps="true"
+        :showTestSection="currentAction === 'getTrackingMethodsForSite'
+                          && isJsTrackerInstallCheckAvailable"
+        @fetchInstallInstructions="fetchInstallInstructions"
+        ref="trackingCodeCommon"
+      />
+    </ol>
+  </component>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import { ContentBlock, translate, MatomoUrl } from 'CoreHome';
-import TagmanagerTrackingCode from './TagmanagerTrackingCode.vue';
+import { defineComponent, nextTick } from 'vue';
+import {
+  ContentBlock,
+  translate,
+  MatomoUrl,
+  AjaxHelper,
+} from 'CoreHome';
+import TrackingCodeCommon from './TrackingCodeCommon.vue';
+import { InstallInstructions } from '../types';
 
 export default defineComponent({
   props: {
@@ -46,35 +50,83 @@ export default defineComponent({
   },
   components: {
     ContentBlock,
-    TagmanagerTrackingCode,
+    TrackingCodeCommon,
   },
-  computed: {
-    trackingInfoTextLine1() {
-      const manageContainersLink = `?${MatomoUrl.stringify({
-        ...MatomoUrl.urlParsed.value,
-        module: 'TagManager',
-        action: 'manageContainers',
-      })}`;
+  data() {
+    return {
+      setupStep1: '',
+    };
+  },
+  methods: {
+    fetchInstallInstructions() {
+      // eslint-disable-next-line
+      const refs = (this.$refs.trackingCodeCommon as any);
+      refs.installInstructions = [];
 
-      return translate(
-        'TagManager_MatomoTagManagerTrackingInfoLine1',
-        `<a href="${manageContainersLink}">`,
-        '</a>',
-      );
+      this.updateStep1Text();
+
+      if (!refs?.site?.id || !refs?.environment) {
+        return;
+      }
+
+      refs.isLoading = true;
+      AjaxHelper.fetch<InstallInstructions[]>({
+        method: 'TagManager.getContainerInstallInstructions',
+        filter_limit: '-1',
+        idContainer: refs?.idContainer,
+        environment: refs?.environment,
+        idSite: refs?.site?.id,
+      }).then((instructions) => {
+        refs.installInstructions = instructions;
+        nextTick(() => {
+          const codeblocks = Array.isArray(this.$refs.codeblock)
+            ? this.$refs.codeblock
+            : [this.$refs.codeblock];
+          (codeblocks as HTMLElement[]).forEach((n) => {
+            $(n).effect('highlight', {}, 1500);
+          });
+        });
+      }).finally(() => {
+        refs.isLoading = false;
+      });
     },
-    trackingInfoTextLine2() {
-      const gettingStartedLink = `?${MatomoUrl.stringify({
+    linkTo(action: string, idSite: string, idContainer: string, hash?: QueryParameters) {
+      let url = MatomoUrl.stringify({
         ...MatomoUrl.urlParsed.value,
         module: 'TagManager',
-        action: 'gettingStarted',
-      })}`;
+        action,
+        idSite,
+        idContainer,
+      });
+      if (hash) {
+        url += `#?${MatomoUrl.stringify(hash)}`;
+      }
+      return `?${url}`;
+    },
+    updateStep1Text() {
+      // eslint-disable-next-line
+      const refs = (this.$refs.trackingCodeCommon as any);
 
-      return translate(
-        'TagManager_MatomoTagManagerTrackingInfoLine2',
-        `<a href="${gettingStartedLink}">`,
+      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();
+  },
+  computed: {
     siteWithoutDataMtmIntro() {
       const gettingStartedLink = `?${MatomoUrl.stringify({
         ...MatomoUrl.urlParsed.value,