Trouble with Google Tag Manager inside a PlayCanvas scene

Help & Support
#1

Hey everyone,

I was asked to implement the Google Tag Manager (GTM) into my Playcanvas scene to track how long each video is played. I was able to make it work when you launch it from the editor: https://playcanvas.com/editor/scene/1211524
The dataLayer array gets filled with events every time you watch a video, see below.

image
image1920×991 411 KB

When I publish it, the same scene GTM no longer works: Extreme_E_Garage_v03_EN_GTM1 - PLAYCANVAS
Every time an event should be logged it is giving me this error:

Uncaught ReferenceError: dataLayer is not defined
    at HTMLVideoElement.onplay

image
image1920×991 325 KB

What I’m doing wrong? All relevant GTM code is in ui.js and loadingscreen.js.

Thanks
Martin

#2

Hi @MSulzer,

Initially I thought running the build on an iframe may create a conflict with the GTM, but adding /e/ to run it like that produces the same error.

Not sure why there is that difference, dataLayer when inspected in the console is populated with a different data set when running on a build:

image
image955×247 13.3 KB

@yaustar any idea?

#3

Hi @Leonidas ,

thanks for having a look at it. Maybe I don’t need any fix for that:
I just realized since the scene will be embedded via iframe and then GTM would not work anyway. Since iframes can not access JS variables of the parent website.

My new GTM approach would be:
A) fire events in PlayCanvas
B) push the event into the dataLayer in the parent website via postmessage.

Will let you know how it goes. It is still a little mysterious why the GTM code works in the editor but not when published.

Thanks
Martin

1 Like
#4

It worked as intended, I used the code from Communication with web page, iframe to parent - #2 by Abneto

Thanks @ Abneto

2 Likes