mod: вынести cookies и счётчики в static js

cadpoint/templates/blocks/accept-cookies.jinja2

@@ -1,15 +1,13 @@
+{% load static %}
 <!-- СОГЛАСИЕ НА КУКИ: НАЧАЛО -- соглашение о сборе технической информации -->
   <noindex id="cookies_accept" class="fixed-bottom container-fluid">
     <div class="row bg-dark text-white">
       <div class="col p-4 mb-0 text-center">
-        <small>Тут используют cookie и&nbsp;ведут сбор технических данных о&nbsp;посещениях, потому как без этого <nobr>интернет-сайты</nobr> вообще почти не&nbsp;работают&hellip;</small>
+        <small>В&nbsp;соответствии с&nbsp;<abbr title="General Data Protection Regulation">GDPR</abbr> и&nbsp;152-<abbr title="Федеральный закон">ФЗ</abbr>, уведомляем вас, что настоящий сайт использует инструменты для&nbsp;сбора данных о&nbsp;поведении пользо­вателей, с&nbsp;целью аналитики и&nbsp;улучшения своей работы&hellip;</small>
-        <button onclick="CookieAcceptDate = new Date();
+        <button id="cookies_accept_button" class="btn ml-4 py-2 px-4 ms-5 btn-warning">
-                         CookieAcceptDate.setTime(CookieAcceptDate.getTime() + 7948800000);
-                         document.cookie = 'cookie_accept=yes;expires=' + CookieAcceptDate;
-                         document.getElementById('cookies_accept').remove();"
-                class="btn ml-4 py-2 px-4 btn-warning">
           Я согласен!
         </button>
       </div>
     </div>
-  </noindex><!-- СОГЛАСИЕ НА КУКИ: КОНЕЦ -->
+  </noindex>
+  <script defer src="{% static 'js/accept-cookies.js' %}"></script><!-- СОГЛАСИЕ НА КУКИ: КОНЕЦ -->

cadpoint/templates/blocks/footer.jinja2

