Skip to content
  • Home
  • Developers
  • API
  • Releases
  • Community
  • University
  • Status
  • Home
  • Developers
  • API
  • Releases
  • Community
  • University
  • Status
Home Data Types Snapshots Capture Name of Item When Item is Clicked (Multiple Events on Page) via Snapshots
Getting Started Session Replay Data Management Data Types Charts Chart Examples Dashboard Templates Analysis Guides Administration Integrations Heap Connect Data Privacy

Table of Contents

Was this article helpful?

Yes No

Thank you for your feedback!

Capture Name of Item When Item is Clicked (Multiple Events on Page) via Snapshots

This doc is for: Admins Architects

First time setting up a Snapshot? See our Snapshots overview guide for guidance on how to set these up.

You can use a Text in Element Snapshot to capture data, such as the size of an item when it is clicked, as an event property on an event.

The previous example demonstrates how to define a Snapshot for a single element on the page; what if there are multiple elements on the page that can trigger the event all with their own elements we want to capture as Snapshots?

In this example, there are multiple elements that can trigger our Click on Item event, and we want to capture the name of the item that’s clicked as a Snapshot. To capture the item names as a Snapshot, simply use the Snapshot selector tool (1) and select one of the item names (2). 

Heap will automatically detect that the item name is associated with the closest event; once the event is saved, whenever a user clicks on an item, Heap will traverse the page to capture the corresponding item name as a Snapshot property.

This new Snapshot will show up on the event details page, and be available for you to group by in analysis.

A graph of count click - add to cart grouped by product name

eCommerce event examples

Below are examples of events you may want to create based on your business needs. You should be able to create these events from your autocaptured data, or you can use the APIs mentioned in Step 1 of the Getting Started guide.

EventDescriptionCommon Definition Structure
Submit – SearchWhen a user submits a string in a product search barSubmit on .search-form
View – Product Category PageWhen a user views a product category pageView page *
Add filters for all product category paths
View – Product PageWhen a user views a product landing pageView page * 
Add filters for all product page paths
View – Product ReviewsWhen a user views a product review pageView page *
Add filters for all product review page paths
Click – Add to CartWhen a user clicks ‘add to cart’Click on .add-to-cart-button
View – CartWhen a user views the checkout pageView page /cart
Click – Remove From CartWhen a user clicks ‘remove item from cart’Click on .remove-from-cart-button
Click – Apply Promo CodeWhen a user successfully enters a promo code and the promo code is successfully applied to the cartClick on .apply-promo-code-button
Click – Checkout (Start)When a user clicks ‘start checkout’Click on .checkout-button
Click – Place OrderWhen a user clicks the button to place/submit their order (this does NOT include payment confirmation of the order)Click on .place-order
View – Marketing PageWhen a user views a marketing page, like a ‘why [your product]’ pageView page /why-heap/*
View – Blog PostWhen a user views a blog postView page /blog/*
View – Landing PageWhen a user views a landing pageView page /
Optional: filter by domain (ex. ‘Domain equals learn.heap.io’)
Click – Call to ActionWhen a user clicks a marketing CTAClick on .free-trial-signup-button
Submit – Product ScoreWhen a user submits a product score reviewSubmit on .product-score
Completed Order [Custom event via API]When a user completes ‘purchase from cart’ and the payment processor returns a successSource set to ‘custom’ with the custom event defined via a Heap API selected, ex. ‘Complete Purchase’
Account Created [Custom event via API]When a user successfully signs up for an account and gets a unique userIDSource set to ‘custom’ with the custom event defined via a Heap API selected, ex. ‘Account Created’

Was this article helpful?

Yes No

Thank you for your feedback!

Last updated July 28, 2023.

snapshots
  • Blog
  • Partners
  • Legal
  • Security
  • Terms
  • About
  • Careers
  • Privacy
  • Contact Us

© 2023 Heap, Inc.