I was trying to find some resources online for using Google Analytics' event tracking functionality in a Backbone application, and the only one that I was able to find was a blog post from airbnb, which uses CoffeeScript. Does anyone know of any resources for a regular javascript Backbone app? I have not used the event tracking functionality before, so basic resources are appreciated ...
Thank you!
You can just push events into the queue whenever is appropriate.
So, for example, we have a single paged app, for which we want to track page views, although we're never reloading the page.
To achieve this goal, we attach on all of our router events a listener which pushes each new page view into the _gaq stack. (This is greatly simplified.)
router.on("route", function(page) {
_gaq.push(['_trackPageview', page]);
});
This will push the page argument into the Google Analytics tracking stack. Just make sure that you've set up Google Analytics prior to this call.
For events, for example, we sometimes want to track a button being pushed. Therefore, we just make a _trackEvent push into the queue with the object containing the details of what we're pushing.
Instead of putting a ton of _gaq.push code on your page, I would recommend you to make a function available throughout your app that abstracts this functionality, such as:
var track = function(event, payload){
_gaq.push[event, payload];
};
This will isolate you from changes to the Analytics API, as well as allow you to add other reporting locations to your tracking events easily.
Related
I have in my .env fiel the field
REACT_APP_MEASUREMENT_ID=G-XXXXXXXX
I am using react-gtm-module and Google Tag Manager 4 (and still also Universal analytics) and I initialize in my App.js:
useEffect(() => {
TagManager.initialize({ gtmId: 'GTM-XXXXXX' });
analytics.logEvent('screen_view', {
firebase_screen: 'Home',
firebase_screen_class: 'MainPage',
})
}, [analytics])
However, the analytics object comes from firebase.analytics(app) that I initialized in the firebase.js file... has that analytics object from fire/analytics anything to do with the google tag manager or the datalayer object, or with google analytics at all or is that something different?
I am using that analytics object in my components just as the datalayer object, and it also gives me the same kind ob datalayer object in google tagassistant, e.g:
setGameFinished(gameFinished => (gameFinished = true))
analytics.logEvent('game_finished', {
score: `${correctAnswerCount} of ${quizData.length}`,
})
gives me dataLayer.push({event: "game_finished", eventModel: {score: "2 of 4", send_to: ""}, gtm.uniqueEventId: 23}) in google analytics tagassistant (debug window).
But is it the same? I think I might have messed something up there ;). Can someone explain me the difference?
Difference between Firebase and GTM? First of all, Firebase is an SDK. To be used in native apps. JS-driven apps (except react native, I believe) are supposed to use gtag.js. Gtag is a way to track data directly to GA4. And for Universal analytics, they use the analytics.js lib.
So, again:
Firebase SDK was meant to track apps and that data goes to the Firebase service. Soon after introducing firebase, Google realized it wasn't a very comfortable thing to use, so they rolled out GA4 with a very similar to Firebase data model, and since the data model is so close, they made it easy to sync Firebase instance with a GA4 instance. Also, they decided not to bother with a new SDK for the native apps and went with firebase for ga4.
Google Analytics (a slightly different thing from firebase) has had its history of bad architectures as well, but now we have two analytics libraries, analytics.js that is meant to be deprecated in a year or so with Universal Analytics and ga4 that is meant to replace it despite all the bugs it brings. Ga4 uses the gtag.js lib. But that's only for web. This will only work in apps that allow unsecure external scripts execution, so, like, browsers. Electron-driven apps, too.
Firebase SDK allows you to send events directly to your Firebase endpoint and that makes the data available for analysis or further ETL.
Now, GTM, unlike the other libs, is not meant to just send the payloads to the endpoint. It's meant to add a middle man. Basically, GTM deploys a collection of user logic, so in GTM users can grab whatever you're pushing in the dataLayer array, rearrange it, change it and send it to wherever. And wherever can be anything, it can be ga4, can be ga ua, can be facebook or any other endpoint. GTM, as any other tag management system ultimately executes custom javascript on pages where it's loaded.
There's also GTM for native apps. And that thing is largely useless. It can't really do anything and requires being loaded on every build. It also loses the ability to execute code, so no hotfixing or independent tracking implementation is not possible. Honestly, mobile GTM is about as helpful as the GTM loaded within the no script tag. Native GTM does not provide enough use to justify the spread of business logic and added dependency. It was made just so that Google could claim that it's cross-platform. Same about the no-script: just for the company to be able to claim that it doesn't depend on JS completely.
Good, now that we're done with the context of what's happening, if you're using react for front-end, then you don't need anything except GTM. GTM is able to load all the libraries it needs for tracking without your intervention and send events as needed, but someone needs to build logic in GTM for whatever is being pushed to the DL. You don't need firebase, having GTM (dataLayer) as the only touchpoint between analytics and front-end is the best practice.
If you're doing react native for a native app, then it's the opposite - you likely don't need GTM. But sync with your implementation specialists or whoever owns the GTM account in the company.
We've implemented Tealium throughout our site, including some newer, single page app (SPA) content. Our devs are new to Tealium, so we're all kind of building the car as we drive it.
I've read Tealium's docs on both single page apps and the standard order of operations. What I don't fully understand is when vendor tags fire on SPA sections. For example, when I first land on a SPA page, I see the HTTP requests indicating the tags have fired (We haven't disabled the initial page view event yet). But as I navigate around that app, triggering the manual link/view events that the devs implemented in the site code, I see those events being logged but the HTTP requests from vendor tags are inconsistent or not-existent. For example, we have a Google Ads tag that appears to fire with each of these events, but we also have Microsoft Ads tag that does not, despite both tags' Load Rules being configured to load on all pages.
Can anyone confirm whether utag.view() and utag.link() fire vendor tags when called? If I'm misunderstanding a piece of the implementation, I'd be grateful for a clarification. Thank you :)
As a general rule, Tealium knows nothing about your app's events. Like most tag managers, it'll default to firing off a utag.view() indicating a new pageview once the page has loaded, but in an SPA app, that happens once and it's got no hook into your router to understand future navigations.
Rather, it's on you to instrument your SPA and augment the router so that when a new route is successfully rendered, you call a utag.view() and when other actions occur that you want to track, you make the appropriate utag.link() calls as Tealium will not do this for you.
I have used react-gtm-module to implement Universal Analytics tracking on a multi-page React application/website.
The data is coming through to Google Analytics, but the data layer is not and I'm hoping someone can help me identify why.
GTM Preview mode
I can see that when the container is loaded, all of the data layer values are set to the default value of 'Unknown'. This is what is passed through to Google Analytics.
However, when the Window is loaded, the data layer is populated with values. This is not being sent through to Google Analytics.
How do I push the data layer through to Google Analytics at the correct moment, once the data is available?
Many thanks,
Katie
Hi since you mention that you are using react-gtm-module there were different method to add data layer in your code. you need to read this https://www.npmjs.com/package/react-gtm-module#datalayer.
i have used it.
i will give you example for it.
if you want to add data layer on specific click event.
first you need to write datalayer code in you web app.like this
follow for add data in data layer
second step is to verify you data is push to your data layer or not.
for that got to your browser console and write datalayer.
then it's big data set you need to find your event name and check in there your
data is there or not.
also you need to make variables according your data.follow step 2 to do this step.
in this you need to verify it on your preview mode of GTM. after if you want to access that data in GA you need to make custom event trigger in GTM and add it in your Event tag you also need to add event parameters in event tag.
for access data in GA you can follow this video alsofollow for how to get data in GA
Note : for data layer push you have only this solution what i share. because you use that react-gtm-module.
The values are only sent to Google Analytics when there is a 'hit' to be sent. A datalayer.push (when you insert values into the datalyer) is not considered a hit, thus no data will be available.
You have some options here.
The best scenario would be to insert the values into the datalayer before the GTM is even loaded on the website. That would guarantee that all your hits would have the data available, and you would not need to delay any hits.
If that is not possible, you can also change your datalayer.push implementation to include an 'event' parameter, and then use that as a condition on the Google Analytics tag. Something like this:
dataLayer.push({
'event': 'dataLayerLoaded',
'environment': env,
'isAdminUser': isAdmin,
...
})
You can then create an event trigger that fires on the event 'dataLayerLoaded', and use this trigger on the Google Analytics Page View tag instead of the normal 'page view' one.
If you choose to follow this last route, be aware that this event will need to fire every time, otherwise no data will be sent at all. Also, if you have any custom events implemented, you may have to change their logic you use to take into consideration this new approach.
EDIT: It is also possible to change your Google Analytics Page View Trigger to "Window Loaded", but you'll need to be sure that the datalayer will always load before that, otherwise you will lose information.
I have an angularjs1.5 app and it is using ui-router for state change.Recently, I got the requirement to implement google analytics in our app. I never worked on google analytics before.So, I started doing some research.so far, I bottom down to two points.
Analytics.js -> use analytics.js and use $stateChangeSuccess on $rootScope to track the ui state change. This is simple and straight forward. it tracks any state change in the app and sends tracking data.
angulartics -> This directive can be used to track state changes/ event changes or any dom changes. Looks like, the implementation is not that simple.I am not sure if this works with ui-router.
my thought here is if only state changes need to be tracked then I should go with option 1 and if state/events level changes need to be tracked then should go for option 2.
Could you pls let me know if I am on track or am i missing something here? it would be great if you could point me to any sample implementation on both approaches.
Thanks a lot in advance !!!
What is the best approach to implement Mixpanel analytics for tracking share plugins.
Tracking third-party social network share plugins need a complex soultion and is possible if the social network API supports callbacks. Then you can catch them on your website and fire tracking events. That is the best and the most accurate method.
On the other side - if you use your own Share buttons - there are a lot of possibilities.
For Facebook - check this solution:
Facebook like and share button with callback
In function(response) you need to call Segment TRACK method.
Another solution I used in addition to the provider's callbacks when working with tracking iframes/javascript social widgets was:
https://github.com/finalclap/iframeTracker-jquery
pretty darn simple and nifty if you ask me!
jQuery(document).ready(function($){
$('.iframe_wrap iframe').iframeTracker({
blurCallback: function(){
// Do something when the iframe is clicked (like firing an XHR request)
}
});
});