feat: add google analytics to track site usage. (#45)

Add google analytics to capture user login rates and frequently used dashboards.
savannahghi · Sep 26, 2022 · 39b5c13 · 39b5c13
1 parent db886d3
commit 39b5c13
Show file tree

Hide file tree

Showing 14 changed files with 39 additions and 12 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -10,6 +10,7 @@ env:
   DJANGO_SECRET_KEY: "${{ secrets.DJANGO_SECRET_KEY }}"
   DOCKER_BUILDKIT: 1 # Enable Buildkit and let compose use it to speed up image building
   GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
+  GOOGLE_ANALYTICS_ID: "${{ secrets.GOOGLE_ANALYTICS_ID }}"
   GOOGLE_APPLICATION_CREDENTIALS: "${{ secrets.GOOGLE_APPLICATION_CREDENTIALS }}"
   GOOGLE_CLOUD_PROJECT: "${{ secrets.GOOGLE_CLOUD_PROJECT }}"
   POSTGRES_DB: postgres

diff --git a/apps/frontend/views.py b/apps/frontend/views.py
@@ -1,5 +1,6 @@
 from typing import Any, Dict
 
+from django.conf import settings
 from django.contrib.auth.mixins import LoginRequiredMixin
 from django.views.generic import TemplateView
 
@@ -11,5 +12,6 @@ class HomeView(LoginRequiredMixin, TemplateView):
 
     def get_context_data(self, **kwargs: Any) -> Dict[str, Any]:
         context = super().get_context_data()
+        context["GOOGLE_ANALYTICS_ID"] = settings.GOOGLE_ANALYTICS_ID
         Dashboard.objects.all()
         return context
diff --git a/assets/static/js/index.cjs.js b/assets/static/js/index.cjs.js
diff --git a/assets/static/js/index.cjs.js.map b/assets/static/js/index.cjs.js.map
diff --git a/assets/static/js/index.esm.js b/assets/static/js/index.esm.js
diff --git a/assets/static/js/index.esm.js.map b/assets/static/js/index.esm.js.map
diff --git a/assets/static/js/project.js b/assets/static/js/project.js
@@ -36,12 +36,6 @@ function switchDashboards(event) {
 
 
 (function($) {
-  /* Google Analytics */
-  window.dataLayer = window.dataLayer || [];
-  function gtag(){dataLayer.push(arguments);}
-  gtag('js', new Date());
-  gtag('config', 'G-6XRLBC4TMR');
-
     // Auto-collapse open menus in responsive mode
     $(".navbar-collapse a").click(function() {
         $(".navbar-collapse").collapse("hide");

diff --git a/assets/static/js/project.min.js b/assets/static/js/project.min.js
diff --git a/assets/templates/atoms/dashboards_menu.html b/assets/templates/atoms/dashboards_menu.html
@@ -8,7 +8,7 @@
     <div id="dashboards-menu" class="collapse show" data-parent="#accordionSidebar">
         <div class="bg-white py-2 collapse-inner rounded" role="tablist">
             {% for dashboard in dashboards %}
-                <a class="collapse-item text-truncate {% if forloop.first %} active {% endif %}" data-toggle="tooltip" data-placement="bottom" href="#{{ dashboard.pk }}"  title="{{ dashboard.title }}">{{ dashboard.title }}</a>
+                <a class="collapse-item text-truncate {% if forloop.first %} active {% endif %}" onclick="getClickedDashboard('{{dashboard.title}}')" data-toggle="tooltip" data-placement="bottom" href="#{{ dashboard.pk }}" title="{{ dashboard.title }}">{{ dashboard.title }}</a>
             {% endfor %}
         </div>
     </div>

diff --git a/assets/templates/atoms/head.html b/assets/templates/atoms/head.html
@@ -40,7 +40,28 @@
     <script src="https://kit.fontawesome.com/e1c9d8c99d.js" crossorigin="anonymous"></script>
 
     <!-- Google tag (gtag.js) -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-6XRLBC4TMR"></script>
+    <script async src="https://www.googletagmanager.com/gtag/js?id='{{GOOGLE_ANALYTICS_ID}}'"></script>
     {% endblock javascript %}
 
+    <script>
+        <!--add logged-in user details and clicked dashboard as part of analytics info-->
+
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+          gtag('config', '{{GOOGLE_ANALYTICS_ID}}');
+
+        gtag('set', 'user_properties', {
+           first_name: "{{ user.first_name }}",
+           last_name: "{{ user.last_name }}",
+           email: "{{ user.email }}"
+        });
+
+        function getClickedDashboard(title){
+            gtag('event','clicked_dashboard', {
+            "dashboard": title
+        });
+
+        }
+    </script>
 </head>
diff --git a/assets/templates/pages/base.html b/assets/templates/pages/base.html
@@ -39,4 +39,5 @@
         {# Script tags with only code, no src (defer by default) #}
     {% endblock inline_javascript %}
 </body>
+
 </html>
diff --git a/config/settings/base.py b/config/settings/base.py
@@ -29,9 +29,9 @@
 )
 DEBUG = env.bool("DJANGO_DEBUG", False)
 DJANGO_LOG_LEVEL = env.str("DJANGO_LOG_LEVEL", default="DEBUG")
+GOOGLE_ANALYTICS_ID = env.str("GOOGLE_ANALYTICS_ID")
 SECRET_KEY = env.str("DJANGO_SECRET_KEY", "django-insecure-xlb*ys8xwb04c&=y_z")
 
-
 ###############################################################################
 # FILE SYSTEM AND MISC
 ###############################################################################

diff --git a/config/settings/production.py b/config/settings/production.py
@@ -22,6 +22,7 @@
         "icdr.fahariyajamii.org",
     ],
 )
+GOOGLE_ANALYTICS_ID = env.str("GOOGLE_ANALYTICS_ID")
 SECRET_KEY = env.str("DJANGO_SECRET_KEY")