Utilizing the Google Analytics Embed API for a modern third-party dashboard integration within my Ruby on Rails application

I've been referencing a specific example for utilizing the Google Analytics Embed API with Chart.js in my application. However, I'm encountering an issue at Step 3 where we need to include various javascript libraries.

I was successful in loading the Embed API in my application.js as shown below:

(function(w,d,s,g,js,fs){
  g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(f){this.q.push(f);}};
  js=d.createElement(s);fs=d.getElementsByTagName(s)[0];
  js.src='https://apis.google.com/js/platform.js';
  fs.parentNode.insertBefore(js,fs);js.onload=function(){g.load('analytics');};
}(window,document,'script'));

//= require /public/javascript/Chart.min.j
//= require /public/javascript/moment.min.js
//= require /public/javascript/embed-api/date-range-selector.js
//= require /public/javascript/embed-api/active-users.js

Although it shows that the cb=gapi.loaded_0 library is being loaded in the Networks section of the dev tools, the other libraries such as Charts.min.js and moments.min.js are not. While I can find these online, I am unsure of where to locate embed-api/date-range-selector.js or embed-api/active-users.js to include in my app?

EDIT1 I managed to find the necessary files here: https://github.com/googleanalytics/ga-dev-tools

javascriptruby-on-railsgoogle-analyticsgoogle-analytics-apidashboard

Answer №1

It is important to remember that the Rails asset pipeline requires a //= require_self statement to ensure that code from the current file is included properly. If it seems like the loading snippet in your file is not running or is in the wrong order, consider saving it into a separate file for better organization and control over the order of execution.

// File: /public/javascript/embed-api-snippet.js

(function(w,d,s,g,js,fs){
  g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(f){this.q.push(f);}};
  js=d.createElement(s);fs=d.getElementsByTagName(s)[0];
  js.src='https://apis.google.com/js/platform.js';
  fs.parentNode.insertBefore(js,fs);js.onload=function(){g.load('analytics');};
}(window,document,'script'));

A good practice would be to place the rest of your code in a setup file:

// File: /public/javascript/embed-api-setup.js

gapi.analytics.ready(function() {

  gapi.analytics.auth.authorize({
   container: 'embed-api-auth-container',
   clientid: 'REPLACE WITH YOUR CLIENT ID',
  });

  // additional setup code...

});

Your manifest should then include:

//= require /public/javascript/embed-api-snippet.js

//= require /public/javascript/Chart.min.js
//= require /public/javascript/moment.min.js
//= require /public/javascript/embed-api/date-range-selector.js
//= require /public/javascript/embed-api/active-users.js

//= require /public/javascript/embed-api-setup.js

In response to your comment about gapi.analytics.auth.authorize being part of embed-api/active-user.js, it is actually something you need to write yourself as it needs to contain your specific client ID. This piece should be placed in the embed-api-setup.js file as detailed above.

You can find the setup code for the example you mentioned here.

Answer №2

For my project in Rails Admin, I followed a similar approach.

Initially, I referred to this guide on Stack Overflow for customizing Rails Admin and embedding an HTML view into the dashboard:

Rails Admin Customization: embed html view into dashboard

Within the .html.erb file, I inserted the Google Analytics code provided on their website:

<!doctype html>
<html>
...
</body>

  <footer class="SourceLink">
    <a
    href="https://github.com/googleanalytics/embed-api-demos/blob/master/site/6-pure-html-dashboards.html">
    View source on Github</a>
    &nbsp;&#8594;
  </footer>

</body>
</html>

Then, I integrated all the necessary GA JavaScript, CSS, and HTML into the Vendor folder.

I trust this explanation serves its purpose :)

EDIT1: Further insights about GA Dashboarding can be found here:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Working with Facebook Graph API data using javascript

