Using Firebase Analytics with the Firebase SDK

[LProbert]

I know there's a Google Analytics plugin for sending tags, but I am using Google Firebase for hosting and analytics so the SDK instructions are a little different.

I have edited my HTML template so it loads the Firebase SDK and initialises the app and in my skin I have added some Javascript on the hotspot `MouseClick` action to fire off the Analytics Custom Event code. This code is documented as being like this:
```
javascript: firebase.analytics().logEvent('hotspot', { name: '$(hu)'});
```
I am trying to use the `$(hu)` to assign the value of the hotspot URL to my analytics log, but it is just storing the string `$(hu)` ... it's not unwrapping the variable in my javascript.

analytics_skin_bug.jpg (323.37 KiB) Viewed 7849 times

[LProbert]

I think i know the answer to this. I have to use the javascript SDK but how to get the current hotspot and then it's properties?

[Neal]

In the Javascript try this:

Code: Select all

let nodeID = pano.Qa;     //ID of the node as string
let nodeTitle = pano.Vh[nodeID].title.;  //Title for the node

[LProbert]

This is to get the node title and not the hotspot that is clicked. is that right?

[Neal]

That is for the node currently displaying.

[LProbert]

Ahh ok. Thanks for that. For the Hotspot details I needed to do this:

`javascript: firebase.analytics().logEvent('hotspot', { name: me.hotspot.title});`

[Neal]

What is the advantage of recording the value of a hotspot versus what is actually showing? The hotspot may or may not be clicked on.

[LProbert]

This code is triggered when a user clicks on any hotspot. It logs the title to record interaction by the user. There are multiple types of hotspot including tour nodes, web popups etc.

[LProbert]

any idea why this one doesn't work:

Code: Select all

javascript: firebase.analytics().logEvent('pano_view', { name: parent.pano.getNodeTitle(parent.pano.getCurrentNode())});

It logs the event but no `name` property is recorded.

Code: Select all

me.node.title

perhaps?

[Neal]

You can use the console in devTools to determine what Pano2VR exposes. That will allow you to see which variable you want to use.

[LProbert]

I'm still trying to find a way to get the current node title from a `nodeChange` event in the skin. This code:

Code: Select all

javascript: firebase.analytics().logEvent('pano_view', { name: pano.getNodeTitle(pano.getCurrentNode())});

doesn't work and I can't see that there's a placeholder tag for the current node, which is weird.

[Neal]

The titles for the nodes can be found at: pano.Vh[nodeID].title. You can also find most of the information for all the nodes in Vh[nodeID].

If you are using an "onClick" method, I think that occurs before the node change event. So you might have to get the nodeID from the hotspot and use that to get the title. The ID for the node displayed can be found at pano.Qa.

Hope that helps.

[LProbert]

I have this javascript:

Code: Select all

javascript: "";
let nodeID = parent.pano.Qa; 
firebase.analytics().logEvent('pano_view', { name: parent.pano.Vh[nodeID].title});

On a `node change` event in my skin. The event is being triggered off an empty container in my skin called `app_controller` ... the error in the console is:

Code: Select all

TypeError: Cannot read property 'title' of undefined
    at HTMLDivElement.me._app_controller.ggNodeChange (skin.js:9835)
    at pano2vrSkin.callNodeChange (skin.js:115)
    at skin.js:124
    at c.L (pano2vr_player.js:285)
    at c.jd (pano2vr_player.js:505)
    at HTMLDivElement.SkinCloner_thumbnail_cloner_Class.me._thumbnail_active.onclick (skin.js:17600)

Have tried with `parent.pano` as well as just `pano` ... will try `player` next.

[LProbert]

Looking at the console and it looks like `pano` does give me the node ID, but `pano.vh` is just an empty array.

[LProbert]

pano.$h works