From 5baa086bd0b5f6441d8797385dc88831aa8a806b Mon Sep 17 00:00:00 2001
From: Ben Halpern <bendhalpern@gmail.com>
Date: Mon, 19 Mar 2018 14:27:58 -0400
Subject: [PATCH] Add boosted post final tracking details (#102)

---
 .../initializeAdditionalContentBoxes.js       |  1 +
 .../initializeSponsorshipVisibility.js        | 27 ++++++++++++-------
 .../_article_box.html.erb                     | 14 +++++++---
 .../_article_content_area.html.erb            | 14 +++++-----
 .../_article_followable_area.html.erb         | 18 ++++++++++---
 .../additional_content_boxes/boxes.html.erb   | 13 +++++----
 app/views/articles/show.html.erb              |  3 ++-
 7 files changed, 59 insertions(+), 31 deletions(-)

diff --git a/app/assets/javascripts/initializers/initializeAdditionalContentBoxes.js b/app/assets/javascripts/initializers/initializeAdditionalContentBoxes.js
index 278c1bbe2..88b06d829 100644
--- a/app/assets/javascripts/initializers/initializeAdditionalContentBoxes.js
+++ b/app/assets/javascripts/initializers/initializeAdditionalContentBoxes.js
@@ -10,6 +10,7 @@ function initializeAdditionalContentBoxes() {
           el.innerHTML = html;
           initializeReadingListIcons();
           initializeAllFollowButts();
+          initializeSponsorshipVisibility();
         })
       } else {
         // there's currently no errorCb.
diff --git a/app/assets/javascripts/initializers/initializeSponsorshipVisibility.js b/app/assets/javascripts/initializers/initializeSponsorshipVisibility.js
index 1d68c7451..5be875f6c 100644
--- a/app/assets/javascripts/initializers/initializeSponsorshipVisibility.js
+++ b/app/assets/javascripts/initializers/initializeSponsorshipVisibility.js
@@ -13,17 +13,24 @@ function initializeSponsorshipVisibility() {
   }
   if (el && user && user.display_sponsors){
     el.classList.add("showing");
-    setTimeout(function(){
-      if (window.ga) {
-        var links = document.getElementsByClassName("partner-link");
-        for(var i = 0; i < links.length; i++) {
-          links[i].onclick = function(event){
-            ga('send', 'event', 'click', 'click sponsor link', event.target.dataset.details, null);
-          }
-        }
-      }
-    },400)
+    listenForSponsorClick();
   } else if (el && user) {
     el.classList.remove("showing");
+  } else if (el) {
+    el.classList.add("showing");
+    listenForSponsorClick();
   }
+}
+
+function listenForSponsorClick() {
+  setTimeout(function(){
+    if (window.ga) {
+      var links = document.getElementsByClassName("partner-link");
+      for(var i = 0; i < links.length; i++) {
+        links[i].onclick = function(event){
+          ga('send', 'event', 'click', 'click sponsor link', event.target.dataset.details, null);
+        }
+      }
+    }
+ },400)
 }
\ No newline at end of file
diff --git a/app/views/additional_content_boxes/_article_box.html.erb b/app/views/additional_content_boxes/_article_box.html.erb
index f5476a5d3..5d71f4d3a 100644
--- a/app/views/additional_content_boxes/_article_box.html.erb
+++ b/app/views/additional_content_boxes/_article_box.html.erb
@@ -1,13 +1,19 @@
   <div class="container show-page-content-display"
     data-details="<%= article.organization&.slug %>__<%= article.slug %>"
-    id="<%= article.organization ? "partner-content-display" : "classic_article_#{article.id}"  %>">
+    id="<%= classification == "boosted" ? "partner-content-display" : "classic_article_#{article.id}"  %>">
     <div class="content-classification">
-      <span class="content-classification-text"><%= classification %></span>
+      <span class="content-classification-text"><%= classification_text %></span>
     </div>
     <div class="main-content-display">
-      <%= render "additional_content_boxes/article_content_area", article: article, organization: article.organization %>
+      <%= render "additional_content_boxes/article_content_area",
+        article: article,
+        classification: classification,
+        organization: article.organization %>
     </div>
     <div class="secondary-content-display">
