Track all clicks when enabled (#141)

Fixes issue #67

coderedcms/static/js/codered-front.js

@@ -216,4 +216,23 @@ $(document).ready(function()
             $(this).modal('show');
         }
     });
-});
+
+
+    /*** Tracking ***/
+    if(typeof cr_track_clicks !== 'undefined' && cr_track_clicks) {
+        $('a').on('click', function(){
+            gtag_data = {
+                "event_category": "Link",
+                "event_label": $(this).text().trim().substring(0, 30)
+            };
+            if ($(this).data('gtag-event_category')) {
+                gtag_data['event_category'] = $(this).data('gtag-event_category');
+            }
+            if ($(this).data('gtag-event_label')) {
+                gtag_data['event_label'] = $(this).data('gtag-event_label');
+            }
+            gtag('event', 'click', gtag_data);
+        });
+    }
+
+});

coderedcms/templates/coderedcms/blocks/base_link_block.html

@@ -10,7 +10,14 @@
     role="button"
     aria-haspopup="true"
     aria-expanded="false"
-    {% endif %}>
+    {% endif %}
+    {% if gtag_event_label %}
+    data-gtag-event_label="{{ gtag_event_label }}"
+    {% endif %}
+    {% if gtag_event_category %}
+    data-gtag-event_category="{{ gtag_event_category }}"
+    {% endif %}
+    >
         {% if value.image %}
             {% image value.image max-200x200 as img %}
             <img src="{{img.url}}" class="w-100" alt="{{img.image.title}}"/>

coderedcms/templates/coderedcms/blocks/button_block.html

@@ -1,6 +1,7 @@
 <a href="{{self.url}}"
 	{% if settings.coderedcms.AnalyticsSettings.ga_track_button_clicks and not format == 'amp' %}
-		onclick="gtag('event', 'click', {'event_category': '{{self.settings.ga_tracking_event_category|default:"Button"}}', 'event_label': '{{self.settings.ga_tracking_event_label|default:self.button_title}}'});"
+        data-gtag-event_category='{{self.settings.ga_tracking_event_category|default:"Button"}}' 
+        data-gtag-event_label='{{self.settings.ga_tracking_event_label|default:self.button_title}}'
 	{% endif %}
   title="{{ self.button_title|safe }}"
   class="btn {{ self.button_style }} {{ self.button_size }} {{ self.settings.custom_css_class }}"

coderedcms/templates/coderedcms/pages/base.html

@@ -9,6 +9,7 @@
             <!-- Global site tag (gtag.js) - Google Analytics -->
             <script async src="https://www.googletagmanager.com/gtag/js?id={{settings.coderedcms.AnalyticsSettings.ga_tracking_id}}"></script>
             <script>
+              cr_track_clicks = {{settings.coderedcms.AnalyticsSettings.ga_track_button_clicks|yesno:"true,false"}};
               window.dataLayer = window.dataLayer || [];
               function gtag(){dataLayer.push(arguments);}
               gtag('js', new Date());

coderedcms/templates/coderedcms/snippets/navbar.html

@@ -36,7 +36,7 @@
         {% for item in navbar.menu_items %}
           {% if item.value.page.live %}
             {% is_menu_item_dropdown item.value as has_dropdown %}
-            <li class="nav-item {% if has_dropdown %}dropdown{% endif %}">{% include_block item with aclass="nav-link" %}</li>
+            <li class="nav-item {% if has_dropdown %}dropdown{% endif %}">{% include_block item with aclass="nav-link" gtag_event_category="Navbar Link" %}</li>
           {% endif %}
         {% endfor %}
       </ul>