4

I am getting the error:

Refused to load the script 'https://www.google-analytics.com/analytics.js' because it violates the following Content Security Policy directive:

It is expected behavior according to the documentation:

The framework uses Content Security Policy (CSP) to control the source of content that can be loaded on a page

Are there any workarounds to apply google analytics to lightning app?

Up:

Here is the code to include the tracking code:

    <ltng:require scripts="/resource/styles/js/jquery.min.2.1.4.js,
                       /resource/styles/js/google.analytics.js"
              styles="/resource/styles/css/bootstrap.min.css"/>

and here is the google analytics tracking code which is placed in the google.analytics.js:

    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-XXXX-Y', 'auto', {
        'allowLinker': true
    });
    ga('require', 'linkid', 'linkid.js');
    ga('require', 'linker');
    ga('linker:autoLink', [/instance(\.|--)(.)*\.(salesforce|force)\.com/]);
    ga('send', 'pageview');

The problem is that inclusion of //www.google-analytics.com/analytics.js fails due to CSP.

1
  • can you share the code on how you are referring the scripts in your component or app Jun 18, 2015 at 2:21

2 Answers 2

4

This is as per the security policies .Any JS code or external libraries need to be in static resource .

you will need to use ltng:require tag for same .

Please see below blog

https://developer.salesforce.com/blogs/developer-relations/2015/05/loading-external-js-css-libraries-lightning-components.html

The below shows how to load files from static resource to lightning component

 <ltng:require 
 styles="/resource/path/to/css1[,/resource/path/to/css2]" 
 scripts='/resource//path/to/js1.js,[/resource//path/to/js2.js]' 
 afterScriptsLoaded="{!c.controllerFunction}" 
 />
6
  • @ Mohith, Thanks for your response. google tracking code is in static resources and included through require but tracking code js tries to include extrenal google-analytics.com/analytics.js itself and lightning doesn't allow to load this analytics.js
    – Natallia
    Jun 18, 2015 at 6:22
  • Could you please share the code where this is being referenced ? Jun 18, 2015 at 9:26
  • @ Mohith, I updated issue description.
    – Natallia
    Jun 21, 2015 at 22:55
  • @natallia did you ever find a solution? I want to do the same thing Jul 21, 2015 at 0:16
  • I need to do the same thing. I found a post in Success that said a patch was released for this to work. Check out the last 2 comments in this post: success.salesforce.com/_ui/core/chatter/groups/….
    – Allen Mann
    Nov 12, 2015 at 1:07
4

So I just got a test event working!

I included the analytics.js file as a static resource, and in the connection code that google provides, I updated it to use that static resource as well:

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','/resource/ga','ga');

My resource is called simply ga.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .