Using snapshots to log changes in product status (ie. in stock, sold out, backordered)

  • 24 February 2022
  • 7 replies
  • 107 views

Userlevel 2
Badge +2

One of the challenges our team has been faced with as of late is logging changes in product status (ie. in stock, sold out, backordered) for when we need to reference certain points in time. Through Heap, we were able to set up snapshots to capture the statuses for when a user engages with a product on the product page. So now when needed, we can just look at that certain day and what the engagement/statuses were.

 


7 replies

Userlevel 5
Badge +4

do you mind sharing more detail on how you’re doing this?  I assume you’re just using some JS to capture the value of an element? Care sharing the actual markup on your page and the js snapshot code?

Userlevel 2
Badge +2

Hey Trevin! What we did was set up an element in our JS that is unique for Heap called “data-h” and with that we can then use the “to text in element” snapshot option to capture the value within that container. I’ve attached a screenshot as reference. 

 

Userlevel 5
Badge +4

Hey Trevin! What we did was set up an element in our JS that is unique for Heap called “data-h” and with that we can then use the “to text in element” snapshot option to capture the value within that container. I’ve attached a screenshot as reference. 

 

Just so I’m clear, your element would then look something like this?

 

<div data-h=”notification-box-list”>In Stock</div>

If so, I’ve found this can be problematic with mixing up data we show the user vs what we want for analytics.  so instead of the above, you might want to try something like this:

 

<div data-inventory-status="in-stock">In Stock</div>

While they are the same values, you can then support alternate display text (e.g. A/B testing etc) without mucking with your analytics stuff.  e.g.

<div data-inventory-status="in-stock">In Stock -- 5 left!</div>

In the second example, you’ll then have “In Stock” and ”In Stock -- 5 left!” appear as values which can get both annoying and introduce flexibility issues.

Then you can write snapshot code to capture the value of the data-inventory-status attribute instead of the element text.  

Badge +1

But this means changing the code… For many companies, not needed to this this is exactly the reason why they choose Heap. 

Isn’t there an elegant way around this? 

Userlevel 5
Badge +4

But this means changing the code… For many companies, not needed to this this is exactly the reason why they choose Heap. 

Isn’t there an elegant way around this? 

 

You’re right this requires a code change but I’d argue that for important properties like this, this is the best way to do it. It makes it more durable to future code changes provided your technical teams preserve that attribute (in this case the data attributes).

Also, My preference for this stuff is to use it like you described:

<div data-inventory-status="in-stock">In Stock</div>

This allows you to control the values shown in your analytics vs what you show to end users. They may not always be the same.

Badge +1

I agree with you. But having to have dev intervention with even basic properties kind of defies the idea of autotracking...

Userlevel 5
Badge +4

I agree with you. But having to have dev intervention with even basic properties kind of defies the idea of autotracking...

The larger point I’m making here may be lost 😀. To clarify:You 

  1.  You can certainly make heap work without any additional engineering work and do snapshots. However there are drawbacks to this including possible brittleness which will force you to do ongoing care and feeding to make sure nothing breaks 
  2. if you can get some development done, you can put in some basic best practices that allows heap to scale better. 

Reply