Add boosted post final tracking details (#102)

app/assets/javascripts/initializers/initializeAdditionalContentBoxes.js

@@ -10,6 +10,7 @@ function initializeAdditionalContentBoxes() {
           el.innerHTML = html;
           initializeReadingListIcons();
           initializeAllFollowButts();
+          initializeSponsorshipVisibility();
         })
       } else {
         // there's currently no errorCb.

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)
 }

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>

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>

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>

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 %>

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>