Google Analytics in Story Maps and information on actual locations

[kmsmikrud]

Hi,

I do see there is "Adding Google Analytics to your Story Maps" story on the Story Maps Developer's Corner and I talked with our web person here at work. We are currently working with the Shortlist Story Map template and is it possible to get statistics on the actual locations within the shortlist to know which ones are viewed relative to the other locations?

We are currently planning to put the story map within the iframe with our agency wrapper around it so I was looking at the Google Analytic statistics that the web team here normally use and they didn't think it was possible since the Story Map url doesn't change when you click between tabs or to different locations.

I was hoping someone might be able to provide this info whether it was or wasn't possible.

Thanks so much!

Kathy

[Raul_Jimenez]

Hi Kathy Smikrud‌, I know how to do that but not using the template hosted on ArcGIS Online.

I could help you doing so, adding some custom code to the existing template on Github, but afterwards you would have to add it to your organization (are you using ArcGIS Online or Portal). This way you would have to host it by your own or if you don't mind I could hosting it on Github for you.

Would that work for you?

Cheers!

[kmsmikrud]

Hi raul.jimenezesri-es-esridist‌,

We downloaded the 'ready-to-deploy' app and have added a splash page and customized the header and have that code hosted on our department server. Would I be able to customize this code or would it have to be the full source code from GitHub? As it works right now we just have the .html file linked with the appid on ArcGIS Online.

I so appreciate your willingness to help with this!

Thanks,

Kathy

[Raul_Jimenez]

Aha, great, if you have already downloaded the 'ready-to-deploy' app you only would need:

1. Add your Google Analytics code to the template as explained in the article 
2. Bind the storymap events to a method using the 'ga.send()' function from Google Analytics to each individual event you want to track. To do so:
   1. Edit the custom-scripts.js file
   2. Track events "story-whatever-event". I have checked and I found three events implemented in the core/viewer:
      1. story-update-entries
      2. story-tab-navigation
      3. story-perform-action-media

I guess you would need to use the "story-tab-navigation" event, something like:

topic.subscribe("story-tab-navigation", function(index){
     console.log(`Index = ${index}`);
     var data = {
          hitType: 'event',
          eventCategory: 'section',
          eventAction: 'story-tab-navigation',
          eventLabel: strip(app.data.getStory()[index].title).trim()
     };
     console.log('Sending data to GA: ', data);
     ga('send', data);
});

topic.subscribe("story-update-entries", function(arg){
     debugger
});

topic.subscribe("story-perform-action-media", function(arg){
     debugger
})‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍;‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

But for some reason it is not working to me (but it worked with the StoryMap Journal), I have opened an issue on Github and let see if mcooney-esristaff ‌ can help us with this.

Cheers!

[Raul_Jimenez · Accepted solution]

Hi Kathy Smikrud‌, I have already talked to Mark Cooney using the GitHub issues and finally I have made a fork of the original repo and added some changes to help you with this.

So now you can download a new deployable version here, you just need to:

1. Add your GA code in the index.html
2. Check the custom-scripts.js file and decide if you want to track something different

On this screenshot you will see it is already tracking:

I hope this is helpful to you.

Cheers!

[kmsmikrud]

Hi Raúl Jiménez Ortega!, Thanks so much for all your help with the changes to the code to better track the navigation in Google Analytics. I'm going to try and make these changes as you suggested and use your new deployable version. Hopefully I can do this I'm not very savy with javascript but you've given awesome directions! This is probably getting too much into the weeds but are the individual locations within a tab referenced similar to the 'story-tab-navigation' you've added or would that amount to specifying each location somehow? I just thought I would ask while I had your ear.

Thanks so much for such prompt response and Mark Cooney your help also!! 

Kathy

[JoshuaCarver-Brown1]

Hi Raul, I've tried implementing your changes into a different StoryMap Series. I'm absolutely new with JS and hence the following question. My StoryMap still works but unfortunately, I'm currently getting the following error "Uncaught SyntaxError: Unexpected token const" on custom-scripts.js. Could this because I'm trying to implement into a different template or might this be caused by something different all together?

Thanks,

Josh

[Raul_Jimenez]

Hi Joshua, mmmm it sounds like a programming error. Do you have the application publicly available? That would be quite helpful to me in order to do some quick checkins

[kmsmikrud]

Hi,

You know we ran into a syntax error as well and I think it might just be the different symbol for single quotes in line 21 within the custom-scripts.js file....I've copied that line below. We changed those to single quotes to the regular and then it worked or that's what happened with us.

console.log(`Index = ${index}`);

I just thought I would share since I had forgotten about that.

Thanks,

Kathy

[kmsmikrud]

Hi Raúl Jiménez Ortega,

I just had a couple of follow up questions regarding the Google Analytics and the Story Maps we have deployed. I've checked to make sure our GA code is referenced at the bottom of the index.html. I also see the tab change in the custom script.js (although I didn't modify anything) and now I'm wondering where in the Google Analytics site we might be able to see/track those tab changes. Currently under pages tracked we can see the Story Map links as a whole.

Here is an example of one of the Story Maps for Prince of Wales, would the Story Map being placed in an iframe not allow Google Analytics to track the tab changes with the additional code in the fork you created or I'm wondering if I don't have something set correctly.

Thanks!

Kathy