From 69fc7fe2eae7fe7509d99d71323c6d382ed6714a Mon Sep 17 00:00:00 2001
From: Warachi <morris.warachi@gro-intelligence.com>
Date: Wed, 9 Feb 2022 21:59:59 +0000
Subject: [PATCH 1/2] Send ga events for profile page

---
 pombola/core/static/js/functions.js           | 16 ++++
 pombola/settings/south_africa_base.py         | 46 ++++++----
 .../static/js/libs/jquery.inview.min.js       |  1 +
 .../static/js/track-profile-analytics.js      | 91 +++++++++++++++++++
 .../templates/core/person_detail.html         | 18 ++--
 5 files changed, 148 insertions(+), 24 deletions(-)
 create mode 100644 pombola/south_africa/static/js/libs/jquery.inview.min.js
 create mode 100644 pombola/south_africa/static/js/track-profile-analytics.js

diff --git a/pombola/core/static/js/functions.js b/pombola/core/static/js/functions.js
index a7f65ef30..e702a795a 100644
--- a/pombola/core/static/js/functions.js
+++ b/pombola/core/static/js/functions.js
@@ -28,6 +28,14 @@ $(function () {
     }
     var collapseElement = document.getElementById("truncate-former-section");
     collapseElement.classList.toggle("truncate-div");
+    if (typeof ga === 'function') {
+      ga('send', {
+        hitType: 'event',
+        eventCategory: 'collapsed-items',
+        eventAction: showingAllFormerPositions ? 'expand' : 'collapse',
+        eventLabel: 'former-positions'
+      });
+    }
   });
   // toggle current positions button on /person/person-slug/
   const toggleCurrentElement = $('#toggle-current-positions');
