update tracker script to pull in at-sp.js & add page_context to PVs; …

…add data-track to links to be used as ui_interaction label

_includes/back_to_home.html

@@ -1 +1 @@
-<div style="float:right;"><a href="{{ '' | relative_url }}/">< Back to home</a></div>
+<div style="float:right;"><a href="{{ '' | relative_url }}/" data-track="back to home">< Back to home</a></div>

_includes/footer.html

@@ -2,7 +2,7 @@
   <ul class="social-media-list">
     {% if site.twitter.username %}
     <li>
-      <a href="https://twitter.com/{{ site.twitter.username }}">
+      <a href="https://twitter.com/{{ site.twitter.username }}" data-track="footer twitter">
         {% include icons/twitter.html %}
         <span class="username">{{ site.twitter.username }}</span>
       </a>
@@ -11,7 +11,7 @@
 
     {% if site.githubdotcom.username %}
     <li>
-      <a href="https://github.com/{{ site.githubdotcom.username }}">
+      <a href="https://github.com/{{ site.githubdotcom.username }}" data-track="footer github">
         <span class="icon  icon--github">
           <svg viewBox="0 0 16 16">
             <path fill="#828282" d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/>
@@ -24,15 +24,15 @@
 
     {% if site.facebook.username %}
     <li>
-      <a href="https://www.facebook.com/{{ site.facebook.username }}">
+      <a href="https://www.facebook.com/{{ site.facebook.username }}" data-track="footer facebook">
         {% include icons/facebook.html %}
         <span class="username">{{ site.facebook.username }}</span>
       </a>
     </li>
     {% endif %}
 
     <li>
-      <a href="https://careers.autotrader.co.uk/">
+      <a href="https://careers.autotrader.co.uk/" data-track="footer careers">
         <span class="icon  icon--autotrader">
           <svg viewBox="0 0 47 35 ">
             <g><g><linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-4460.2529" y1="2198.585" x2="-4499.5186" y2="2209.1797" gradientTransform="matrix(-1 0 0 -1 -4459.7529 2225.3359)"><stop  offset="0" style="stop-color:#2672A3"/><stop  offset="0.37" style="stop-color:#267EC8"/><stop  offset="1" style="stop-color:#1FA3DD"/></linearGradient><path fill="url(#SVGID_1_)" d="M31.523,27.898l0.01-0.005c0.08,0.003,0.161,0.005,0.243,0.005c2.452,0,4.543-1.538,5.364-3.7l3.531-8.478H5.092L0,27.898H31.523z"/></g><g><linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="46.5913" y1="1.3071" x2="7.3259" y2="11.9018"><stop  offset="0" style="stop-color:#E41631"/><stop  offset="0.63" style="stop-color:#E30921"/><stop  offset="1" style="stop-color:#C11726"/></linearGradient><path fill="url(#SVGID_2_)" d="M15.57,0.16l-0.01,0.005c-0.08-0.003-0.161-0.005-0.242-0.005c-2.452,0-4.543,1.538-5.365,3.7l-3.531,8.478H42L47.092,0.16H15.57z"/></g></g>
@@ -44,7 +44,7 @@
     </li>
 
     <li>
-      <a href="https://www.autotrader.co.uk/">
+      <a href="https://www.autotrader.co.uk/" data-track="footer main site">
         <span class="icon  icon--autotrader">
           <svg viewBox="0 0 47 35 ">
             <g><g><linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-4460.2529" y1="2198.585" x2="-4499.5186" y2="2209.1797" gradientTransform="matrix(-1 0 0 -1 -4459.7529 2225.3359)"><stop  offset="0" style="stop-color:#2672A3"/><stop  offset="0.37" style="stop-color:#267EC8"/><stop  offset="1" style="stop-color:#1FA3DD"/></linearGradient><path fill="url(#SVGID_1_)" d="M31.523,27.898l0.01-0.005c0.08,0.003,0.161,0.005,0.243,0.005c2.452,0,4.543-1.538,5.364-3.7l3.531-8.478H5.092L0,27.898H31.523z"/></g><g><linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="46.5913" y1="1.3071" x2="7.3259" y2="11.9018"><stop  offset="0" style="stop-color:#E41631"/><stop  offset="0.63" style="stop-color:#E30921"/><stop  offset="1" style="stop-color:#C11726"/></linearGradient><path fill="url(#SVGID_2_)" d="M15.57,0.16l-0.01,0.005c-0.08-0.003-0.161-0.005-0.242-0.005c-2.452,0-4.543,1.538-5.365,3.7l-3.531,8.478H42L47.092,0.16H15.57z"/></g></g>

_includes/head.html

