Capture ga() function calls and re-route them through galite()

[jaskipper]

Thank you for all the hard work on this project. I am loving ga-lite!

I was wondering if there is a way to capture any ga() function calls (for example sending events) and route them through galite(). We've converted all of our internal ga('send', 'event'...) calls to galite('send', 'event'...), and these are working well. But we have a third party chatbot plugin installed that sends 'Bubble Clicked', 'Widget Closed' and 'Conversation Started' events to Google Analytics when using ga, but these events do not work when using ga-lite. This chatbot is inside of an iframe. Any ideas?

[jehna]

If you can add a script inside the iframe I think you could do something like:

window.ga = function() { galite.apply(galite, arguments) }

This should proxy all ga calls to galite.

I can double check when I'm on computer if that doesn't work 😄

[jaskipper]

Awesome! I'm trying to figure out how to add the script to the iFrame at the moment. I'll let you know how it turns out. That definitely works for ga calls outside of the iFrame. Thanks!

[jaskipper]

I'm having no luck with this. The code you gave me above works perfectly in the main window, but I'm unable to get it to do anything in the iFrame. The iframe is being pieced together from their 3rd party script, which is minified, but pretty printing it, this is the code that I find in the script referring to GTM. It looks like if the source is 'https://www.googletagmanager.com/gtm.js', then use that, else break. Below is that code. Any guidance would be appreciated!

ge), be = K(["\nmutation track($userId: String!, $event: String!, $properties: [String]) {\n  track(userId: $userId, event: $event, properties: $properties) {\n    status\n  }\n}\n"]), we = {
                WEBSITE_WIDGET_CLOSE: "Widget Closed",
                WEBSITE_WIDGET_OPEN: "Bubble Clicked",
                WEBSITE_WIDGET_SENT: "Conversation Started"
            }, _e = "Webchat Widget", Se = null, Ce = function e(t) {
                var n = window[window.PodiumGTMDataLayerMapping] || window.dataLayer
                  , r = fe();
                if (n) {
                    var o = {
                        event: _e,
                        eventCategory: "podium",
                        eventAction: t,
                        eventLabel: "WIDGET-TOKEN:".concat(r)
                    };
                    n.push(o)
                } else if (!Se) {
                    var i = document.getElementsByTagName("script")
                      , a = "";
                    for (var u in i) {
                        var s = i[u];
                        if (R(s.src, "https://www.googletagmanager.com/gtm.js")) {
                            a = s.src;
                            break
                        }
                    }
                    if (a) {
                        var c = new URLSearchParams(a).get("l");
                        c ? (window.PodiumGTMDataLayerMapping = c,
                        e(t)) : Se = !0
                    } else
                        Se = !0
                }
            },
          xe = function(e) {
            var t = window.ga || window[window.GoogleAnalyticsObject],
              n = t && t.getAll && t.getAll();
            t ? I(n, (function(t) {
              return t.send("event", _e, e)
            })) : t ? t("send", "event", _e, e) : O((function() {
              return window._gaq.push
            })) && window._gaq.push(["_trackEvent", _e, e])
          },
          ke = function(e) {
            window.fbq && window.fbq("trackCustom", _e, e)
          },
          Ne = function(e) {
            window.pintrk && window.pintrk("track", "custom", {
              type: _e,
              event: e
            })
          },

[jehna]

Hmm. Depending on if the iframe's content security policy you might be able to inject stuff to it by using something like:

var myIframe = document.getElementById('my-iframe') // or some other way to target the third-party iframe
var doc = myIframe.contentWindow.document 

// Insert ga-lite
var galiteScript = doc.createElement("script")
galiteScript.src = "https://cdn.jsdelivr.net/npm/ga-lite@2/dist/ga-lite.min.js"
doc.body.appendChild(galiteScript)

// add ga-lite proxy
var script = doc.createElement("script")
script.innerHTML = 'window.ga = function() { galite.apply(galite, arguments) }'
doc.body.appendChild(script)

[jaskipper]

I appreciate it @jehna! Will try it out this evening and let you know.