From 75e96105e980447ac354abcd5b1d4cc005f31f64 Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Mon, 18 Sep 2023 13:25:52 -0300
Subject: [PATCH] Fix #144

---
 src/components/Footer/FooterAnalytics.vue | 24 +++++++++++++++++++++++
 src/components/Layout/LayoutFooter.vue    | 12 +++++-------
 2 files changed, 29 insertions(+), 7 deletions(-)
 create mode 100644 src/components/Footer/FooterAnalytics.vue

diff --git a/src/components/Footer/FooterAnalytics.vue b/src/components/Footer/FooterAnalytics.vue
new file mode 100644
index 0000000..7ddc867
--- /dev/null
+++ b/src/components/Footer/FooterAnalytics.vue
@@ -0,0 +1,24 @@
+<template>
+  <span v-if="analytics">This site use {{ analytics }}.</span>
+</template>
+
+<script setup>
+
+const ANALYTICS_LOADERS = {
+  analytics: 'Google Analytics',
+  gtm: 'Google Tag Manager',
+  pixel: 'Facebook Pixel',
+  retargeting: 'VK Retargeting',
+  linkedin: 'Linkedin Insight',
+  tongji: 'Baidu Tongji',
+  metrica: 'Yandex Metrica',
+  microsoft: 'Microsoft Analytics',
+  hotjar: 'Hotjar Analytics',
+  fullStory: 'Full story Analytics',
+  unbounce: 'Unbounce conversion analytics',
+  tiktok: 'TikTok Pixel Analytics'
+}
+
+const analyticKeys = Object.keys(__APP_ENV__.analytics_services || {})
+const analytics = analyticKeys.map(key => ANALYTICS_LOADERS[key]).filter(Boolean).join('; ')
+</script>
diff --git a/src/components/Layout/LayoutFooter.vue b/src/components/Layout/LayoutFooter.vue
index e41ccf8..98f37b3 100644
--- a/src/components/Layout/LayoutFooter.vue
+++ b/src/components/Layout/LayoutFooter.vue
@@ -36,8 +36,8 @@
 
       <hr class="mt-3 mb-3 border-gray-500" />
 
-      <div class="flex justify-between">
-        <div class="flex items-center">
+      <div class="flex flex-col sm:flex-row justify-between gap-4">
+        <div class="[&>*:not(:last-child)]:after:content-['|'] [&>*:not(:last-child)]:after:mx-1">
           <span>
             Data provided by
             <a
@@ -48,9 +48,6 @@
               TaxonWorks
             </a>
           </span>
-
-          <span class="ml-2 mr-2">|</span>
-
           <span>
             Pages by
             <a
@@ -61,7 +58,6 @@
               TaxonPages
             </a>
           </span>
-          <span class="ml-2 mr-2">|</span>
           <span>
             Support (Services) by
             <a
@@ -72,11 +68,12 @@
               Species File Group
             </a>
           </span>
+          <FooterAnalytics class="italic"/>
         </div>
         <TrackerReport
           icon
           label="Report a problem"
-          button-class="flex gap-2 items-center pl-0 pr-0 pt-0 pb-0"
+          button-class="flex gap-2 items-center pl-0 pr-0 pt-0 pb-0 self-end"
         />
       </div>
     </div>
@@ -86,6 +83,7 @@
 <script setup>
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
+import FooterAnalytics from '@/components/Footer/FooterAnalytics.vue'
 
 const {
   project_authors,