-
Notifications
You must be signed in to change notification settings - Fork 43
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[feature] Entity specific analytics (#1389)
* [feature] Entity specific analytics Addresses: #1292 <img width="1101" alt="Screen Shot 2023-01-04 at 8 07 53 AM" src="https://user-images.githubusercontent.com/35935196/210561884-9f2220bf-0c69-45ff-bef4-d9f9dc974e3b.png"> ### Determining the visibility threshold for section views Threshold indicates at what percentage of the target's visibility the tracking should be executed. 0.75 threshold indicates that the tracking is done when 75% of the section is visible in the screen. However for larger sections, 75% of the content can never be visible. Therefore we need to adjust the threshold. A good rule of thumb is if the section is double the screen size, adjust the threshold to slightly less than 0.5 and if the section is 4 times the screen size, adjust threshold to less than 0.25, and so on REF: https://stackoverflow.com/questions/66296057/intersectionobserver-does-not-work-on-small-screens-for-long-sections-js/ https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#thresholds Co-authored-by: Pralish Kayastha <[email protected]> Co-authored-by: Pralish Kayastha <[email protected]>
- Loading branch information
3 people
authored
Jan 31, 2023
1 parent
b43d050
commit a1c806e
Showing
30 changed files
with
1,163 additions
and
24 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,3 @@ | ||
| //= link_tree ../images | ||
| //= link_directory ../stylesheets .css | ||
| //= link_tree ../javascripts |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| //= require moment | ||
| //= require bootstrap-daterangepicker | ||
|
|
||
| $(function() { | ||
| $('[data-toggle="tooltip"]').tooltip(); | ||
|
|
||
| $('#reportrange').daterangepicker({ | ||
| opens: 'left', | ||
| locale: { | ||
| format: 'YYYY/MM/DD' | ||
| }, | ||
| startDate: $("#start_date").val() || moment().startOf('month'), | ||
| endDate: $("#end_date").val() || moment().endOf('month'), | ||
| ranges: { | ||
| [moment().format('MMMM YYYY')]: [moment().startOf('month'), moment().endOf('month')], | ||
| '3 months': [moment().startOf('month').subtract(2, 'months'), moment().endOf('month')], | ||
| '6 months': [moment().startOf('month').subtract(5, 'months'), moment().endOf('month')], | ||
| '1 year': [moment().startOf('month').subtract(11, 'months'), moment().endOf('month')] | ||
| } | ||
| }, function(start, end, label) { | ||
| $('#start_date').val(start.format('YYYY-MM-DD')); | ||
| $('#end_date').val(end.format('YYYY-MM-DD')); | ||
| $('#interval').val(label); | ||
| cb(); | ||
| $("#analytics_filter").submit(); | ||
| }); | ||
|
|
||
| cb(); | ||
| }); | ||
|
|
||
| function cb() { | ||
| if (!$('#start_date').val() && !$('#end_date').val()) { | ||
| $('#reportrange span').html(moment().format('MMMM YYYY')); | ||
| } else if ($('#interval').val() == 'Custom Range') { | ||
| $('#reportrange span').html(moment($("#start_date").val()).format('MMMM D, YYYY') + ' - ' + moment($("#end_date").val()).format('MMMM D, YYYY')); | ||
| } else { | ||
| $('#reportrange span').html($('#interval').val()); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,175 @@ | ||
| // Place all the styles related to the dashboard controller here. | ||
| // They will automatically be included in application.css. | ||
| // You can use Sass (SCSS) here: https://sass-lang.com/ | ||
|
|
||
| .vr-analytics { | ||
| color: #293845; | ||
|
|
||
| &-title { | ||
| font-size: 32px; | ||
| line-height: 44px; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| &-sub-title { | ||
| font-size: 24px; | ||
| line-height: 33px; | ||
| text-transform: capitalize; | ||
| } | ||
|
|
||
| &-count, | ||
| &-percent-change, | ||
| &-event-label { | ||
| color: #535F6A; | ||
| font-size: 16px; | ||
| line-height: 22px; | ||
| } | ||
|
|
||
| &-count { | ||
| margin-right: 10px; | ||
|
|
||
| @media (min-width: 768px) { | ||
| margin-left: 24px; | ||
| } | ||
| } | ||
|
|
||
| &-count-lg { | ||
| font-size: 24px; | ||
| line-height: 33px; | ||
| margin-right: 10px; | ||
| } | ||
|
|
||
| &-tooltips { | ||
| height: 16px; | ||
| width: 16px; | ||
| border-radius: 50%; | ||
| background-color: #D4D7DA; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| font-size: 12px; | ||
| font-weight: 600; | ||
| margin-left: 8px; | ||
| cursor: default; | ||
| } | ||
|
|
||
| &-percent-change { | ||
| .positive { | ||
| color: #63C32D; | ||
| } | ||
|
|
||
| .negative { | ||
| color: #E93E3E; | ||
| } | ||
| } | ||
|
|
||
| &-filter-dropdown-container { | ||
| & > button { | ||
| color: #BD34D1; | ||
| font-size: 16px; | ||
| font-weight: 600; | ||
| } | ||
| } | ||
|
|
||
| &-filters { | ||
| &-pages { | ||
| border: none; | ||
| outline: none; | ||
| -moz-appearance:none; /* Firefox */ | ||
| -webkit-appearance:none; /* Safari and Chrome */ | ||
| appearance:none; | ||
| background: transparent; | ||
| background-image: url("data:image/svg+xml;utf8,<svg fill='%23bd34d1' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>"); | ||
| background-repeat: no-repeat; | ||
| background-position-x: 98.5%; | ||
| background-position-y: 50%; | ||
| } | ||
|
|
||
| &-pages, | ||
| &-ranges > span, | ||
| &-ranges > i { | ||
| color: #BD34D1; | ||
| font-size: 16px; | ||
| font-weight: 600; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| @media (max-width: 767px) { | ||
| &-pages, | ||
| &-ranges { | ||
| width: 100%; | ||
| border: 1px solid #E5E7E8; | ||
| border-radius: 5px; | ||
| padding: 9px 16px; | ||
| margin-bottom: 8px; | ||
| } | ||
| } | ||
|
|
||
| } | ||
|
|
||
| &-card { | ||
| box-shadow: -4px 12px 24px #29384514; | ||
| border: 1px solid #E9EAEC; | ||
| border-radius: 5px; | ||
| position: relative; | ||
|
|
||
| & > a { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| bottom: 0; | ||
| right: 0; | ||
| } | ||
|
|
||
| &-section { | ||
| padding: 16px; | ||
| } | ||
|
|
||
| &-resource-poster-conatiner { | ||
| margin-right: 10px; | ||
|
|
||
| & > img { | ||
| height: 48px; | ||
| width: 85px; | ||
| object-fit: cover; | ||
| } | ||
| } | ||
|
|
||
| &-resource-title { | ||
| font-weight: bold; | ||
| position: relative; | ||
| pointer-events: none; | ||
| z-index: 1; | ||
|
|
||
| & > a { | ||
| color: #293845; | ||
| pointer-events: all; | ||
| } | ||
| } | ||
|
|
||
| &-resource-duration { | ||
| color: #535F6A; | ||
| } | ||
| } | ||
|
|
||
| &-section { | ||
| padding: 32px 0; | ||
|
|
||
| &-header { | ||
| margin-bottom: 24px; | ||
| } | ||
| } | ||
|
|
||
| &-page-visit-events { | ||
| &-donut-chart { | ||
| padding: 16px; | ||
| } | ||
| } | ||
|
|
||
|
|
||
| &-blank-states { | ||
| color: grey; | ||
| padding: 0 25px 40px; | ||
| font-size: 14px; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| class Comfy::Admin::V2::DashboardController < Comfy::Admin::Cms::BaseController | ||
| include AhoyEventsHelper | ||
|
|
||
| before_action :ensure_authority_to_manage_analytics | ||
|
|
||
| def dashboard | ||
| @start_date = params[:start_date]&.to_date || Date.today.beginning_of_month | ||
| @end_date = params[:end_date]&.to_date || Date.today.end_of_month | ||
| date_range = @start_date.beginning_of_day..@end_date.end_of_day | ||
|
|
||
| @visits = Ahoy::Visit.where(started_at: @start_date.beginning_of_day..@end_date.end_of_day) | ||
|
|
||
| Ahoy::Event::EVENT_CATEGORIES.values.each do |event_category| | ||
| if event_category == Ahoy::Event::EVENT_CATEGORIES[:page_visit] | ||
| events = Ahoy::Event.where(name: 'comfy-cms-page-visit').joins(:visit) | ||
| else | ||
| events = Ahoy::Event.jsonb_search(:properties, { category: event_category }).joins(:visit) | ||
| end | ||
| events = events.jsonb_search(:properties, { page_id: params[:page] }) if params[:page].present? | ||
| instance_variable_set("@previous_period_#{event_category}_events", events.where(time: previous_period(params[:interval], @start_date, @end_date))) | ||
| instance_variable_set("@#{event_category}_events", events.where(time: date_range)) | ||
| end | ||
|
|
||
| # legacy and system events does not have category | ||
| # separating out 'comfy-cms-page-visit' event since we have a seprate section | ||
| @legacy_and_system_events = Ahoy::Event.where.not('properties::jsonb ? :key', key: 'category').where.not(name: 'comfy-cms-page-visit').joins(:visit) | ||
| @previous_period_legacy_and_system_events = @legacy_and_system_events.where(time: previous_period(params[:interval], @start_date, @end_date)) | ||
| @legacy_and_system_events = @legacy_and_system_events.where(time: date_range) | ||
| end | ||
|
|
||
|
|
||
| private | ||
|
|
||
| def previous_period(interval, start_date, end_date) | ||
| today = Date.current | ||
| interval = interval || today.strftime('%B %Y') | ||
|
|
||
| case interval | ||
| when "#{today.strftime('%B %Y')}" | ||
| today.prev_month.beginning_of_month.beginning_of_day..today.prev_month.end_of_month.end_of_day | ||
| when "3 months" | ||
| (start_date - 3.months).beginning_of_month.beginning_of_day..(start_date - 1.month).end_of_month.end_of_day | ||
| when "6 months" | ||
| (today - 6.months).beginning_of_month.beginning_of_day..(start_date - 1.month).end_of_month.end_of_day | ||
| when "1 year" | ||
| (today - 12.months).beginning_of_month.beginning_of_day..(start_date - 1.month).end_of_month.end_of_day | ||
| else | ||
|
|
||
| days_diff = (end_date - start_date).to_i | ||
| (start_date - (days_diff + 1).days).beginning_of_day..(start_date - 1.day).end_of_day | ||
| end | ||
| end | ||
| end |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.