Tips and Tricks: How to Get the Most Out of Heap Snapshots

Heap’s Snapshots, or Custom Properties, give you the ability to capture additional metadata about actions that are occurring on your site. For example, if a user enters a search query, you might also want to know the actual search query they entered. If a user adds an item to their shopping cart, you might want to know the item name, star rating, and price of the added item.

Normally, you’d have to resort to custom tracking code to bring in additional properties. With Snapshots, however, you can snapshot relevant data from a page and attach them to events going forward. No need to write or ship code!

Snapshots are a great tool for capturing event properties and can even be used to call Heap APIs. Here are a few cool examples of what you can do with Snapshots. Reach out to our support@heapanalytics.com if you would like help setting up your own!

Use case #1: Screen Dimensions

Group by this property to make sure that your product looks good on all the most popular screen sizes. This is handy for both designers and product managers.

Name: Screen Dimensions Snapshot: window.screen.width + ' x ' + window.screen.height

Bonus use case: Get screen orientation! (On pageload — APIs for tracking orientation changes are not supported across all popular browsers). This is helpful for understanding how users are consuming your content—is your site optimized for landscape viewing? Most are not. This gives you the data to understand if it’s worth optimizing. With increasingly large mobile devices, this might become more useful over time.

Name: Screen orientation Snapshot: (function() { if(window.innerHeight > window.innerWidth){ return "Vertical" } else { return "Horizontal" } })();

Use case #2: Call APIs

Snapshots can call arbitrary JavaScript and this snippet adds your users’ most current timezone as a property. Create segments using this data and add them to your analysis to understand how well geographically targeted ads are performing.

Name: Add timezone as user property Snapshot: (function() { var tz = Intl.DateTimeFormat().resolvedOptions().timeZone; heap.addUserProperties({ "Timezone": tz }); })();

Bonus use case: On modern browsers, check how many of your customers have enabled your browser push notifications. You can do something similar for checking location permissions if your app depends on it. (This is only supported in select modern browsers.) If no one is allowing them, is it worth supporting? On the other hand, if you have great adoption but no one clicks on them, maybe your copy could use some work.

Name: Add push notification status as user property Snapshot: navigator.permissions.query({ name: 'notifications' }).then(function(result) { heap.addUserProperties({"Notifications Permission": result.state }); })

Use case #3: Capture From Your Data Layer

This example captures the logged in user state from a site using Tealium. Other common examples include page\_type, site\_section, or visitor\_type. Use this type of data for high level content analysis, or to understand how user state affects key behaviors. For example, do customers buy more if they can get through checkout quicker because they are logged in with their saved data?

Name: Logged In Snapshot: utag\_data.customer\_logged\_in

Use case #4: Analyze Image Types

Ecommerce customers often AB test their images. But how to know which type of photography converts best: a lifestyle action shot vs a standard product shot? This example captures name of the the image file when clicked. Assuming you have some semantic data in the title that denotes shot type, you can use this data with a Defined Property to analyze effectiveness of different types.

Name: Image Snapshot: $(event.target).attr('src').split('/').pop()

Use case #5: Capture Page Load Time

Due to DOM event timing, this can’t be added as an event property but you can write code similar to use case #2 and fire a track call with the property. See how page load time affects your key funnels by starting your analysis with this event and grouping by Load Time!

Name: Page load Snapshot: (function() { var interval = setInterval(sendTrack, 200); function sendTrack() { if (performance.timing.domComplete != 0){ var loadTime = (performance.timing.domComplete - performance.timing.navigationStart) / 1000; heap.track('Page Load', { 'Load Time': loadTime }); clearInterval(interval); } } })();

Note: Navigation timing events do not update after changes to the History API. The above method will not work on Single Page Applications.

Learn more details about what’s possible in Heap by checking out our documentation. You can also reach out to support@heapanalytics.com for more specific questions.