Adjust analytics styling and accuracy (#951)
* Adjust analytics styling and accuracy * Add video button back in
This commit is contained in:
Ben Halpern
GitHub
parent
40f09e4b77
commit
8184baed83
6 changed files with 77 additions and 38 deletions
BIN
app/assets/images/emoji/apple-eyes.png
Normal file
BIN
app/assets/images/emoji/apple-eyes.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
|
|
@ -13,9 +13,11 @@ function initializeAnalytics() {
|
|||
var total = 0;
|
||||
for (var k in json){
|
||||
total = total + Number(json[k]);
|
||||
document.getElementById("pageviews-"+k).innerHTML = numberWithCommas(json[k]) + " VIEWS";
|
||||
var numString = parseInt(json[k]) < 100 ? "< 100 " : numberWithCommas(json[k]) ;
|
||||
var totalString = parseInt(total) < 100 ? "< 100 " : numberWithCommas(total) ;
|
||||
document.getElementById("pageviews-"+k).innerHTML = numString + " Views";
|
||||
document.getElementById("pageviews-"+k).classList.add("loaded");
|
||||
document.getElementById("dashboard-analytics").innerHTML = "Total Views: "+ numberWithCommas(total);
|
||||
document.getElementById("dashboard-analytics").innerHTML = totalString+ " Total Views";
|
||||
}
|
||||
document.getElementById("dashboard-analytics-header").classList.add("loaded");
|
||||
});
|
||||
|
|
|
|||
|
|
@ -67,31 +67,53 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.dashboard-analytics-header-wrapper{
|
||||
text-align: center;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
.dashboard-analytics-header{
|
||||
background: $green;
|
||||
color:white;
|
||||
margin:10px auto;
|
||||
font-size:calc(1.2em + 1.5vw);
|
||||
padding: 30px 5px;
|
||||
padding-left: calc(1em + 1vw);
|
||||
opacity:0.3;
|
||||
font-family: $helvetica-condensed;
|
||||
font-stretch:condensed;
|
||||
color:$black;
|
||||
margin:5px auto;
|
||||
font-size:calc(0.8em + 0.25vw);
|
||||
padding: 20px 0px;
|
||||
padding-left: 10px;
|
||||
text-align: left;
|
||||
font-family: $monospace;
|
||||
border-radius: 3px;
|
||||
border: 1px solid $light-medium-gray;
|
||||
box-shadow: $bold-shadow;
|
||||
display: inline-block;
|
||||
width: 90%;
|
||||
margin: 1.1%;
|
||||
@media screen and ( min-width: 600px ) {
|
||||
width: 45%;
|
||||
margin: 1.1%;
|
||||
}
|
||||
span{
|
||||
opacity:0.3;
|
||||
}
|
||||
img{
|
||||
width: calc(0.9em + 1.3vw);
|
||||
height: calc(0.9em + 1.3vw);
|
||||
margin-right: 0.5em;
|
||||
vertical-align: calc(-0.25vw - 2px);
|
||||
width: calc(0.9em + 1.2vw);
|
||||
height: calc(0.9em + 1.2vw);
|
||||
margin-right: 0.4em;
|
||||
margin-left: 0.5em;
|
||||
vertical-align: calc(-0.6vw - 2px);
|
||||
}
|
||||
&.loaded{
|
||||
opacity:1;
|
||||
span{
|
||||
opacity:1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.video-upload-cta{
|
||||
display: inline-block;
|
||||
margin: 10px 0px 20px;
|
||||
}
|
||||
|
||||
.single-article{
|
||||
border: 1px solid $light-medium-gray;
|
||||
box-shadow: $shadow;
|
||||
box-shadow: $bold-shadow;
|
||||
padding:5px 15px;
|
||||
margin-bottom:13px;
|
||||
border-radius:3px;
|
||||
|
|
@ -155,12 +177,15 @@
|
|||
}
|
||||
}
|
||||
.dashboard-pageviews-indicator{
|
||||
background:$green;
|
||||
display:inline-block;
|
||||
border:1px solid darken($green,5%);
|
||||
min-width:90px;
|
||||
font-family: $monospace;
|
||||
color: $black;
|
||||
background: white;
|
||||
text-align:center;
|
||||
opacity:0.4;
|
||||
height: 23px;
|
||||
line-height: 22px;
|
||||
padding: 2px 8px;
|
||||
&.loaded{
|
||||
opacity:1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ class GoogleAnalytics
|
|||
@user_id = user_id.to_s
|
||||
@client = AnalyticsReportingService.new
|
||||
@client.authorization = create_service_account_credential
|
||||
@start_date = "201#{rand(5..8)}-0#{rand(1..8)}-0#{rand(1..9)}"
|
||||
end
|
||||
|
||||
def get_pageviews
|
||||
|
|
@ -58,8 +59,13 @@ class GoogleAnalytics
|
|||
view_id: ApplicationConfig["GA_VIEW_ID"],
|
||||
filters_expression: filters_expression_string,
|
||||
metrics: [Metric.new(expression: metrics_string)],
|
||||
date_ranges: [
|
||||
DateRange.new(start_date: "2015-01-01", end_date: "today"),
|
||||
dimensions: [Dimension.new(name: "ga:segment")],
|
||||
segments: [Segment.new(segment_id: "gaid::-1"),
|
||||
Segment.new(segment_id: "gaid::-2"),
|
||||
Segment.new(segment_id: "gaid::-19"),
|
||||
Segment.new(segment_id: "gaid::-7")],
|
||||
date_ranges: [
|
||||
DateRange.new(start_date: @start_date, end_date: "2020-01-01"),
|
||||
],
|
||||
)
|
||||
end
|
||||
|
|
@ -68,7 +74,9 @@ class GoogleAnalytics
|
|||
grr = GetReportsRequest.new(report_requests: report_requests, quota_user: @user_id.to_s)
|
||||
response = @client.batch_get_reports(grr)
|
||||
response.reports.map do |report|
|
||||
report.data.totals[0].values[0]
|
||||
p report.data
|
||||
p report.data
|
||||
(report.data.maximums || report.data.totals)[0].values[0]
|
||||
end
|
||||
end
|
||||
|
||||
|
|
@ -78,11 +86,4 @@ class GoogleAnalytics
|
|||
scope: [AUTH_ANALYTICS_READONLY],
|
||||
)
|
||||
end
|
||||
|
||||
def adjust(pageviews)
|
||||
# This is naiively adjusting for "lost views" from adblockers,
|
||||
# and ghostery, non-js loaded, etc.
|
||||
# We can loosen this in the near future.
|
||||
pageviews.map { |n| (n.to_i * 1.1).to_i.to_s }
|
||||
end
|
||||
end
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@ class AnalyticsController < ApplicationController
|
|||
pageviews = GoogleAnalytics.new(chunk.pluck(:id), current_user.id).get_pageviews
|
||||
page_views_obj = pageviews.to_h
|
||||
chunk.each do |article|
|
||||
next if article.page_views_count > page_views_obj[article.id].to_i
|
||||
article.update_columns(page_views_count: page_views_obj[article.id].to_i,
|
||||
previous_positive_reactions_count: article.positive_reactions_count)
|
||||
end
|
||||
|
|
|
|||
|
|
@ -23,9 +23,14 @@
|
|||
<% end %>
|
||||
<% if @user.org_admin && @user.organization && params[:which] == "organization" %>
|
||||
<% if current_user.can_view_analytics? %>
|
||||
<div class="dashboard-analytics-header" id="dashboard-analytics-header">
|
||||
<img src="<%= asset_path('bar-chart-white.svg') %>" /><span id="dashboard-analytics">...</span>
|
||||
<div class="dashboard-analytics-header-wrapper">
|
||||
<div class="dashboard-analytics-header loaded">
|
||||
<img src="<%= asset_path "emoji/emoji-one-heart.png" %>" /><span><%= @articles.sum(&:positive_reactions_count) %> Total Post Reactions</span>
|
||||
</div>
|
||||
<div class="dashboard-analytics-header" id="dashboard-analytics-header">
|
||||
<img id="dashboard-analytics-image" src="<%= asset_path "emoji/apple-eyes.png" %>" /><span id="dashboard-analytics">Loading Views Data...</span>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
<% @articles.each do |article| %>
|
||||
<div class="single-article">
|
||||
|
|
@ -36,7 +41,7 @@
|
|||
<% end %>
|
||||
<a href="<%= article.path %>/edit" class="pill cta green">EDIT</a>
|
||||
<% if article.published && current_user.can_view_analytics? %>
|
||||
<span id="pageviews-<%= article.id %>" class="cta pill dashboard-pageviews-indicator" data-analytics-pageviews data-article-id="<%= article.id %>">fetching stats...</span>
|
||||
<span id="pageviews-<%= article.id %>" class="cta pill dashboard-pageviews-indicator" data-analytics-pageviews data-article-id="<%= article.id %>">Loading View Data...</span>
|
||||
<% end %>
|
||||
</div>
|
||||
<%= form_for(article) do |f| %>
|
||||
|
|
@ -62,13 +67,18 @@
|
|||
<% end %>
|
||||
<% elsif @articles.any? %>
|
||||
<% if current_user.can_view_analytics? %>
|
||||
<div class="dashboard-analytics-header" id="dashboard-analytics-header">
|
||||
<img src="<%= asset_path('bar-chart-white.svg') %>" /><span id="dashboard-analytics">...</span>
|
||||
<div class="dashboard-analytics-header-wrapper">
|
||||
<div class="dashboard-analytics-header loaded">
|
||||
<img src="<%= asset_path "emoji/emoji-one-heart.png" %>" /><span><%= @articles.sum(&:positive_reactions_count) %> Total Post Reactions</span>
|
||||
</div>
|
||||
<div class="dashboard-analytics-header" id="dashboard-analytics-header">
|
||||
<img id="dashboard-analytics-image" src="<%= asset_path "emoji/apple-eyes.png" %>" /><span id="dashboard-analytics">Loading Views Data...</span>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
<% if current_user.has_role?(:video_permission) %>
|
||||
<a class="cta" style="display:block;text-align:center;font-size:1.5em;border-radius:3px;margin:20px 0px;padding: 6px 20px; max-width: 200px;background:#4e57ef;color:white" href="/videos/new" data-no-instant>
|
||||
Upload a Video
|
||||
<a class="video-upload-cta" href="/videos/new" data-no-instant>
|
||||
Upload a Video 🎥
|
||||
</a>
|
||||
<% end %>
|
||||
<% @articles.each do |article| %>
|
||||
|
|
@ -87,7 +97,7 @@
|
|||
<a href="<%= article.path %>/edit" class="cta pill green">EDIT</a>
|
||||
<a href="<%= article.path %>/delete_confirm" data-no-instant class="cta pill black">DELETE</a>
|
||||
<% if article.published && current_user.can_view_analytics? %>
|
||||
<span id="pageviews-<%= article.id %>" class="cta pill dashboard-pageviews-indicator" data-analytics-pageviews data-article-id="<%= article.id %>">fetching stats...</span>
|
||||
<span id="pageviews-<%= article.id %>" class="cta pill dashboard-pageviews-indicator" data-analytics-pageviews data-article-id="<%= article.id %>">Loading View Data...</span>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue