Adding Google Analytics to your classic Esri Story Maps
This article covers a topic related to the classic Esri Story Maps templates. Story authors are encouraged to use the current-generation ArcGIS StoryMaps to create stories. However, Esri will continue to maintain the classic templates for your use. For more information, see the Product road map.
Understanding the demographics of your audience is one of the most important pieces of information to you as a story map author. Knowing specific details can drastically change how you decide to tell your story and what key points to highlight to make sure your story has the greatest impact. Does your audience primarily speak the same language? Are most using a desktop computer or are many viewing your story on a smartphone? What third-party source or media agencies are linking to your story? These insights can be gained simply by including Google Analytics in your app. Besides this, you will also discover other information like how many people saw your story and how long they stayed on your site.
Essentials for Success
- Have access to a web server to host your customized story.
- Have a Google Analytics account.
- Create a Story Map using one of Esri’s Story Map apps.
Getting Started
We’ll be using the The Deepening Refugee Crisis Story Map which uses the Story Map Series template. Although I’m showing this with the Story Map Series template (tabbed, side accordion, and bulleted layouts), you can use the same steps with the Story Map Journal, Story Map, Story Map Swipe/Spyglass, or the Story Map Tour templates.
To begin, we’ll first need to download the source code. All of the Story Map apps are open source and available for download so you can use and customize as you wish. The source code for each app can be found by navigating to our apps page and clicking the “Learn More” button under the description for each app. About halfway down this page, you should see a link to “Download configurable app.” Unzip the contents of this download to a new folder on your server.
Next, you’ll need to get the application ID that is associated with the version of the app that is hosted on ArcGIS Online. All the content of your story will still be hosted on ArcGIS Online and you’ll still be able to use the online builder to edit your story. The application ID will link your hosted version with the customized version that is now on your server. This application ID can be found by looking at the URL of your hosted app. Just copy the alphanumeric code that comes after the “appid=” in the url (see example in bold below).
https://story.maps.arcgis.com/apps/MapSeries/index.html?appid=e93cf59405144cb9904327ebe3a305ddOnce you have this open the index.html file in your favorite text editor. Notepad works fine but I recommend using a text editor that has syntax highlighting to make it much easier to read. Notepad++ and Atom Editor are two free apps that work really well on both Mac and PC. Scroll down to configuration section and paste the application ID between the quotes of the appid variable.
At this point, if you open the app in your browser, you should have an exact duplicate of the app you created in ArcGIS Online except it will be hosted on your own server.
Get Your Google Tracking ID
Head over to the Google Analytics homepage and sign in with your Google Account associated with your organization analytics. If don’t have this set up yet, follow the instructions to set up your account to use Google Analytics.
- When you first log in, click the “Admin” tab in the top navigation bar.
- Then click on the “Tracking Info” button in the middle “Property” list.
- Next, click on the first item in the sub-list, “Tracking Code”
- Finally, copy the tracking ID for the next step.
Configure the App’s Tracking Code
On the Story Maps team, we constantly use Google Analytics to make sure we’re developing effective stories and to know what layouts are the most powerful and engaging before developing new templates. Because of this, we have already added the Google Analytics code but it will only run on our servers by default. The next steps will show you how to change out the tracking ID and make sure it will run on your servers.
The Google Analytics code can be found at the bottom of main-config.js file which is in the app folder from code you downloaded in the getting started section. When you have found this, replace our tracking ID with the one you just copied above. Make sure to keep the single quotes around your tracking ID (see screenshot below).
Next, you’ll need to comment out the two lines which make Google Analytics code run only when the app is hosted on our storymaps.esri.com servers. We can do this by adding two forward slashes “//” to the beginning of each line. In this example, it will be on line 115 and 125. If you are using a different app or in a future update just look for this line:
if (window.location.href.toLowerCase().indexOf(“storymaps.esri.com”) >= 0) {Then the second line will be the first line that has a single “}” after the the tracking ID.
That’s it! If you’ve been working off a test server, it’s now time to move your code over to your production server and share your story with the public.
If you’re new to Google Analytics, I recommend reading some tutorials or watching a few YouTube videos that will help you understand and sort through all the statistics your app is now collecting.
Here are a couple links to get you started:
Also, here another blog post about growing your audience by adding Open Graph tags to your story map for better social sharing.