I am attempting to parse output results from the Facebook Graph API (specifically comments on a website). Below is the script I am using: if (document.getElementById('comments')) { var url = "https://graph.facebook.com/fql?q=select+xid%2C ...

javascriptjqueryhtmlparsingfacebook-graph-api

Using jQuery to initiate a page load into a new page within the WorkLight platform

I need help redirecting to a new page when the current page is loaded. My website is built using jQuery mobile in combination with WorkLight. Index.html: <body> <div data-role="importpages" id="pageport"> </div> </body> ...

javascriptjqueryibm-mobilefirst

A mistake has been identified: The object could potentially be 'null'. TS2531 for window.document

This is my first time integrating TypeScript into my project. When attempting to access something using window.document.getElementById(), I keep encountering the error: Type error: Object is possibly 'null'. TS2531 I've looked online for ...

javascripttypescripttypescript2.0

Nuxt.js is throwing a TypeError because it is unable to access the 'minify' property since it is undefined

When I try to generate a Nuxt app using "npm run generate" or "npm run build", I encounter an issue where it throws a TypeError: Cannot read property 'minify' of undefined. Does anyone know how to solve this? TypeError: Cannot read property &apo ...

javascriptvue.jsnuxt.js

Retrieving the CSS property values for a specific element using Selenium

Imagine a scenario where I locate an element by its XPath using: WebElement element = driver.findElement(By.xpath("specific XPath")); While I can retrieve the value of a single CSS property with element.getCssValue("specific property"), is there a way to ...

javascriptjavacssseleniumxpath

Triggering AWS Lambda functions with SQS

Utilizing AWS and SES for sending emails and SMS through a Lambda function using NodeJs. I need to make more than 1k or 500 REST API calls, with the average call taking 3 seconds to execute a single lambda function request. It is essential to process mul ...

javascriptnode.jsamazon-web-servicesaws-lambdaamazon-sqs

Combining various data types within a single field in BigQuery

Is it feasible to specify a table schema with a field that allows for multiple data types? For instance: BIGQUERY TABLE SCHEMA schema: [{ name: 'field1', type: 'string', }, { name: 'field2', type: &apo ...

javascriptnode.jsgoogle-bigqueryschema

ngDraggable does not function properly when the dropzone is larger and includes a scrollbar on the body

Here is a demo showing the issue: The current version 0.1.11 does not support drag and drop functionality. This is how I have implemented the code: <uib-accordion-group is-open="category.open" name="category-{ ...

javascriptjqueryangulardrag-and-dropngdraggable

Clicking to reveal a v-date-picker v-menu and automatically focusing on a v-text-field within it?

I implemented a date-picker component in my app following the instructions from Vuetify. To enhance usability for desktop users, I removed the readonly attribute to allow manual input. Now, desktop users can easily navigate through form fields using th ...

javascriptvuejs2vuetify.js

Exploring Node.js and JSON: Retrieving specific object attributes

Utilizing ExpressJS, NodeJS, and Bookshelf.js In an attempt to display a user's list of friends, encountering the error "Unhandled rejection TypeError: Cannot read property 'friends' of undefined" when trying to access a property of the obj ...

javascriptjsonnode.jsbookshelf.js

Using the same component multiple times within a parent component in Angular 2

I have a CarsComponent where I repeatedly use the ChartComponent in its template, as shown in the code snippet below: cars.component.html: <div class="row" *ngIf="selectedItemId"> <div class="col-12 mb-2&quo ...

javascriptangulartypescriptnebular

Alter the app's entire background color in React.js with a button click

I am facing an issue with changing the background color of my entire React App when a button is clicked. Currently, I am able to change the color of the button itself but not the background. I have imported the App.css file into my project and I am looking ...

javascriptcssreactjs

Guide to ensuring modal box only appears once all criteria are satisfied

On my website, I have a form that requests the user's personal information. After filling out the form, a modal pops up with a "Thank you for signing up" message. The issue is that even if all fields are left blank and the button is clicked, the modal ...

javascriptformsmodal-dialogradio-buttonrequirements

When trying to use bootbox.confirm within a dynamically loaded AJAX div, the modal unexpectedly opens and

I have implemented bootbox into my project, which was downloaded from . user_update.php is being loaded in a div within users.php using ajax functionality. Within user_update.php, there is a JavaScript function called validateForm(). Right after the functi ...

javascriptjqueryajax

Is it necessary to clear out older node.js sessions that are saved in a database?

After incorporating a database session storage for my node application, I noticed that abandoned sessions could potentially linger in the database indefinitely if a user never returns to the application or clears their cookies. Would it be advisable for m ...

javascriptdatabasenode.jssessionsql-delete

On top of the world always is Mesh or Sean

Currently I am working on a 3D diagram, possibly using a bar or line graph. I have been using three.js version 60 as most of my code has already been developed with this version. However, I am facing an issue with adding legends to the diagram. The 3D obje ...

javascriptthree.jshtml5-canvas

What is the best way to toggle the visibility of fields on a modal in a Ruby on Rails

I am working on an application that utilizes Rails 4.1 and Ruby 2.1.2. The show.html.erb view for the Assignment Model in this application is as follows: <h1><%= "#{'Source URL'}"%> <div class="source-url"><%= @assignment.so ...

javascriptjqueryruby-on-railscoffeescript

In order to prevent redundancy in your Angular 2+ project, make sure to set

I recently organized my app by creating different modules such as auth, admin, and main. However, I noticed that I have the same imports in each module: import { RouterModule } from '@angular/router'; import { BrowserModule } from '@angul ...

javascriptangular

Adjust the width of the inline textarea using HTML and CSS to match that of the input field

Is it possible to create an inline textarea element using CSS that is selectable but still seamlessly integrated into a sentence without specifying the number of columns? Here's an example with a static number of characters (cols="11"): <p>To r ...

javascripthtmlcss

Transforming Excel data into JSON format using ReactJS

Currently, I am in the process of converting an imported Excel file to JSON within ReactJS. While attempting to achieve this task, I have encountered some challenges using the npm XLSX package to convert the Excel data into the required JSON format. Any as ...

javascriptreactjsjsontypescriptxlsx