How to Add Maptiks Analytics to Esri Story Maps

What is a story map?

Essentially, a story map is a collection of maps, text, and other media content, all packaged within a single web application. Esri has provided several story map templates that you can use to get started. Just choose a template, configure it to use your ArcGIS Online maps, add your narrative text, and update any available styles to your liking. Each template has its own look and feel, and is intended to provide the final user with a specific experience.

How do you know if your story map is any good?

In general, a map, or collection of maps, should have a purpose; a story map is no different. Although there are many creative ways to use a story map, the most common purpose for a story map is (you guessed it!) to tell a story. Story map stories can cover a wide range of topics, but they often closely resemble a written story, starting with an introduction, progressing through content including maps, slides, and videos, until finally arriving at the conclusion.

alt

But, just like a written story, not all story maps are created equal. We suggest that the measure of story map quality is the level of user engagement, whether that means spending time on your maps, interacting with map content, or simply making it to the end of your story. If the purpose of your story map is to arrive at a conclusion, wouldn’t it be nice if you could see how many users made it to the end of your story? If they don’t see the ending, where do they drop off? Are your users taking the time to read your content? Do they interact with your map content? Are they leaving because your content takes too long to load? Is your story map engaging your users, at all?

Wouldn’t it be nice if you could answer these questions?

Maptiks can help!

Maptiks is designed to help web app developers measure map user engagement. Map interactions and general use characteristics are collected and accessed through a live dashboard, revealing such analytics as number, type, and location of map activities, map session duration and bounce rate, and map performance metrics. When Maptiks analytics are added to a story map, the analytics are split across individual maps, allowing detailed user engagement patterns to shine through.

Story maps: content and code

There are two basic components in a story map: the content and the code. The content includes the things that make your story unique: which web maps to display, what fonts to use, and what colour and style to make the visual elements, among many other choices. The code determines how the story map behaves: what happens when you click a button, when to fetch certain pieces of content, and, in this case, whether to collect and send map analytics to Maptiks!

If you want to use Maptiks on your story map, the way you include your content is the same as usual. You choose which template to use and then configure it in the “builder” - the interface where you choose your maps, text, and so on.

However, if you want to include Maptiks, you must use custom code. Of course, we happily provide the code for you. All you need to do is use our website address corresponding to the appropriate story map template, and add your application ID to the end. By doing so, you are saying, “use my content, but instead of ArcGIS Online code use Maptiks-enabled code.”

Less talk, more analytics!

Let’s go through an example. Suppose you’ve decided to make a story map using the journal template. As usual, create, style, and save your story map through the ArcGIS Online builder. Make sure you share the story map publicly.

Each item in ArcGIS Online has an ID; when you are on the item description page, this ID is found following “?id=“, when you are viewing the application or builder, the ID follows “?appid=“. This is called a query string, and it tells your code which content to load.

alt

Now, we need to connect the Maptiks-enabled code with your content. Back on the story map item page, go to the Settings tab. In the Web Mapping Application Settings section, change and save the Data Source URL to the following (make sure you use the appropriate template URL, more at the end), using your app ID:

https://templates.maptiks.com/MapJournal/index.html?appid=YOUR_APP_ID

You can load the app now and you’ll see that you are directed to our server. This is the new URL for your app. The app should function normally, but it’s not collecting Maptiks analytics quite yet - you need to configure your content to include a Maptiks track code and ID so we know where to put the results. On your app’s item page, click Configure App. Since we’ve already changed the app’s data source URL, you are redirected to the Maptiks-enabled version of the builder. Sign in and find the Maptiks section in the Settings (be aware that the Settings interface may appear differently depending on which template you are using). Enter your Maptiks track code for the “templates.maptiks.com" domain (set up through your Maptiks account), and an ID of your choice that will be used to organize your results. Save the app, and that’s it - you are ready to collect all sorts of map analytics to gauge your audience’s engagement in your story map!

alt

The end

So, I suppose this is the end of my story. I’ve told you about story maps, the benefits of map analytics, and how to add Maptiks to your story maps. Ironically, this blog doesn’t have access to any such analytics, so we have no way to know how many of you made it to the end, aside from your direct feedback. Please get in touch with us at the social media links below for more information about Maptiks, story maps, or any of our other integrations!

Template URLs and GitHub repos

Use the appropriate URL for your story map (the URLs below will only work with when you substitute in your app ID), or fork our GitHub repo to host your own version!

Cascade:
https://templates.maptiks.com/Cascade/index.html?appid=YOUR_CASCADE_TEMPLATE_APP_ID

https://github.com/sparkgeo/storymap-cascade

Journal:
https://templates.maptiks.com/MapJournal/index.html?appid=YOUR_JOURNAL_TEMPLATE_APP_ID

https://github.com/sparkgeo/storymap-journal

Series:
https://templates.maptiks.com/MapSeries/index.html?appid=YOUR_SERIES_TEMPLATE_APP_ID

https://github.com/sparkgeo/storymap-series

Shortlist:
https://templates.maptiks.com/Shortlist/index.html?appid=YOUR_SHORTLIST_TEMPLATE_APP_ID

https://github.com/sparkgeo/storymap-shortlist

Swipe:
https://templates.maptiks.com/Swipe/index.html?appid=YOUR_SWIPE_TEMPLATE_APP_ID

https://github.com/sparkgeo/storymap-swipe

Tour:
https://templates.maptiks.com/MapTour/index.html?appid=YOUR_TOUR_TEMPLATE_APP_ID

https://github.com/sparkgeo/storymap-tour

Basic:
The set-up for the basic template is quite different than for the other story map templates. If you are interested in enabling Maptiks on your basic story map, please contact us.