From 933a67cb880753bfa5bc2eac1bbdb633527da84b Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaadmahmood@users.noreply.github.com>
Date: Fri, 20 Mar 2020 16:06:38 +0500
Subject: [PATCH 1/2] Adding customer thermometer for pages

---
 source/myscript.js | 19 ++++++++++++++++-
 source/theme.css   | 52 ++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 70 insertions(+), 1 deletion(-)

diff --git a/source/myscript.js b/source/myscript.js
index 6258531d401..da4d7669ebf 100644
--- a/source/myscript.js
+++ b/source/myscript.js
@@ -1,4 +1,9 @@
 $(document).ready(function(){
+	const customerFeedback = sessionStorage.getItem("customerFeedback");
+
+	if (!customerFeedback) {
+		$('body').append("<div class='c-thermometer'><p class='c-thermometer__paragraph'>Is this page helpful?</p> <div class='c-thermometer__emojis'> <a href='javascript:void(0)' onClick='ga('send', 'event', { eventCategory: 'Feedback', eventAction: 'Click', eventLabel: 'Excellent', eventValue: 1});'> <span class='c-thermometer__emoji'>😀</span> <p>Excellent</p> </a> <a href='javascript:void(0)' onClick='ga('send', 'event', { eventCategory: 'Feedback', eventAction: 'Click', eventLabel: 'Good', eventValue: 2});'> <span class='c-thermometer__emoji'>🙂</span> <p>Good</p> </a> <a href='javascript:void(0)' onClick='ga('send', 'event', { eventCategory: 'Feedback', eventAction: 'Click', eventLabel: 'Average', eventValue: 3});'> <span class='c-thermometer__emoji'>😐</span> <p>Average</p> </a> <a href='javascript:void(0)' onClick='ga('send', 'event', { eventCategory: 'Feedback', eventAction: 'Click', eventLabel: 'Poor', eventValue: 4});'> <span class='c-thermometer__emoji'>🙁</span> <p>Poor</p> </a> </div> </div>");
+	}
 
 	$('header .links__icon').on('click', function (){
 		$("header .header__searchbar").hide();
@@ -18,5 +23,17 @@ $(document).ready(function(){
 		var sidebarScrollPosition = $('.wy-menu-vertical li.current>a').offset().top;
 		$('.wy-side-scroll').scrollTop(sidebarScrollPosition-120);
 	}
-	
+
+	$('body').on('click', '.c-thermometer__emojis a', function(){
+		$(this).parent().hide();
+		sessionStorage.setItem("customerFeedback", "Done");
+    });
+
+    $('body').on('click', '.c-thermometer__emojis a', function(){
+		$('.c-thermometer__paragraph').text('Thank you for submitting your rating.');
+		setTimeout(() => {
+			$('.c-thermometer').fadeOut();
+		}, 3000);
+	});
+
 });
\ No newline at end of file
diff --git a/source/theme.css b/source/theme.css
index c0e45afb9ab..c4c686d70c6 100644
--- a/source/theme.css
+++ b/source/theme.css
@@ -14,6 +14,58 @@ footer {
 	padding-bottom: 30px;
 }
 
+/* Thermometer */
+.c-thermometer {
+	padding: 1rem 0;
+    display: block;
+    width: 20em;
+    text-align: center;
+    position: fixed;
+    z-index: 999;
+    right: 1rem;
+    bottom: 0;
+    background: #fff;
+    border-radius: 20px;
+}
+.c-thermometer__emojis:before {
+	height: 2px;
+	content: '';
+	position: absolute;
+	width: 16rem;
+	background: black;
+	margin-left: 2rem;
+	top: 16px;
+	opacity: .1;
+}
+.c-thermometer__emojis {
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	font-size: 1.6em;
+}
+.c-thermometer__emojis p {
+	margin: 0;
+	font-size: 0.5em;
+}
+.c-thermometer__emojis a {
+	z-index: 2;
+	position: relative;
+	opacity: .6;
+	color: inherit;
+	text-decoration: none;
+	transition: all 0.2s ease;
+	-moz-transition: all 0.2s ease;
+	-webkit-transition: all 0.2s ease;
+	filter: grayscale(100%);
+	flex: 1;
+}
+.c-thermometer__emojis a:hover {
+	filter: grayscale(0);
+	opacity: 1;
+}
+/* Thermometer ends */
+
 .features__table {
 	margin-bottom: 50px;
 }

From b35826fed02f39fe97f3dd9cfaa7c70aa2a4535b Mon Sep 17 00:00:00 2001
From: Justine Geffen <justine.geffen@mattermost.com>
Date: Tue, 31 Mar 2020 17:44:37 +0200
Subject: [PATCH 2/2] Added gtag for Event tracking; ready for review.

---
 source/templates/layout.html | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/source/templates/layout.html b/source/templates/layout.html
index 68d0ff51e47..f7a474d3a7f 100644
--- a/source/templates/layout.html
+++ b/source/templates/layout.html
@@ -44,10 +44,25 @@
 	gtag('js', new Date());
 
 	gtag('config', 'UA-67846571-1');
+
+	gtag('event', <Click>, {
+   'event_category': <Feedback>,
+   'event_label': <Excellent>,
+   'value': <1>;
+
+	gtag('event', <Click>, {
+	 'event_category': <Feedback>,
+	 'event_label': <Good>,
+   'value': <2>;
+
+	gtag('event', <Click>, {
+	 'event_category': <Feedback>,
+	 'event_label': <Poor>,
+	 'value': <4>;
 	</script>
 
 	<!-- Global site tag (gtag.js) - Google Analytics -->
-	<!-- Second Google Analytics tag to assist mapping with mattermost.com visits --> 
+	<!-- Second Google Analytics tag to assist mapping with mattermost.com visits -->
 	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-120238482-1"></script>
 	<script>
 	  window.dataLayer = window.dataLayer || [];