L3houx/Google-Analytics-Using-Table-Smashing-Dashboard.md

## Google-Analytics-Using-Table-Smashing-Dashboard.md

      
    Raw
  

              Google-Analytics-Using-Table-Smashing-Dashboard.md
            
          
    Google Analytics Using Table - Smashing Dashboard Widget

This will allow you to visualize data easier in tables. It could aslo be easily adapted to show other data, only need to change fields in the GA request to get different data.

Create a script dashboard.erb in the dashboard directory

<% content_for :title do %>Super Dashboard<% end %>

<div class="gridster">
  <ul>
    <li data-row="1" data-col="1" data-sizex="5" data-sizey="3">
      <div data-id="pages" data-view="Ga_Pages_Stats" data-title="Google Analytics Pages Stats"></div>
    </li>
  </ul>
</div>


Create a script google_analytics.rb in the jobs directory

#!/usr/bin/env ruby
require 'rest-client'
require 'json'
require 'date'

require 'google/apis/analytics_v3'

Analytics = Google::Apis::AnalyticsV3
analytics = Analytics::AnalyticsService.new

scope = 'https://www.googleapis.com/auth/analytics'

analytics.authorization = Google::Auth::ServiceAccountCredentials.make_creds(
json_key_io: File.open('/path/to/your/json/secret.json'),scope: scope)

analytics.authorization.fetch_access_token!

# Get profiles
Profiles = analytics.list_profiles('~all', '~all')
profiles = Profiles.items

# Get profile
profile = profiles[0]

# Get id
profile_id = profile.id

table_headers = [{ value: "Title" }, {value:"Views" }]

SCHEDULER.every '10m', :first_in => 0 do |job|

    Ga_Data = analytics.get_ga_data("ga:"+profile_id,"2005-01-01","2020-03-25","ga:pageviews", dimensions:"ga:pageTitle, ga:pagePath", filters: "ga:pagePath=~/blog/", sort: "-ga:pageviews", max_results:"10")
    ga_rows = Ga_Data.rows

    pages_stats = Hash.new({ value: 0 })

    for i in 0..ga_rows.length - 1 do
        title = ga_rows[i][0]
        html_url = ga_rows[i][1]
        views = ga_rows[i][2]

        pages_stats[title] = { title: title, html_url: html_url, views: views }
    end

    send_event("pages", { table_headers: table_headers, pages: pages_stats.values})

end


Create a directory ga_pages_stats in the widgets directory


Add in the directory ga_pages_stats the file ga_pages_stats.coffee


class Dashing.Ga_Pages_Stats extends Dashing.Widget
ready: ->
    items = @items;
    elements = $(@node).find('a');

    for i in [0..elements.length-1]
        elements[i]["href"] = items[i]["html_url"];

        ga_pages_stats


Add in the directory ga_pages_stats the file ga_pages_stats.html

<h1 class="title" data-bind="title"></h1>

<table>
<tr>
    <th data-foreach-th="table_headers">
    <span class="label" data-bind="th.value"></span></th>
</tr>
<tr data-foreach-page="pages">
    <td>
    <a href="dashboard" target="_blank">
        <span class="label" data-bind="page.title"></span>
    </a>
    </td>
    <td>
    <span class="label" data-bind="page.views"></span>
    </td>
</tr>
</table>

<p class="more-info" data-bind="moreinfo"></p>
<p class="updated-at" data-bind="updatedAtMessage"></p>


Add in the directory ga_pages_stats the file ga_pages_stats.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #12b0c5;
$value-color:       #fff;

$title-color:       rgba(255, 255, 255, 0.7);
$label-color:       rgba(58, 58, 58, 0.7);
$moreinfo-color:    rgba(255, 255, 255, 0.7);

// ----------------------------------------------------------------------------
// Widget-table styles
// ----------------------------------------------------------------------------
.widget-ga-pages-stats {

vertical-align: top;

.title {
    color: $title-color;
}

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
    background-color: $background-color;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
    text-align: center;
}

th {
    background-color: #dddddd;
    text-align: center;
}

td:first-child{
    text-align: left;
}

.list-nostyle {
    list-style: none;
}

.label {
    color: $label-color;
    width: 100%;
}

.value {
    float: right;
    margin-left: 12px;
    font-weight: 600;
    color: $value-color;
}

.updated-at {
    margin-top: 5%;
    color: rgba(0, 0, 0, 0.3);
}

.more-info {
    color: $moreinfo-color;
}

}