feat: Use yaMetrika number in settings

frontend/admin/src/App.vue

@@ -11,7 +11,7 @@
       </li>
 
       <li :class="{active: route.name === 'metrics'}">
-        <RouterLink :to="{name: 'metrics'}">Метрики</RouterLink>
+        <RouterLink :to="{name: 'metrics'}">Метрика</RouterLink>
       </li>
 
       <li :class="{active: route.name === 'store'}">

frontend/admin/src/views/MetricsView.vue

@@ -6,24 +6,47 @@
     Задействовать Яндекс.Метрику для Telegram магазина.
   </ItemBool>
 
-  <ItemTextarea
-    label="Код счётчика Яндекс Метрики"
+  <ItemInput
+    label="Номер счётчика Яндекс.Метрика"
     v-model="settings.items.metrics.yandex_metrika_counter"
     placeholder="Вставьте код счётчика Яндекс.Метрики"
   >
-    <p>Код счётчика нужно предварительно настроить, чтобы он работал корректно с Telegram Mini App.
-      <a href="https://telecart-labs.github.io/docs/analitycs/start/" target="_blank">
-        Инструкция как настроить i.fa.fa-external-link
-      </a>.</p>
-    <p>Для проверки интеграции через кнопку "Проверить" в интерфейсе Яндекс Метрики,
-      необходимо сначала включить "Режим разработчика" на вкладке "Общие".</p>
-  </ItemTextarea>
+    <ButtonGroup>
+      <Button
+        as="a"
+        :href="ymCheckUrl"
+        target="_blank"
+        variant="text"
+        :disabled="settings.items.app.app_debug === false"
+        v-tooltip.top="'Чтобы проверить интеграцию, включите режим разработчика на вкладке Общие и сохраните настройки.'"
+      >
+        Проверить интеграцию
+      </Button>
+
+      <Button
+        as="a"
+        href="https://telecart-labs.github.io/docs/analitycs/start/"
+        target="_blank"
+        variant="text"
+      >
+        Как получить номер счётчика <i class="fa fa-external-link"></i>
+      </Button>
+    </ButtonGroup>
+
+  </ItemInput>
 </template>
 
 <script setup>
 import {useSettingsStore} from "@/stores/settings.js";
-import ItemTextarea from "@/components/Settings/ItemTextarea.vue";
 import ItemBool from "@/components/Settings/ItemBool.vue";
+import ItemInput from "@/components/Settings/ItemInput.vue";
+import {Button, ButtonGroup} from 'primevue';
+import {computed} from "vue";
 
 const settings = useSettingsStore();
+
+const ymCheckUrl = computed(() => {
+  const url = settings.items.telegram.mini_app_url.replace(/\#\/$/, '');
+  return `${url}?_ym_status-check=104849385&_ym_lang=ru`;
+});
 </script>

frontend/spa/src/main.js

@@ -53,6 +53,12 @@ settings.load()
             throw new Error('App disabled (maintenance mode)');
         }
     })
+    .then(() => settings.ya_metrika_enabled && injectYaMetrika())
+    .then(() => {
+        if (! window.Telegram.WebApp.initData) {
+            throw new Error('Invalid init data. Application not in Telegram View');
+        }
+    })
     .then(() => pulse.initFromStartParams())
     .then(() => pulse.catchTelegramCustomerFromInitData())
     .then(() => pulse.ingest(TC_PULSE_EVENTS.WEBAPP_OPEN))
@@ -73,11 +79,6 @@ settings.load()
         })();
     })
     .then(() => blocks.processBlocks(settings.mainpage_blocks))
-    // .then(async () => {
-    //     console.debug('Load default filters for the main page');
-    //     const filtersStore = useProductFiltersStore();
-    //     filtersStore.applied = await filtersStore.fetchFiltersForMainPage();
-    // })
     .then(() => {
             console.debug('[Init] Set theme attributes');
             document.documentElement.setAttribute('data-theme', settings.theme[window.Telegram.WebApp.colorScheme]);
@@ -108,7 +109,6 @@ settings.load()
         app.mount('#app');
     })
     .then(() => window.Telegram.WebApp.ready())
-    .then(() => settings.ya_metrika_enabled && injectYaMetrika())
     .catch(error => {
         console.error(error);
         const errorApp = createApp(ApplicationError, {error});

frontend/spa/src/utils/yaMetrika.js

@@ -17,11 +17,11 @@ export function injectYaMetrika() {
     script.src = '/index.php?route=extension/tgshop/handle/ya_metrika';
     // script.async = true;
     document.head.appendChild(script);
-    console.debug('[Init] Yandex Metrika injected to the page.');
+    console.debug('[ym] Yandex Metrika injected to the page.');
 
     script.onload = () => {
         window.YA_METRIKA_ID = getMetrikaId();
-        console.debug('[Init] Detected Yandex.Metrika ID:', window.YA_METRIKA_ID);
+        console.debug('[ym] Detected Yandex.Metrika ID:', window.YA_METRIKA_ID);
         const yaMetrika = useYaMetrikaStore();
         yaMetrika.initUserParams();
         window.dataLayer = window.dataLayer || [];