diff --git a/shared/common_template/callout.vtl b/shared/common_template/callout.vtl
index a2ac2991644fc8c0645a51878e10a9fb9e0aba5e..c9cfb0104c7399bfc60fc3df2d8624201f04dff5 100644
--- a/shared/common_template/callout.vtl
+++ b/shared/common_template/callout.vtl
@@ -31,31 +31,31 @@ var html = "<div class='canr-callout-content no-print $!{callout.contentType.nam
   "<div class='image-wrapper'>" +
     "<figure class='embed-image'>" +
       #if($!{callout.contentType.name} == 'Article')
-      "<a href='https://www.canr.msu.edu/news/$callout.urlTitle' data-gtmconversions='callout-article'>" +
+      "<a href='/news/$callout.urlTitle' data-gtmconversions='callout-article'>" +
       #end
       #if($!{callout.contentType.name} == 'Event')
-      "<a href='https://www.canr.msu.edu/events/$callout.urlTitle' data-gtmconversions='callout-event'>" +
+      "<a href='/events/$callout.urlTitle' data-gtmconversions='callout-event'>" +
       #end
       #if($!{callout.contentType.name} == 'Person')
-      "<a href='https://www.canr.msu.edu/people/$callout.urlTitle' data-gtmconversions='callout-person'>" +
+      "<a href='/people/$callout.urlTitle' data-gtmconversions='callout-person'>" +
       #end
       #if($!{callout.contentType.name} == 'Digital Document')
-      "<a href='https://www.canr.msu.edu/resources/$callout.urlTitle' data-gtmconversions='callout-digitaldocument'>" +
+      "<a href='/resources/$callout.urlTitle' data-gtmconversions='callout-digitaldocument' >" +
       #end
       #if($!{callout.contentType.name} == 'Publication Issue')
-      "<a href='https://www.canr.msu.edu/publications/$callout.urlTitle' data-gtmconversions='callout-publication'>" +
+      "<a href='/publications/$callout.urlTitle' data-gtmconversions='callout-publication'>" +
       #end
       #if($!{callout.contentType.name} == 'Audio Object')
-      "<a href='https://www.canr.msu.edu/podcasts/$callout.urlTitle' data-gtmconversions='callout-audioobject'>" +
+      "<a href='/podcasts/$callout.urlTitle' data-gtmconversions='callout-audioobject'>" +
       #end
       #if($!{callout.contentType.name} == 'Job')
-      "<a href='https://www.canr.msu.edu/jobs/$callout.urlTitle' data-gtmconversions='callout-jobs'>" +
+      "<a href='/jobs/$callout.urlTitle' data-gtmconversions='callout-jobs'>" +
       #end
       #if($!{callout.contentType.name} == 'Course')
-      "<a href='https://www.canr.msu.edu/courses/$callout.urlTitle' data-gtmconversions='callout-course'>" +
+      "<a href='/courses/$callout.urlTitle' data-gtmconversions='callout-course'>" +
       #end
       #if($!{callout.contentType.name} == 'Scholarship')
-      "<a href='https://www.canr.msu.edu/scholarships/$callout.urlTitle' data-gtmconversions='callout-scholarhip'>" +
+      "<a href='/scholarships/$callout.urlTitle' data-gtmconversions='callout-scholarhip'>" +
       #end
       #if($!{callout.contentType.name} == 'In The News')
       "<a href='$callout.link' data-gtmconversions='callout-inthenews'>" +
@@ -73,9 +73,9 @@ var html = "<div class='canr-callout-content no-print $!{callout.contentType.nam
       "<a href='$callout.url' data-gtmconversions='callout-series'>" +
       #end
       #if($!{callout.contentType.name} == 'Person')
-      "<img src='https://www.canr.msu.edu/contentAsset/image/$!{imagefield}/fileAsset/filter/Resize/resize_w/200' alt='$!{imageDescription}'>" +
+      "<img src='/contentAsset/image/$!{imagefield}/fileAsset/filter/Resize/resize_w/200' alt='$!{imageDescription}'>" +
       #else
-        "<img src='https://www.canr.msu.edu/contentAsset/image/$!{imagefield}/fileAsset/filter/Resize/resize_w/300/resize_h/200' alt='$!{imageDescription}'>" +
+        "<img src='/contentAsset/image/$!{imagefield}/fileAsset/filter/Resize/resize_w/300/resize_h/200' alt='$!{imageDescription}'>" +
       #end
       "</a>" +
     "</figure>" +
@@ -84,31 +84,31 @@ var html = "<div class='canr-callout-content no-print $!{callout.contentType.nam
   "<div class='text-wrapper'>" +
    "<h3>" +
     #if($!{callout.contentType.name} == 'Article')