-      <%= render "additional_content_boxes/article_followable_area", followable: article.organization || article.user, follow_cue: follow_cue %>
+      <%= render "additional_content_boxes/article_followable_area",
+        followable: article.organization || article.user,
+        classification: classification,
+        follow_cue: follow_cue %>
     </div>
   </div>
\ No newline at end of file
diff --git a/app/views/additional_content_boxes/_article_content_area.html.erb b/app/views/additional_content_boxes/_article_content_area.html.erb
index 2d3249e28..b529ec9ba 100644
--- a/app/views/additional_content_boxes/_article_content_area.html.erb
+++ b/app/views/additional_content_boxes/_article_content_area.html.erb
@@ -1,4 +1,4 @@
-      <h2><a href="<%= article.path %>" class="<%= 'partner-link' if organization %>" data-details="<%= organization&.slug %>__<%= article.slug %>"><%= article.title %></a></h2>
+      <h2><a href="<%= article.path %>" class="<%= 'partner-link' if classification == "boosted" %>" data-details="<%= organization&.slug %>__<%= article.slug %>"><%= article.title %></a></h2>
       <div class="content-author">
         <a href="<%= article.user.path %>"> 
           <img class="profile-pic" src="<%= ProfileImage.new(article.user).get(50)%>" alt="<%= article.user.username %> profile image"/>
@@ -6,7 +6,7 @@
         </a>
       </div>
       <p>
-        <a href="<%= article.path %>" class="<%= 'partner-link' if organization %>" data-details="<%= organization&.slug %>__<%= article.slug %>">
+        <a href="<%= article.path %>" class="<%= 'partner-link' if classification == "boosted" %>" data-details="<%= organization&.slug %>__<%= article.slug %>">
           <%= article.description %>
         </a>
         <div class="engagement-count">
@@ -18,13 +18,13 @@
           <% end %>
         </div>
       </p>
-      <a href="<%= article.path %>" class="cta<%= ' partner-link' if organization %>" data-details="<%= organization&.slug %>__<%= article.slug %>">READ POST</a>
+      <a href="<%= article.path %>" class="cta<%= ' partner-link' if classification == "boosted" %>" data-details="<%= organization&.slug %>__<%= article.slug %>">READ POST</a>
       <button
-        class="article-engagement-count bookmark-engage<%= ' partner-link' if organization %>"
+        class="article-engagement-count bookmark-engage<%= ' partner-link' if classification == "boosted" %>"
         data-reactable-id="<%= article.id %>"
         aria-label="Save to reading list"
-        data-details="<%= organization&.slug %>__<%= article.slug %>"
+        data-details="<%= organization&.slug %>__<%= article.slug %>__SAVE"
         title="Save to reading list">
-        <span class="bm-success"><img src="<%= asset_path("readinglist-button.png") %>" alt="bookmark" /> SAVED</span>
-        <span class="bm-initial">SAVE FOR LATER</span>
+        <span class="bm-success" data-details="<%= organization&.slug %>__<%= article.slug %>__SAVE"><img src="<%= asset_path("readinglist-button.png") %>" alt="bookmark" /> SAVED</span>
+        <span class="bm-initial" data-details="<%= organization&.slug %>__<%= article.slug %>__SAVE">SAVE FOR LATER</span>
       </button>
diff --git a/app/views/additional_content_boxes/_article_followable_area.html.erb b/app/views/additional_content_boxes/_article_followable_area.html.erb
index 048fe9e20..1d88eed67 100644
--- a/app/views/additional_content_boxes/_article_followable_area.html.erb
+++ b/app/views/additional_content_boxes/_article_followable_area.html.erb
@@ -13,12 +13,22 @@
   </div>
 <% else %>
   <div class="profile-pic-wrapper">
-      <a href="<%= followable.path %>" />
-    <img class="profile-image" src="<%= ProfileImage.new(followable).get(200) %>" style="border: 4px solid <%= followable.bg_color_hex %>" />
+      <a href="<%= followable.path %>"
+        class="<%= ' partner-link' if classification == "boosted" %>"
+        data-details="<%= followable&.slug if classification == "boosted" %>__PROFILE"/>
+    <img class="profile-image"
+      src="<%= ProfileImage.new(followable).get(200) %>"
+      data-details="<%= followable&.slug if classification == "boosted" %>__PROFILE"
+      style="border: 4px solid <%= followable.bg_color_hex %>" />
   </div>
   <div class="org-name">