@@ -54,6 +62,14 @@ $(function () {
     }
     var collapseElement = document.getElementById("truncate-current-section");
     collapseElement.classList.toggle("truncate-div");
+    if (typeof ga === 'function') {
+      ga('send', {
+        hitType: 'event',
+        eventCategory: 'collapsed-items',
+        eventAction: showingAllCurrentPositions ? 'expand' : 'collapse',
+        eventLabel: 'current-positions'
+      });
+    }
   });
 
   /*
diff --git a/pombola/settings/south_africa_base.py b/pombola/settings/south_africa_base.py
index da7dfa8f4..7525ca928 100644
--- a/pombola/settings/south_africa_base.py
+++ b/pombola/settings/south_africa_base.py
@@ -43,21 +43,21 @@
             'sass/south-africa.scss',
         ),
         'output_filename': 'css/south-africa.css',
-        'extra_context': default_stylesheet_extra_content, 
+        'extra_context': default_stylesheet_extra_content,
     },
     'datatables': {
         'source_filenames': (
             'css/libs/datatables-1.10.10.css',
         ),
         'output_filename': 'css/datatables.css',
-        'extra_context': default_stylesheet_extra_content, 
+        'extra_context': default_stylesheet_extra_content,
     },
     'chosen': {
         'source_filenames': {
             'css/libs/chosen/chosen.css',
         },
         'output_filename': 'css/chosen.css',
-        'extra_context': default_stylesheet_extra_content, 
+        'extra_context': default_stylesheet_extra_content,
     },
 }
 
@@ -67,42 +67,42 @@
             'js/tabs.js',
         ),
         'output_filename': 'js/tabs.js',
-        'extra_context': default_js_extra_content, 
+        'extra_context': default_js_extra_content,
     },
     'rep-locator': {
         'source_filenames': (
             'js/rep-locator.js',
         ),
         'output_filename': 'js/rep-locator.js',
-        'extra_context': default_js_extra_content, 
+        'extra_context': default_js_extra_content,
     },
     'za-map-drilldown': {
         'source_filenames': (
             'js/za-map-drilldown.js',
         ),
         'output_filename': 'js/za-map-drilldown.js',
-        'extra_context': default_js_extra_content, 
+        'extra_context': default_js_extra_content,
     },
     'election-countdown': {
         'source_filenames': (
             'js/election_countdown.js',
         ),
         'output_filename': 'js/election_countdown.js',
-        'extra_context': default_js_extra_content, 
+        'extra_context': default_js_extra_content,
     },
     'advanced-search': {
         'source_filenames': (
             'js/advanced-search.js',
         ),
         'output_filename': 'js/advanced-search.js',
-        'extra_context': default_js_extra_content, 
+        'extra_context': default_js_extra_content,
     },
     'interests-filter': {
-        'source_filenames' : (
+        'source_filenames': (
             'js/interests-filter.js',
         ),
         'output_filename': 'js/interests-filter.js',
-        'extra_context': default_js_extra_content, 
+        'extra_context': default_js_extra_content,
     },
     'attendance-table': {
         'source_filenames': (
@@ -110,7 +110,7 @@
             'js/attendance-table.js',
         ),
         'output_filename': 'js/attendance-table.js',
-        'extra_context': default_js_extra_content, 
+        'extra_context': default_js_extra_content,
     },
     'lazy-loaded-images': {
         'source_filenames': (
@@ -118,7 +118,7 @@
             'js/lazy-loaded-images.js',
         ),
         'output_filename': 'js/lazy-loaded-images.js',
-        'extra_context': default_js_extra_content, 
+        'extra_context': default_js_extra_content,
     },
     'mp-profiles-live-filter': {
         'source_filenames': (
@@ -126,14 +126,14 @@
             'js/mp-profiles-live-filter.js',
         ),
         'output_filename': 'js/mp-profiles-live-filter.js',
-        'extra_context': default_js_extra_content, 
+        'extra_context': default_js_extra_content,
     },
     'person-messages-ajax': {
         'source_filenames': (
             'js/person-messages-ajax.js',
         ),
         'output_filename': 'js/person-messages-ajax.js',
-        'extra_context': default_js_extra_content, 
+        'extra_context': default_js_extra_content,
     },
     'writeinpublic': {
         'source_filenames': (
@@ -141,15 +141,29 @@
             'js/writeinpublic.js',
         ),
         'output_filename': 'js/writeinpublic.js',
-        'extra_context': default_js_extra_content, 
+        'extra_context': default_js_extra_content,
     },
     'mps-download-tracking': {
         'source_filenames': (
             'js/mps-download-tracking.js',
         ),
         'output_filename': 'js/mps-download-tracking.js',
-        'extra_context': default_js_extra_content, 
+        'extra_context': default_js_extra_content,
+    },
+    'track-profile-analytics': {
+        'source_filenames': (
+            'js/track-profile-analytics.js',
+        ),
+        'output_filename': 'js/track-profile-analytics.js',
+        'extra_context': default_js_extra_content,
     },
+    'jquery-inview-min': {
+        'source_filenames': (
+            'js/libs/jquery.inview.min.js',
+        ),
+        'output_filename': 'js/jquery-inview-min.js',
+        'extra_context': default_js_extra_content,
+    }
 }
 
 INFO_PAGES_ALLOW_RAW_HTML = True
diff --git a/pombola/south_africa/static/js/libs/jquery.inview.min.js b/pombola/south_africa/static/js/libs/jquery.inview.min.js
new file mode 100644
index 000000000..cbf1c3086
--- /dev/null
+++ b/pombola/south_africa/static/js/libs/jquery.inview.min.js
@@ -0,0 +1 @@
+!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a(require("jquery")):a(jQuery)}(function(a){function i(){var b,c,d={height:f.innerHeight,width:f.innerWidth};return d.height||(b=e.compatMode,(b||!a.support.boxModel)&&(c="CSS1Compat"===b?g:e.body,d={height:c.clientHeight,width:c.clientWidth})),d}function j(){return{top:f.pageYOffset||g.scrollTop||e.body.scrollTop,left:f.pageXOffset||g.scrollLeft||e.body.scrollLeft}}function k(){if(b.length){var e=0,f=a.map(b,function(a){var b=a.data.selector,c=a.$element;return b?c.find(b):c});for(c=c||i(),d=d||j();e<b.length;e++)if(a.contains(g,f[e][0])){var h=a(f[e]),k={height:h[0].offsetHeight,width:h[0].offsetWidth},l=h.offset(),m=h.data("inview");if(!d||!c)return;l.top+k.height>d.top&&l.top<d.top+c.height&&l.left+k.width>d.left&&l.left<d.left+c.width?m||h.data("inview",!0).trigger("inview",[!0]):m&&h.data("inview",!1).trigger("inview",[!1])}}}var c,d,h,b=[],e=document,f=window,g=e.documentElement;a.event.special.inview={add:function(c){b.push({data:c,$element:a(this),element:this}),!h&&b.length&&(h=setInterval(k,250))},remove:function(a){for(var c=0;c<b.length;c++){var d=b[c];if(d.element===this&&d.data.guid===a.guid){b.splice(c,1);break}}b.length||(clearInterval(h),h=null)}},a(f).on("scroll resize scrollstop",function(){c=d=null}),!g.addEventListener&&g.attachEvent&&g.attachEvent("onfocusin",function(){d=null})});
diff --git a/pombola/south_africa/static/js/track-profile-analytics.js b/pombola/south_africa/static/js/track-profile-analytics.js
new file mode 100644
index 000000000..e71b4c106
--- /dev/null
+++ b/pombola/south_africa/static/js/track-profile-analytics.js
@@ -0,0 +1,91 @@
+$(function () {
+  // If Google Analytics is loaded, try send events when elements are visible in viewport
+  if (typeof ga === 'function') {
+    const TIMEOUT_BEFORE_FIRING_ANALYTICS = 1000;
+    var elementsToTrackScrollEvents = {
+      "#membersinterests": {
+        "category": "person-page-tab-membersinterests",
+        "action": "activate",
+        "label": "members-interests"
+      },
+      "#member-experience": {
+        "category": "person-page-tab-experience",
+        "action": "activate",
+        "label": "member-experience"
+      },
+      "#apperances": {
+        "category": "person-page-tab-appearances",
+        "action": "activate",
+        "label": "member-apperances"
+      },
+      "#messages-section": {
+        "category": "person-page-tab-messages",
+        "action": "activate",
+        "label": "messages"
+      },
+      "#attendance": {
+        "category": "person-page-tab-attendance",
+        "action": "activate",
+        "label": "attendance"
+      },
+    };
+
+    var elementsToTrackExpandDefinitionEvents = {
+      "#members-interests-section": {
+        "category": "collapsed-definition",
+        "action": "expand",
+        "label": "members-interests"
+      },
+      "#plenary-apperances-section": {
+        "category": "collapsed-definition",
+        "action": "expand",
+        "label": "plenary-apperances"
+      },
+      "#committee-meetings-title": {
+        "category": "collapsed-definition",
+        "action": "expand",
+        "label": "committee-meetings"
+      },
+      "#minister-questions-title": {
+        "category": "collapsed-definition",
+        "action": "expand",
+        "label": "questions-to-ministers"
+      },
+    };
+
+
+    function sendAnalyticsEvent(category, action, label) {
+      // we use a timeout to ensure that the event is sent after user has
+      // scrolled over the element considerably
+      setTimeout(function () {
+        ga('send', {
+          hitType: 'event',
+          eventCategory: category,
+          eventAction: action,
+          eventLabel: label
+        });
+      }, TIMEOUT_BEFORE_FIRING_ANALYTICS);
+    }
+
+    $(Object.keys(elementsToTrackScrollEvents)).each(function (_, element) {
+      $(element).one('inview', function (_, isInView) {
+        if (isInView) {
+          var elementAttributes = elementsToTrackScrollEvents[element];
+          var category = elementAttributes.category,
+            action = elementAttributes.action,
+            label = elementAttributes.label;
+          sendAnalyticsEvent(category, action, label);
+        }
+      });
+    });
+    $(Object.keys(elementsToTrackExpandDefinitionEvents)).each(function (_, element) {
+      $(element).click(function () {
+        var elementAttributes = elementsToTrackExpandDefinitionEvents[element];
+        var category = elementAttributes.category,
+          action = elementAttributes.action,
+          label = elementAttributes.label;
+        sendAnalyticsEvent(category, action, label);
+      });
+    });
+  }
+});
diff --git a/pombola/south_africa/templates/core/person_detail.html b/pombola/south_africa/templates/core/person_detail.html
index 3a53a9d8a..fac3d1310 100644
--- a/pombola/south_africa/templates/core/person_detail.html
+++ b/pombola/south_africa/templates/core/person_detail.html
@@ -5,6 +5,8 @@
 {% block js_end_of_body %}
 {{ block.super }}
 {% javascript 'tabs' %}
+{% javascript 'track-profile-analytics' %}
+{% javascript 'jquery-inview-min' %}
 {% javascript 'person-messages-ajax' %}
 {% endblock %}
 
@@ -133,7 +135,7 @@
 {% endblock socials %}
 
 {% block subcontent %}
-  <div class="row">
+  <div class="row" id="member-experience">
     <div class="col-lg-4 col-md-12 col-sm-12">
       <div class="mp-col">
         <div>
@@ -370,7 +372,7 @@ <h3 class="mp-block__title">Former positions:</h3>
       </div>
     </div>
   </div>
-  <div>
+  <div id="messages-section">
     {% if person.has_ever_been_member_of_national_assembly %}
       <div id="ajax-link" style="display: none;">
         <a class="js-person-messages-ajax" href="#messages" data-ajax-url="{% url 'sa-person-write-all' person_slug=person.slug %}">Messages</a>
@@ -440,7 +442,7 @@ <h3 class="mp-block__title">Attendance of committee meetings:</h3>
       {% endif %}
     </div>
     {% if latest_meetings_attended %}
-    <div class="mp-row is--overline">
+    <div class="mp-row is--overline" id="attendance">
       <h3 class="mp-block__title">Recent meetings attended:</h3>
       <div class="mp-col is--full">
         {% for meeting in latest_meetings_attended|slice:":4" %}
@@ -560,12 +562,12 @@ <h3 class="mp-block__title">Questions asked to ministers:</h3>
           </div>
         </div>
       </div>
-      <section class="mp-row is--overline">
+      <section class="mp-row is--overline" id="apperances">
         <h3 class="mp-block__title">Plenary appearances:</h3>
         <div class="mp-col is--full">
           <div class="mp-item is--full">
               <div id="accordion" class="appearance-accordion">
-                <div class="info-block" id="headingOne" data-toggle="collapse" data-target="#plenary-apperances" aria-expanded="true"
+                <div class="info-block" id="plenary-apperances-section" data-toggle="collapse" data-target="#plenary-apperances" aria-expanded="true"
                   aria-controls="plenary-apperances">
                   <div class="row">
                     <div class="col-8">
@@ -586,7 +588,7 @@ <h3 class="mp-block__title">Plenary appearances:</h3>
                     </div>
                   </div>
                 </div>
-                <div id="plenary-apperances" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
+                <div id="plenary-apperances" class="collapse" aria-labelledby="plenary-apperances" data-parent="#accordion">
                   <div class="info-block__inner">
                     <p class="info-block__content">
                       Plenary sessions are forums that have been created for the purpose of public debate and decision-making. This mechanism is used to convey the messages of our MPs within main chambers on important decisions, like how they vote.
@@ -617,7 +619,7 @@ <h2 class="mp-subheading">Declaration of interests</h2>
     <div id="membersinterests">
       <div class="person-interests">
         <div id="accordion" class="appearance-accordion">
-          <div class="info-block" id="headingOne" data-toggle="collapse" data-target="#declaration-of-interests" aria-expanded="true"
+          <div class="info-block" id="members-interests-section" data-toggle="collapse" data-target="#declaration-of-interests" aria-expanded="true"
             aria-controls="declaration-of-interests">
             <div class="row">
               <div class="col-8">
@@ -638,7 +640,7 @@ <h2 class="mp-subheading">Declaration of interests</h2>
               </div>
             </div>
           </div>
-          <div id="declaration-of-interests" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
+          <div id="declaration-of-interests" class="collapse" aria-labelledby="declaration-of-interests" data-parent="#accordion">
             <div class="info-block__content">
               Annually, MPs are required by parliament to register their financial interests and gifts received in their official capacity. Due to the significant influence of the role that MPs take on, there may be times when their personal or business interests become in conflict with the duty prescribed to them as elected officials representing the public interest. You can see what interests your MPs declared here.
             </div>

From e4e550cf22bbd1cec10dc6595c307eb8317f88c5 Mon Sep 17 00:00:00 2001
From: Warachi <morris.warachi@gro-intelligence.com>
Date: Thu, 10 Feb 2022 08:24:12 +0000
Subject: [PATCH 2/2] bump time to 5 seconds

---
 pombola/south_africa/static/js/track-profile-analytics.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/pombola/south_africa/static/js/track-profile-analytics.js b/pombola/south_africa/static/js/track-profile-analytics.js
index e71b4c106..a3b44c5a0 100644
--- a/pombola/south_africa/static/js/track-profile-analytics.js
+++ b/pombola/south_africa/static/js/track-profile-analytics.js
@@ -1,7 +1,8 @@
 $(function () {
   // If Google Analytics is loaded, try send events when elements are visible in viewport
   if (typeof ga === 'function') {
-    const TIMEOUT_BEFORE_FIRING_ANALYTICS = 1000;
+    // The timeout is set to 5 seconds to allow us to track actual engagement
+    const TIMEOUT_BEFORE_FIRING_ANALYTICS = 5000;
     var elementsToTrackScrollEvents = {
       "#membersinterests": {
         "category": "person-page-tab-membersinterests",