-    "<a href='https://www.canr.msu.edu/news/$callout.urlTitle' data-gtmconversions='callout-article'>$!{callout.title}</a>" +
+    "<a href='/news/$callout.urlTitle' data-gtmconversions='callout-article'>$!{callout.title}</a>" +
     #end
     #if($!{callout.contentType.name} == 'Event')
-    "<a href='https://www.canr.msu.edu/events/$callout.urlTitle' data-gtmconversions='callout-event'>$!{callout.title}</a>" +
+    "<a href='/events/$callout.urlTitle' data-gtmconversions='callout-event'>$!{callout.title}</a>" +
     #end
     #if($!{callout.contentType.name} == 'Person')
-    "<a href='https://www.canr.msu.edu/people/${callout.urlTitle}' data-gtmconversions='callout-person'>$!{callout.givenName} $!{callout.familyName} $!{callout.honorificSuffix}</a>" +
+    "<a href='/people/${callout.urlTitle}' data-gtmconversions='callout-person'>$!{callout.givenName} $!{callout.familyName} $!{callout.honorificSuffix}</a>" +
     #end
     #if($!{callout.contentType.name} == 'Digital Document')
-    "<a href='https://www.canr.msu.edu/resources/$callout.urlTitle' data-gtmconversions='callout-digitaldocument'>$!{callout.title}</a>" +
+    "<a href='/resources/$callout.urlTitle' data-gtmconversions='callout-digitaldocument'>$!{callout.title}</a>" +
     #end
     #if($!{callout.contentType.name} == 'Publication Issue')
-    "<a href='https://www.canr.msu.edu/publications/$callout.urlTitle' data-gtmconversions='callout-publication'>$!{callout.title}</a>" +
+    "<a href='/publications/$callout.urlTitle' data-gtmconversions='callout-publication'>$!{callout.title}</a>" +
     #end
     #if($!{callout.contentType.name} == 'Audio Object')
-    "<a href='https://www.canr.msu.edu/podcasts/$callout.urlTitle' data-gtmconversions='callout-audioobject'>$!{callout.title}</a>" +
+    "<a href='/podcasts/$callout.urlTitle' data-gtmconversions='callout-audioobject'>$!{callout.title}</a>" +
     #end
     #if($!{callout.contentType.name} == 'Jobs')
-    "<a href='https://www.canr.msu.edu/jobs/$callout.urlTitle' data-gtmconversions='callout-jobs'>$!{callout.title}</a>" +
+    "<a href='/jobs/$callout.urlTitle' data-gtmconversions='callout-jobs'>$!{callout.title}</a>" +
     #end
     #if($!{callout.contentType.name} == 'Course')
-    "<a href='https://www.canr.msu.edu/courses/$callout.urlTitle' data-gtmconversions='callout-course'>$!{callout.title}</a>" +
+    "<a href='/courses/$callout.urlTitle' data-gtmconversions='callout-course'>$!{callout.title}</a>" +
     #end
     #if($!{callout.contentType.name} == 'Scholarship')
-    "<a href='https://www.canr.msu.edu/scholarships/$callout.urlTitle' data-gtmconversions='callout-scholarship'>$!{callout.title}</a>" +
+    "<a href='/scholarships/$callout.urlTitle' data-gtmconversions='callout-scholarship'>$!{callout.title}</a>" +
     #end
     #if($!{callout.contentType.name} == 'In The News')
     "<a href='$callout.link' data-gtmconversions='callout-inthenews'>$!{callout.title}</a>" +
@@ -135,7 +135,7 @@ var html = "<div class='canr-callout-content no-print $!{callout.contentType.nam
   "<p>" +
     "$!{callout.description}" +
   "</p>" +
-  "<a class='button' href='https://www.canr.msu.edu/news/$!callout.urlTitle' target='_parent' data-gtmconversions='callout-article'>READ MORE</a>" +
+  "<a class='button' href='$!callout.urlTitle' target='_parent' data-gtmconversions='callout-article' data-eventvalue='10'>READ MORE</a>" +
   #end
   ##
   ## pulls in content for Event content type
@@ -144,7 +144,7 @@ var html = "<div class='canr-callout-content no-print $!{callout.contentType.nam
       "$date.format('MMMM d, yyyy', $!callout.startDate) $date.format('h:mma', $!callout.startDate) - $date.format('h:mma', $!callout.endDate)" +
     "</p>" +
     #if($callout.link)
-    "<a class='button no-print' href='https://www.canr.msu.edu/events/$callout.link' data-gtmconversions='callout-event-register'>REGISTER</a>" +
+    "<a class='button no-print' href='$callout.link' data-gtmconversions='callout-event-register' data-eventvalue='80'>REGISTER</a>" +
     #end
   #end
   ##
@@ -154,7 +154,7 @@ var html = "<div class='canr-callout-content no-print $!{callout.contentType.nam
     "<p>$!callout.description</p>" +
     #end
     #if($callout.file)
-      "<a class='button' href='https://www.canr.msu.edu/resources/$!callout.urlTitle' data-gtmconversions='inline-callout-download'>DOWNLOAD FILE</a>" +
+      "<a class='button' href='$callout.file.uri' data-gtmconversions='inline-callout-download' data-eventvalue='30'>DOWNLOAD FILE</a>" +
     #end
   #end
   ##
@@ -167,14 +167,14 @@ var html = "<div class='canr-callout-content no-print $!{callout.contentType.nam
     "$!{callout.jobTitle}" +
     #end
     #if($UtilMethods.isSet($primaryRoleOrg))
-      "<br><a href='https://www.canr.msu.edu/$!primaryRoleOrg.url' data-gtmconversions='callout-person-organization'>$!primaryRoleOrg.title</a>" +
+      "<br><a href='$!primaryRoleOrg.url' data-gtmconversions='callout-person-organization'>$!primaryRoleOrg.title</a>" +
     #elseif($UtilMethods.isSet($worksForMain))
-      "<br><a href='https://www.canr.msu.edu/$!worksForMain.url' data-gtmconversions='callout-person-organization'>$!worksForMain.title</a>" +
+      "<br><a href='$!worksForMain.url' data-gtmconversions='callout-person-organization'>$!worksForMain.title</a>" +
     #elseif($UtilMethods.isSet($callout.organization))
       "<br>$!callout.organization" +
     #end
     #if($!{callout.email})
-      "<br><a href='mailto:$!{callout.email}' data-gtmconversions='callout-person'>$!{callout.email}</a>" +
+      "<br><a href='mailto:$!{callout.email}' data-gtmconversions='callout-person' data-eventvalue='40'>$!{callout.email}</a>" +
     #end
     #if($UtilMethods.isSet($primaryRole.telephone) && $primaryRole.telephone != '')
       "<br><a href='tel:$!primaryRole.telephone' data-gtmconversions='callout-person-telephone'>$!primaryRole.telephone</a>" +
@@ -218,7 +218,7 @@ var html = "<div class='canr-callout-content no-print $!{callout.contentType.nam
       "<strong>Application Deadline:</strong> $date.format('MMMM d, yyyy', $callout.availibilityEnds)" +
     "</p>" +
     #if($callout.url)
-    "<a class='button no-print' href='$callout.url' data-gtmconversions='callout-scholarship-apply'>APPLY</a>" +
+    "<a class='button no-print' href='$callout.url' data-gtmconversions='callout-scholarship-apply' data-eventvalue='60'>APPLY</a>" +
     #end
   #end
   ##
@@ -359,6 +359,7 @@ canrStyles.innerHTML =
     #end
     "padding: 25px 0 0 0;" +
     #else
+    "margin: 0 0 2.1rem;" +
     "padding: 15px 0 0 0;" +
     "width: 100%;" +
     "text-align: center;" +
