[SOLVED] How/Where to add Google Analytics to a PlayCanvas game?

[yaustar]

Which part is not working/that you are having trouble with?

[Arttech17]

Greetings,

Everything man, I cannot receive events on Google Analytics despite the analytics.js appearing on Network tab (Ctrl+Shift+I). I tried:

1 - Creating putting the gtag async script in the header part of the HTML file within Playcanvas
2 - Loading the analytics.js directly form google using the external scripts link in the setting menu
3 - Extracting the raw analytics js from google and importing into playcanvas so it loads when the experience loads

May someone please provide the steps one has taken in order for it work? Maybe have a sample project? THis is something that would be very useful for users and the developer community.

Thanks a lot!

BTW this is my project:
https://playcanv.as/p/GA1FS0lG/

[yaustar]

This is what I have done and the event comes through for me in the dashboard: https://playcanvas.com/editor/scene/855834

[Arttech17]

My friend, you’re a god! After that I was able to add the following to enhance data collection:

ga('send', {
  hitType: 'event',
  eventCategory: 'WebAR',   //Type of application
  eventAction: 'THC08',  //Floorplan
  eventLabel: '1.8.4.2'   //Version
});
ga(function(tracker) {
  var clientId = tracker.get('clientId');   //Very important!!!
});

THANK YOU SO MUCH!

[Travis]

This thread was very helpful to me, but I wanted to add some info for anyone looking to use gtag.js instead of ga.js. It’s also pretty simple.

Using the info from this link: https://developers.google.com/analytics/devguides/collection/gtagjs

Just add the async script with your own analytics ID to your External Scripts listing:
https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID

Then create a new script, I called mine gtag.js, and remove all the PlayCanvas boiler plate code. Just add the next four lines provided at the link:

  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'GA_MEASUREMENT_ID');

Seems to work well when I go and at a gtag call to any useful spot in my project.

[Leonidas]

Thanks @Travis for sharing it!

[fleity]

I tried following both approaches in this thread but couldn’t get anything to work.

I created a property in my google analytics account. Set a name, set the default url (points to launch.playcanvas.com/projectId), set the industry category, clicked save.

I forked yaustar’s project in order to test it. replaced the code in ga.js with my property’s tracking id and hoped a pageview hit would show up. But it doesn’t.
From the dev tools console I can tell that the “ga” object is not defined. Copy pasting the code into the console creates the ga object and corresponding script tag which loads analytics.js.
After that I can issue the calls to ga without any errors. However no hits show up.

I tried setting up gtag as well based on Travis’s explanation too, but nothing happens that way either.

https://playcanvas.com/project/723238/overview/test-google-analytics
What am I doing wrong?

[yaustar]

I am looking at the test project and don’t see any errors in console.

Can you add your usage example to debug please?

[fleity]

huh okay, so this is kind of weird but when I think about it it might just makes sense xD

The 1 user in the middle of the graph is you. The two right now on the right are me in 2 seperate google chrome tabs. The fact that they are chrome tabs is very important. My default browser is Brave… guess what is blocked by Brave … the browser which advertises specifically with privacy … of course! Google Analytics does track Brave.
The only weird part is that I don’t even see my console.log() before ga(‘create’ in brave. The entire file is blocked.

Thanks for helping and sorry for wasting your time

[Mal_Duffin]

Has anyone tried integrating the new Google Analytics 4 tracking into their PlayCanvas project?

[clayton12321]

Hi, I am trying to do the same thing you did here and am having trouble with the last sentence you stated. How do I make a gtag call somewhere in my project where it will be activated? Previously in JS, I have used import/export to call functions outside of their own script but I understand this doesn’t work in PlayCanvas as it is an ES6 feature. How/where did you make your gtag call?

Thank you so much for the help!

[yaustar]

Assuming that you’ve added the gtag script via External Scripts

You can add the gtag call to any script file, any where. It can be in a separate script in global scope or it can be in a initialise function of pc.script (as long as it is called once).

[Dan_Shimmyo]

Hi, this is the method I used and it works great! (Referring to the gtag method in case it isn’t clear in this thread) But can you elaborate on what you mean by “gtag call to any useful spot in my project”? I’d like to create some kind of event during a particular button-push but I can’t figure out how to implement this. Thanks!

[Dan_Shimmyo]

Hi, I think I figured it out. Isn’t it awesome when you can answer your own question a minute after you’ve posted it for the world to see? I added an event using this:
gtag(‘event’, ‘urlClick’);
which registers as an “urlClick” in google analytics.

[Ezra_Szanton]

Sorry to necro an old thread, I’m trying to implement google analytics and I wanted to know if this sample project is still the recommended approach? If so, should I replace the UA-XXXXXXX-1 ID with my G-XXXXXXXX ID? Is there anything else I need to do besides create the script and put it in my project? I tried that and it didn’t seem to work. I’m very new to using these analytics tools so sorry if this is an ignorant question.

Thanks!

[yaustar]

Sounds like you are using a different analytics version if your code starts with G What happened to my Tracking ID? - Analytics Help

[Ezra_Szanton]

That worked, thank you!

[Yani]

I have the same problem ho did you resolved?
Please let me know.
Thanks!