paulmwatson / rails-google-analytics-csp-turbolinks

A demonstration of adding Google Analytics to a Ruby on Rails 6 app that is using Content Security Protection and Turbolinks.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Ruby on Rails 6 with Google Analytics, Content Security Protection, and Turbolinks

A demonstration of adding Google Analytics to a Ruby on Rails 6 app that is using Content Security Protection and Turbolinks.

Screenshot of Google Analytics

Key points

In config/initializers/content_security_policy.rb secure your site to only load scripts from known sources. Rails defaults to :self, :https which would allow any script from any site (bad guys use https too):

...
policy.script_src :self, 
                  'https://www.googletagmanager.com', 
                  'https://www.google-analytics.com'
...

Use the turbolinks:load event to send page visits to Google Analytics. It will still capture the initial load that is not over XHR. Note the cookie_flags set to secure;samesite=none:

...
const trackGoogleAnalytics = (event) => {
  window.gtag('config', 'GA_MEASUREMENT_ID', {
    'cookie_flags': 'max-age=7200;secure;samesite=none'
  })
}

document.addEventListener('turbolinks:load', trackGoogleAnalytics)
...

Our CSP does not allow for inline script blocks so you want to put your Google Analytics code in its own file and include it. Keep your Google Analytics Javascript out of Webpack compiled packs. e.g. app/assets/javascript/analytics.js and not app/javascripts/analytics.js:

<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<%= javascript_include_tag 'analytics', async: true %>

Don't forget to update app/assets/config/manifest.js:

...
//= link analytics.js
..

You can view a demo of this and read an article about it:

Screenshot

About

A demonstration of adding Google Analytics to a Ruby on Rails 6 app that is using Content Security Protection and Turbolinks.


Languages

Language:Ruby 74.8%Language:HTML 14.0%Language:JavaScript 9.2%Language:CSS 2.0%