diff --git a/shared/js/audioClickTracker.js b/shared/js/audioClickTracker.js
new file mode 100644
index 0000000000000000000000000000000000000000..5e13939ffae20182e3ddbfe9f307c6e103343868
--- /dev/null
+++ b/shared/js/audioClickTracker.js
@@ -0,0 +1,16 @@
+var audioObj = document.getElementsByTagName("audio");
+
+var i;
+for (i = 0; i < audioObj.length; i++) {
+  var source = audioObj[i].getElementsByTagName("source")[0].getAttribute("src");
+  audioObj[i].addEventListener("play", gaTrackPlay);
+  // audioObj[i].addEventListener("ended", gaTrackPlay);
+}
+
+function gaTrackPlay() {
+  gtag('event', 'Play', {
+  'event_category': 'value-multimedia',
+  'event_label': source,
+  'value': 20
+});
+}
diff --git a/shared/js/d3DrawChart.js b/shared/js/d3DrawChart.js
new file mode 100644
index 0000000000000000000000000000000000000000..da2bb13de94116fb115ff9c0f55ce67c601896a2
--- /dev/null
+++ b/shared/js/d3DrawChart.js
@@ -0,0 +1,146 @@
+// javascript
+
+const charts = document.getElementsByClassName("d3-chart");
+var width = 975;
+var height = 500;
+
+// function drawVerticalBar() {
+//
+// }
+//
+// function drawHorizontalBar() {
+//
+// }
+
+async function drawGroupedBar() {
+  var containerData = document.getElementById("js-d3-chart-" + i);
+  var containerSvg = d3.select("#js-d3-chart-" + i);
+  var data = Object.assign(await d3.csv(containerData.dataset.graphCsv, d3.autoType), {y: containerData.dataset.yAxisLabel});
+
+  var groupKey = data.columns[0],
+      keys = data.columns.slice(1),
+      margin = ({top: 10, right: 10, bottom: 20, left: 50});
+
+    var xScale0 = d3.scaleBand()
+      .domain(data.map(d => { return d[groupKey]; } ))
+      .rangeRound([margin.left, width - margin.right])
+      .paddingInner(0.1);
+
+    var xScale1 = d3.scaleBand()
+      .domain(keys)
+      .rangeRound([0, xScale0.bandwidth()])
+      .padding(0.05);
+
+    var yScale = d3.scaleLinear()
+      .domain([0, d3.max(data, d => d3.max(keys, key => d[key]))]).nice()
+      .rangeRound([height - margin.bottom, margin.top]);
+
+    var xAxis = d => d
+      .attr("transform", `translate(0,${height - margin.bottom})`)
+      .call(d3.axisBottom(xScale0).tickSizeOuter(0))
+      .call(d => d.select(".domain"))
+        .attr("font-size", 20);
+
+    var yAxis = d => d
+      .attr("transform", `translate(${margin.left},0)`)
+      .call(d3.axisLeft(yScale).ticks(null, "s"))
+        .attr("font-size", 20)
+      .call(d => d.select(".domain"))
+        .attr("font-size", 20)
+      .call(d => d.select(".tick:last-of-type text").clone()
+          .attr("x", 3)
+          .attr("text-anchor", "start")
+          .attr("font-weight", "bold")
+          .attr("font-size", 20)
+          .text(data.y));
+
+    legend = svg => {
+        const g = svg
+            .attr("transform", `translate(${width},0)`)
+            .attr("text-anchor", "end")
+            .attr("font-family", "sans-serif")
+            .attr("font-size", 20)
+          .selectAll("g")
+          .data(color.domain().slice().reverse())
+          .enter()
+          .append("g")
+            .attr("transform", (d, i) => `translate(0,${i * 20})`);
+
+        g.append("rect")
+            .attr("x", -19)
+            .attr("width", 19)
+            .attr("height", 19)
+            .attr("fill", color);
+
+        g.append("text")
+            .attr("x", -24)
+            .attr("y", 9.5)
+            .attr("dy", "0.35em")
+            .text(d => d);
+    }
+
+    var color = d3.scaleOrdinal()
+      .range(["#d1de3f", "#94ae4a", "#0db14b", "#cb5a28", "#f08521", "#c89a58", "#e8d9b5"]);
+
+    var klass = "groupedBar";
+
+    const svg = containerSvg
+      .append("svg")
+        .attr("class", klass)
+        .attr("height", height)
+        .attr("width", width)
+        .attr("viewBox", [0, 0, width, height])
+        .attr("style", "width: 100%;");
+
+    svg.selectAll("g")
+      .data(data)
+      .enter()
+      .append("g")
+        .attr("transform", d => `translate(${xScale0( d[groupKey])},0)`)
+      .selectAll("rect")
+      .data(d => keys.map(key => ({key, value: d[key]})))
+      .enter()
+      .append("rect")
+        .attr("x", d => xScale1(d.key))
+        .attr("y", d => yScale(d.value))
+        .attr("width", xScale1.bandwidth())
+        .attr("height", d => yScale(0) - yScale(d.value))
+        .attr("fill", d => color(d.key));
+
+    svg.append("g")
+      .call(xAxis);
+
+    svg.append("g")
+      .call(yAxis);
+
+    svg.append("g")
+      .call(legend);
+
+    // var table = d3.select(containerData)
+    //   .append('table');
+    //
+    //
+    // table.append('thead').append('tr')
+    //   .selectAll('th')
+    //   .data(data.columns).enter()
+    //   .append('th')
+    //   .text(d => d);
+    //
+    // table.append('tbody')
+    //   .selectAll('tr')
+    //   .data(data)
+    //   .enter()
+    //   .append('tr');
+}
+
+for(var i = 0; i < charts.length; i++) {
+  if (charts[i].dataset.graphType == "grouped-bar") {
+    drawGroupedBar();
+  } else if (charts[i].dataset.graphType == "vertical-bar") {
+    console.log("vertical bar chart");
+  } else if (charts[i].dataset.graphType == "pie") {
+    console.log("pie chart");
+  }
+}
+// drawVerticalBar();
+// drawHorizontalBar();