Merge pull request #1006 from gymnasium/patch/hero-take5-campaign

Take 5 evergreen hero

_data/hero.yml

@@ -1,5 +1,5 @@
-current_promo: articles/hero-article.html
-auth_promo: articles/hero-article.html
+current_promo: evergreen/hero-take5-campaign.html
+auth_promo: evergreen/hero-take5-campaign.html
 
 # Livestream
 # Set true/false (lowercase).

_includes/heros/evergreen/hero-take5-campaign.html

@@ -1,5 +1,6 @@
 <link rel="preload" href="{{ site.url }}/img/take5/posters/gym-5019-hero.jpg?{{ site.time | date:'%s' }}" as="image" media="(min-width: 75em)">
 <link rel="stylesheet" href="{{ site.url }}/css/heros/hero-take5-campaign.css?{{ site.time | date:'%s' }}" fetchpriority="high">
+<script async src="{{ site.url }}/js/hero-take5-campaign.js" fetchpriority="high"></script>
 
 <div class="hero-promo" id="hero-take5-campaign">
   <div class="hero-content-art">
@@ -14,10 +15,10 @@
       <header>
         <h2><span class="take5-brand-kern">Take 5</span></h2>
         <h1>Learn A New Skill in 5 Minutes</h1>
-        <p class="description">Watch free video tutorials on design, development, accessibility, prototyping, UX, and career skills.</p>
+        <p class="description">Watch free video tutorials on design, development, UX, prototyping, accessibility, and career skills.</p>
       </header>
       <div class="cta">
-        <a class="gym-button natural" href="https://thegymnasium.com/courses/take5"><b>Learn Something New</b></a>
+        <a class="gym-button natural" id="cta-take5" href="https://thegymnasium.com/courses/take5"><b>Learn Something New</b></a>
       </div>
     </div>
   </div>

js/hero-take5-campaign.js

@@ -0,0 +1,12 @@
+var cta = document.getElementById('cta-take5');
+var randomNum = Math.floor(Math.random() * 2) + 1;
+var baseUrl = 'https://thegymnasium.com/courses/take5';
+var baseUtm = '?utm_medium=banner&utm_source=hero&utm_content=';
+
+if (randomNum === 1) {
+  cta.innerHTML = '<b>Learn Something New</b>';
+  cta.setAttribute('href', baseUrl + baseUtm + 'learn-something-new');
+} else {
+  cta.innerHTML = '<b>Start Learning</b>';
+  cta.setAttribute('href', baseUrl + baseUtm + 'start-learning');
+}