@@ -34,7 +34,7 @@
     <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
     <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
     <script type="text/javascript" async=1>
-        ;(function(p,l,o,w,i,n,g){if(!p[i]){p.GlobalSnowplowNamespace=p.GlobalSnowplowNamespace||[]; p.GlobalSnowplowNamespace.push(i);p[i]=function(){(p[i].q=p[i].q||[]).push(arguments) };p[i].q=p[i].q||[];n=l.createElement(o);g=l.getElementsByTagName(o)[0];n.async=1; n.src=w;g.parentNode.insertBefore(n,g)}}(window,document,"script","https://m.atcdn.co.uk/frostbite/3.6.0/sp.js","snowplow"));
+        ;(function(p,l,o,w,i,n,g){if(!p[i]){p.GlobalSnowplowNamespace=p.GlobalSnowplowNamespace||[]; p.GlobalSnowplowNamespace.push(i);p[i]=function(){(p[i].q=p[i].q||[]).push(arguments) };p[i].q=p[i].q||[];n=l.createElement(o);g=l.getElementsByTagName(o)[0];n.async=1; n.src=w;g.parentNode.insertBefore(n,g)}}(window,document,"script","https://m.atcdn.co.uk/frostbite/3.6.0/at-sp.js","snowplow"));
         window.snowplow("newTracker", "sp", "avalanche.autotrader.co.uk", {
             appId: "engineering-blog",
             platform: "web",
@@ -47,7 +47,16 @@
             cookieSameSite: 'Lax', // Required for older browser compatibility - do not change
             cookieSecure: true,
         });
-        window.snowplow('trackPageView');
+        window.snowplow('trackPageView', {
+            contextCallback: function() {
+                return [{
+                    schema: 'iglu:uk.co.autotrader/page_context/jsonschema/1-0-1',
+                    data: {
+                        name: document.title
+                    }
+                }];
+            }
+        });
         window.snowplow('enableLinkClickTracking');
     </script>
 </head>

_includes/header.html

@@ -1,12 +1,12 @@
 {% if site.include_repo_ribbon %}
-<a href="https://github.atcloud.io/AutoTrader/autotrader.github.atcloud.io"><img style="position: absolute; top: 0; right: 0; border: 0; z-index: 99;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
+<a href="https://github.atcloud.io/AutoTrader/autotrader.github.atcloud.io" data-track="github link"><img style="position: absolute; top: 0; right: 0; border: 0; z-index: 99;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
 {% endif %}
 <header class="site-header">
 
 
     <div class="top-header" >
         <div class="wrapper">
-           <a class="site-title at-logo" href="{{ '' | relative_url }}/" >
+           <a class="site-title at-logo" href="{{ '' | relative_url }}/" data-track="header AT logo" >
                 Auto Trader
            </a>
             <span>{{ site.title }}</span>
@@ -18,7 +18,7 @@
         <nav class="site-nav">
 
 
-            <a href="#" class="menu-icon">
+            <a href="#" class="menu-icon" data-track="menu button">
                 <svg viewBox="0 0 18 15">
                     <path fill="#424242" d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.031C17.335,0,18,0.665,18,1.484L18,1.484z"/>
                     <path fill="#424242" d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484 h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z"/>
@@ -30,7 +30,7 @@
 
 
 
-            <a class="site-title at-logo" href="{{ '' | relative_url }}/" >
+            <a class="site-title at-logo" href="{{ '' | relative_url }}/" data-track="nav AT logo" >
                 Auto Trader
             </a>
 
@@ -39,7 +39,7 @@
 
                 {% for page in site.pages %}
                   {% if page.title %}
-                  <a class="page-link" href="{{ page.url | relative_url }}">{{ page.title }}</a>
+                  <a class="page-link" href="{{ page.url | relative_url }}" data-track="nav {{ page.title }}">{{ page.title }}</a>
                   {% endif %}
                 {% endfor %}
 

_includes/social_share.html

@@ -1,9 +1,9 @@
 <div class="social-share">
   Share:
-  <a href="https://twitter.com/intent/tweet?text={{ page.title }}&url={{ page.url | absolute_url }}&via={{ site.twitter.username }}&related={{ site.twitter.username }}" rel="nofollow" target="_blank" title="Share on Twitter">
+  <a href="https://twitter.com/intent/tweet?text={{ page.title }}&url={{ page.url | absolute_url }}&via={{ site.twitter.username }}&related={{ site.twitter.username }}" data-track="twitter" rel="nofollow" target="_blank" title="Share on Twitter">
     {% include icons/twitter.html %}
   </a>
-  <a href="https://facebook.com/sharer.php?u={{ page.url | absolute_url }}" rel="nofollow" target="_blank" title="Share on Facebook">
+  <a href="https://facebook.com/sharer.php?u={{ page.url | absolute_url }}" data-track="facebook" rel="nofollow" target="_blank" title="Share on Facebook">
     {% include icons/facebook.html %}
   </a>
 </div>

_layouts/index.html

@@ -10,7 +10,7 @@ <h1 class="page-heading">{{site.title}}</h1>
         {% for post in paginator.posts %}
         <li>
             <h2>
-                <a class="post-link" href="{{ post.url | relative_url }}">{{ post.title }}</a>
+                <a class="post-link" data-track="{{ post.title }} title" href="{{ post.url | relative_url }}">{{ post.title }}</a>
             </h2>
             <p>
                 <span class="post-meta">{{ post.date | date: "%b %-d, %Y" }}{% if post.author %} • {{ post.author }}{% endif %}</span>
@@ -24,7 +24,7 @@ <h2>
             {{ post.excerpt | number_of_words }}
             {% endcapture %}
             {% if excerpt_words != content_words %}
-            <p><a class="btn btn-sm btn-primary" href="{{ post.url | relative_url }}" role="button">Read more… <i class="fa fa-arrow-circle-right"></i></a>
+            <p><a class="btn btn-sm btn-primary" data-track="{{ post.title }} read more" href="{{ post.url | relative_url }}" role="button">Read more… <i class="fa fa-arrow-circle-right"></i></a>
             </p>
             {% endif %}
         </li>
@@ -34,13 +34,13 @@ <h2>
     {% if paginator.total_pages != 1 %}
     <div class="pagination">
         {% if paginator.previous_page %}
-        <a href="{{ paginator.previous_page_path | relative_url }}" class="previous">Previous</a>
+        <a href="{{ paginator.previous_page_path | relative_url }}" data-track="previous" class="previous">Previous</a>
         {% else %}
         <span class="previous inactive">Previous</span>
         {% endif %}
         <span class="page_number ">Page {{ paginator.page }} of {{ paginator.total_pages }}</span>
         {% if paginator.next_page %}
-        <a href="{{ paginator.next_page_path | relative_url }}" class="next">Next</a>
+        <a href="{{ paginator.next_page_path | relative_url }}" data-track="next" class="next">Next</a>
         {% else %}
         <span class="next inactive">Next</span>
         {% endif %}

_layouts/post.html

@@ -14,14 +14,14 @@ <h1 class="post-title">{{ page.title }}</h1>
     </div>
     {% assign sortedTags = page.tags | sort %}
     {% for tag in sortedTags %}
-    <span class="tag"><a href="{{ tag | slugify | prepend: '/tags#' | relative_url }}">#{{ tag }}</a></span>
+    <span class="tag"><a href="{{ tag | slugify | prepend: '/tags#' | relative_url }}" data-track="tag {{ tag }}">#{{ tag }}</a></span>
     {% endfor %}
   </header>
 
   <article class="post-content">
     {{ content }}
     {% include social_share.html %}
-    <span class=""></span><p>Enjoyed that? <a href="/">Read some other posts</a>.</p>
+    <span class=""></span><p>Enjoyed that? <a href="/" data-track="read other posts">Read some other posts</a>.</p>
     {% include comments.html %}
   </article>
 
@@ -54,18 +54,18 @@ <h3 id="related-posts">Related Posts</h3>
     {% endfor %}
     {% if sameTagCount > 0 %}
     <div class="related-post">
-      <a href="{{ post.url | relative_url }}">
+      <a href="{{ post.url | relative_url }}" data-track="related post {{ post.title }}">
         <strong>{{ post.title }}</strong><br>
         {{ post.date | date_to_string }}—{{ post.author }}
       </a>
         {% assign sortedTags = post.tags | sort %}
         <ul>
         {% for tag in sortedTags %}
-          <li><a href="{{ tag | slugify | prepend: '/tags#' | relative_url }}" class="related-post-tag">#{{ tag }}</a></li>
+          <li><a href="{{ tag | slugify | prepend: '/tags#' | relative_url }}" data-track="related post tag {{ tag }}" class="related-post-tag">#{{ tag }}</a></li>
         {% endfor %}
         </ul>
         <p>{{ post.excerpt | truncatewords: 50 }}</p>
-        <p><a class="btn btn-sm btn-primary" href="{{ post.url | relative_url }}" role="button">Read more… <i class="fa fa-arrow-circle-right"></i></a>
+        <p><a class="btn btn-sm btn-primary" href="{{ post.url | relative_url }}" data-track="related post read more {{ post.title }}" role="button">Read more… <i class="fa fa-arrow-circle-right"></i></a>
       </p>
     </div>
     {% endif %}