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 – Vamsi Krishna Gosu Jun 18 '15 at 2:21
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 '15 at 6:22
  • Could you please share the code where this is being referenced ? – Mohith Shrivastava Jun 18 '15 at 9:26
  • @ Mohith, I updated issue description. – Natallia Jun 21 '15 at 22:55
  • @natallia did you ever find a solution? I want to do the same thing – Steve Buikhuizen Jul 21 '15 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 '15 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.