-    <a href="<%= followable.path %>" /><%= followable.name %></a>
+    <a href="<%= followable.path %>"
+      class="<%= ' partner-link' if classification == "boosted" %>"
+      data-details="<%= followable&.slug if classification == "boosted" %>__PROFILE" /><%= followable.name %></a>
   </div>
 <% end %>
-<button class="cta follow-action-button user-profile-follow-button" style="color:<%= user_colors(followable)[:text] %>;background-color:<%=user_colors(followable)[:bg] %>" data-info='{"id":<%= followable.id%>,"className":"<%= followable.class.name %>"}'>&nbsp;</button>
+<button class="cta follow-action-button user-profile-follow-button"
+  style="color:<%= user_colors(followable)[:text] %>;background-color:<%=user_colors(followable)[:bg] %>"
+  data-info='{"id":<%= followable.id%>,"className":"<%= followable.class.name %>"}'
+  >&nbsp;</button>
 <div class="org-summary"><%= follow_cue&.html_safe || followable.summary %></div>
diff --git a/app/views/additional_content_boxes/boxes.html.erb b/app/views/additional_content_boxes/boxes.html.erb
index a352738f9..ba1d0d65b 100644
--- a/app/views/additional_content_boxes/boxes.html.erb
+++ b/app/views/additional_content_boxes/boxes.html.erb
@@ -1,17 +1,20 @@
 <% if @boosted_article %>
   <%= render "additional_content_boxes/article_box",
     article: @boosted_article,
-    classification: "From one of our Community Sponsors",
+    classification: "boosted",
+    classification_text: "From one of our Community Sponsors",
     follow_cue: @boosted_article.organization.tag_line || @boosted_article.organization.summary %>
 <% elsif @alt_classic %>
   <%= render "additional_content_boxes/article_box",
     article: @alt_classic,
-    classification: "Classic DEV Post from #{@alt_classic.readable_publish_date}",
-    follow_cue: "Follow <a href='#{@alt_classic.user.path}'>@#{@alt_classic.user.username}</a> to see more of their posts in your feed." %>
+    classification: "alt_classic",
+    classification_text: "Classic DEV Post from #{@alt_classic.readable_publish_date}",
+    follow_cue: @boosted_article.organization&.tag_line || "Follow <a href='#{@alt_classic.user.path}'>@#{@alt_classic.user.username}</a> to see more of their posts in your feed." %>
 <% end %>
 <% if @for_user_article %>
   <%= render "additional_content_boxes/article_box",
     article: @for_user_article,
-    classification: "Another Post You Might Like",
-    follow_cue: "Follow <a href='#{@for_user_article.user.path}'>@#{@for_user_article.user.username}</a> to see more of their posts in your feed." %>
+    classification: "for_user_article",
+    classification_text: "Another Post You Might Like",
+    follow_cue: @boosted_article.organization&.tag_line || "Follow <a href='#{@for_user_article.user.path}'>@#{@for_user_article.user.username}</a> to see more of their posts in your feed." %>
 <% end %>
diff --git a/app/views/articles/show.html.erb b/app/views/articles/show.html.erb
index a61cb28cb..8f6ae5b42 100644
--- a/app/views/articles/show.html.erb
+++ b/app/views/articles/show.html.erb
@@ -184,7 +184,8 @@
   <% if @classic_article %>
     <%= render "additional_content_boxes/article_box",
       article: @classic_article,
-      classification: "Classic DEV Post from #{@classic_article.readable_publish_date}",
+      classification: "classic",
+      classification_text: "Classic DEV Post from #{@classic_article.readable_publish_date}",
       follow_cue: "Follow <a href='#{@classic_article.user.path}'>@#{@classic_article.user.username}</a> to see more of their posts in your feed." %>
   <% end %>
   <div id="additional-content-area" data-article-id="<%= @article.id %>,<%= @classic_article&.id %>"></div>