@@ -1,32 +1,16 @@
-{#  <!-- ПОДВАЛ: НАЧАЛО -->#}
+{% load static %}{#  <!-- ПОДВАЛ: НАЧАЛО -->#}
   <footer class="container">
     <nav class="row">
       <div class="col-12 x d-flex align-items-center">
         &copy; Sergei Erjemin, 2009 &mdash; {% now 'Y' %}
         <div class="b88x31 ms-auto">{#<!-- Global site tag (gtag.js) - Google Analytics --> #}
-          <script async src="https://www.googletagmanager.com/gtag/js?id=UA-9116991-1"></script>
-          <script>
-            window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','UA-9116991-1');
-          </script>
           Google Analytics
         </div>
-        <div class="b88x31">{# <!-- Yandex.Metrika counter id=198477 (было code 1612438 --> #}<script type="text/javascript" >
+        <div class="b88x31">{# <!-- Yandex.Metrika counter id=198477 (было code 1612438 --> #}<noscript><div><img src="https://mc.yandex.ru/watch/198477" style="position:absolute; left:-9999px;" alt="" /></div></noscript>{# <!-- /Yandex.Metrika counter --> #}{# <!-- Yandex.Metrika informer --> #}
-            (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");ym(198477, "init", {clickmap:true,trackLinks:true,accurateTrackBounce:true,webvisor:true});
-          </script><noscript><div><img src="https://mc.yandex.ru/watch/198477" style="position:absolute; left:-9999px;" alt="" /></div></noscript>{# <!-- /Yandex.Metrika counter --> #}{# <!-- Yandex.Metrika informer --> #}
           <a href="https://metrika.yandex.ru/stat/?id=198477&from=informer" target="_blank" rel="nofollow"><img src="https://informer.yandex.ru/informer/198477/3_1_000000AA_CCCCCCDD_0_pageviews" style="width:88px;height:31px;border:0;" alt="Яндекс.Метрика" title="Яндекс.Метрика: данные за сегодня (просмотры, визиты и уникальные посетители)"/></a>{# <!-- /Yandex.Metrika informer --> #}
         </div>
         <div class="b88x31">{# <!-- Rating Mail.ru counter --> #}
-          <script type="text/javascript">
+          <noscript>
-          var _tmr = window._tmr || (window._tmr = []);
-          _tmr.push({id: "1612438", type: "pageView", start: (new Date()).getTime()});
-          (function (d, w, id) {
-            if (d.getElementById(id)) return;
-            var ts = d.createElement("script"); ts.type = "text/javascript"; ts.async = true; ts.id = id;
-            ts.src = "https://top-fwz1.mail.ru/js/code.js";
-            var f = function () {var s = d.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ts, s);};
-            if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); }
-          })(document, window, "topmailru-code");
-          </script><noscript>
             <img src="https://top-fwz1.mail.ru/counter?id=1612438;js=na" style="border:0;position:absolute;left:-9999px;" alt="Top.Mail.Ru" />
           </noscript>{# <!-- //Rating Mail.ru counter --> #}
           {# <!-- Rating Mail.ru logo --> #}<a href="https://top.mail.ru/jump?from=1612438"><img src="https://top-fwz1.mail.ru/counter?id=1612438;t=479;l=1" alt="Top.Mail.Ru"/></a>{# <!-- //Rating Mail.ru logo --> #}
@@ -37,3 +21,4 @@
       </div>
     </nav>
   </footer>{#<!-- ПОДВАЛ: КОНЕЦ -->#}
+  <script defer src="{% static 'js/footer-counters.js' %}"></script>

cadpoint/web/tests.py

@@ -187,6 +187,24 @@ class AllTagsPageTests(TestCase):
 		self.assertContains(response, '<b class="_tag">2</b>')
 		self.assertContains(response, '<b class="_tag">1</b>')
 
+	def test_footer_counters_are_loaded_from_static_js(self):
+		response = self.client.get(reverse('web_alltags'))
+
+		self.assertEqual(response.status_code, 200)
+		self.assertContains(response, 'js/footer-counters.js')
+		self.assertNotContains(response, 'googletagmanager.com/gtag/js?id=UA-9116991-1')
+		self.assertNotContains(response, 'mc.yandex.ru/metrika/tag.js')
+		self.assertNotContains(response, 'top-fwz1.mail.ru/js/code.js')
+
+	def test_accept_cookies_banner_loads_static_js(self):
+		response = self.client.get(reverse('web_alltags'))
+
+		self.assertEqual(response.status_code, 200)
+		self.assertContains(response, 'js/accept-cookies.js')
+		self.assertContains(response, 'id="cookies_accept_button"')
+		self.assertNotContains(response, 'CookieAcceptDate = new Date()')
+		self.assertNotContains(response, 'onclick="CookieAcceptDate')
+
 
 class TagEmptyStateTests(TestCase):
 	def setUp(self):

public/static/js/accept-cookies.js

@@ -0,0 +1,39 @@
+(function (window, document) {
+  'use strict';
+
+  // Защита от повторного подключения, если файл случайно вставят дважды.
+  if (window.__cadpointAcceptCookiesLoaded) {
+    return;
+  }
+  window.__cadpointAcceptCookiesLoaded = true;
+
+  var COOKIE_NAME = 'cookie_accept';
+  var COOKIE_VALUE = 'yes';
+  var COOKIE_TTL_MS = 7_948_800_000;
+  var bannerId = 'cookies_accept';
+  var buttonId = 'cookies_accept_button';
+
+  function acceptCookies() {
+    // Сохраняем согласие тем же ключом, что и раньше, чтобы серверная логика не менялась.
+    var cookieAcceptDate = new Date();
+    cookieAcceptDate.setTime(cookieAcceptDate.getTime() + COOKIE_TTL_MS);
+    document.cookie = COOKIE_NAME + '=' + COOKIE_VALUE + ';expires=' + cookieAcceptDate;
+
+    var banner = document.getElementById(bannerId);
+    if (banner) {
+      banner.remove();
+    }
+  }
+
+  function bindAcceptButton() {
+    var button = document.getElementById(buttonId);
+    if (!button) {
+      return;
+    }
+
+    button.addEventListener('click', acceptCookies);
+  }
+
+  bindAcceptButton();
+})(window, document);
+

public/static/js/footer-counters.js

@@ -0,0 +1,67 @@
+(function (window, document) {
+  'use strict';
+
+  // Защита от повторной инициализации, если файл случайно подключат дважды.
+  if (window.__cadpointFooterCountersLoaded) {
+    return;
+  }
+  window.__cadpointFooterCountersLoaded = true;
+
+  function appendScript(src, id) {
+    // Не создаём дубликаты, если скрипт уже есть в DOM.
+    if (id && document.getElementById(id)) {
+      return null;
+    }
+    var script = document.createElement('script');
+    script.async = true;
+    script.src = src;
+    if (id) {
+      script.id = id;
+    }
+    (document.head || document.body).appendChild(script);
+    return script;
+  }
+  function initGoogleAnalytics() {
+    // Поддерживаем старый UA-код, чтобы не ломать текущую статистику.
+    window.dataLayer = window.dataLayer || [];
+    window.gtag = window.gtag || function gtag() {
+      window.dataLayer.push(arguments);
+    };
+    window.gtag('js', new Date());
+    window.gtag('config', 'UA-9116991-1');
+    appendScript('https://www.googletagmanager.com/gtag/js?id=UA-9116991-1', 'cadpoint-gtag-js');
+  }
+
+  function initYandexMetrika() {
+    // Повторяем стандартный паттерн Metrika: сначала очередь вызовов, потом загрузка внешнего файла.
+    window.ym = window.ym || function ym() {
+      (window.ym.a = window.ym.a || []).push(arguments);
+    };
+    window.ym.l = 1 * new Date();
+    window.ym(198477, 'init', {
+      clickmap: true,
+      trackLinks: true,
+      accurateTrackBounce: true,
+      webvisor: true,
+    });
+    appendScript('https://mc.yandex.ru/metrika/tag.js', 'cadpoint-yandex-metrika-js');
+  }
+
+  function initMailRuCounter() {
+    // Rating Mail.ru тоже любит сначала получить очередь событий, а затем уже внешний код.
+    window._tmr = window._tmr || [];
+    window._tmr.push({
+      id: '1612438',
+      type: 'pageView',
+      start: (new Date()).getTime(),
+    });
+    appendScript('https://top-fwz1.mail.ru/js/code.js', 'topmailru-code');
+  }
+
+  // Вызываем функции-счетчики
+  initGoogleAnalytics();
+  initYandexMetrika();
+  initMailRuCounter();
+
+})(window, document);
+