2

I want to add google analytics to my lightning app. How can I do it? I'm adding the following code in my component template and it's loading the library but Google Analytics is not receiving any data.

<aura:component isTemplate="true" extends="aura:template">
    <aura:set attribute="title" value="title" />
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async="async" src="https://www.googletagmanager.com/gtag/js?id=XX-XXXXXXX-X"></script>
    <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'XX-XXXXXXX-X'); //XX-XXXXXXX-X is my trackId
    </script>

</aura:component>

1 Answer 1

2

While you may be able to use a lightning:container to load a third party script (which you are trying to do), you can't normally do this in Lightning.

What I did was store the analytics as a static resource (I know google says don't do this but hey, tough)

Then afterScriptsLoaded you attach the analytics script to the SecureWindow and initialise it. Something like:

Scripts definition:

<ltng:require scripts="{!'/resource/analytics'}" afterScriptsLoaded="{!c.init}" />

Controller / helper init function:

init: function(component) {

    // store the name of the Analytics object
    window.GoogleAnalyticsObject = 'ga';
    // check whether the Analytics object is defined
    if (!('ga' in window)) {
        // define the Analytics object
        window.ga = function() {
            // add the tasks to the queue
            window.ga.q.push(arguments);
        };

        // create the queue
        window.ga.q = [];
    }
    // store the current timestamp
    window.ga.l = (new Date()).getTime();
    window.ga_debug = { trace: true };

    var trackingid = component.get("v.trackingid");
    var userdata = component.get("v.userdata");

    ga('create', trackingid, { 'userId': userdata.id, 'storage': 'none' });
    ga('send', 'pageview');

}

I also get user data before initialising analytics using a server side controller. For a full example, check my github here

6
  • Hi, I'm trying to follow your advice and want to confirm... is the analytics file you stored in static resource the following? google-analytics.com/analytics.js
    – AJ Tatum
    Sep 12, 2019 at 19:30
  • Hmmm I'm not sure actually - you'll have to do a compare. However it is the standard analytics js file that they use - you probably want to get a fresh copy from them as I'm sure it'll have changed in the interim. Sep 12, 2019 at 22:41
  • Just did a google search on some actual text in the script above and I can confirm: Yes, it's one these: google-analytics.com/analytics.js or google-analytics.com/analytics_debug.js Sep 12, 2019 at 22:43
  • I've tried both and and using the init script you have here. Would you mind looking at my question here: salesforce.stackexchange.com/questions/277976/… ? I would really appreciate your help!
    – AJ Tatum
    Sep 17, 2019 at 12:45
  • I'm still having some issues, do I set the trackingid somewhere? You're referencing component.get("v.trackingid") and I'm not sure where that's coming from. I've tried setting the tracking id directly but with no luck.
    – AJ Tatum
    Sep 24, 2019 at 13:37

You must log in to answer this question.

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