Solved

Creating a custom analytics event for 'pre-order' button

  • 8 July 2021
  • 4 replies
  • 485 views

Badge +2

Hey guys! 

This is a (potentially) weird one. 

As many of you may know, you can (quite easily) set up a much more detailed abandoned cart flow by adding the custom ‘addtocart’ event into your product.liquid code on the Shopify back-end, like this article outlines.

 

I’d like to do exactly that, but for my ‘pre-order’ button as well. About 90% of our stock is continually sold out and on pre-order for now, so this would be huge for us! 

When I reached out to Klaviyo support, they were great as always, but also offered me a solution that seemed far too convoluted to be the path of least resistance here. 

Is there any way to do basically the same thing I did with the addtocart snippet, ie: add some lines of code into the product.liquid, pull the details from inspecting the ‘pre-order’ button on my site, and then have that send as a custom ‘pre-order’ event? Or do I really have to do this whole new scary world of REST API’s and Postman and all this absolutely bewildering (to my simple mind) stuff :P 

 

Any help from the hive mind is so very much appreciated! 


With gratitude, 
Lukas 


co-founder - eevees.com

 

icon

Best answer by David To 8 July 2021, 17:44

View original

4 replies

Userlevel 7
Badge +60

Hello Lukas (@eevees.com),

Great question!

You should be able to leverage Klaviyo’s Track and Identify API to create this custom “pre-order” event, similar to Klaviyo’s Add to Cart event. This is because Klaviyo’s Add to Cart event is in fact a custom track API call that is being made when a user clicks on the add to cart button on your product page after they have already been identified through being cookied. 

To build and create your own event that would act similar to Klaviyo’s add to cart functionality, I would recommend reviewing the following resources to learn more about Klaviyo’s track and identify API and how to build your own events to be synced to Klaviyo:

Since this function would be custom work, for further assistance in creating and building these APIs, I would recommend reaching out and working with a developer you are familiar with or finding a Klaviyo partner from our extensive network of partners.

I hope this helps!

David

Badge +2

Damn ok so almost verbatim same answer as I got from CS via email… that’s fair! I suppose I have to put on the big boy pants or pay up :P 

Userlevel 7
Badge +58

@eevees.com I think to be fair to Klaviyo, anything “custom” can vary greatly so they can only point you the resources so you or your developer can tackle it accordingly.  Not to mention, these requests for things like “Just Copy X but Change One Thing” never ends up as straightforward as you think. :wink:

BUT… I’m going to take a stab at this for ya.

You just need to change a few things:

  1. Your Pre-Order button needs to have different Class or ID name than your Add to Cart button. Use that instead of “Pre-Order” ID  in my example below.  And this example is using it by an ID.
  2. Change the Metric name from “Add to Cart” to something like “Added to Pre-Order” 
  3. This code also depends on the “View Product” event.

So your code will look like this:

<script type="text/javascript">
var _learnq = _learnq || [];
document.getElementById("Pre-Order").addEventListener('click',function (){
_learnq.push(['track', 'Added to Pre-Order', item]);
});
</script>

If everything lines up correctly, that should mimic your custom “Add to Cart” button and send in a different (and separate) event called “Added to Pre-Order” for you to use for Flows or Segmentation.  

Badge +2

Wow @retention AKA Joseph, I didn’t see this response until now… thank you so much for writing this up! 

Just for clarification, I would: 
 

  1. add this script to my product.liquid section, right under where I added the custom add to cart ID snippet?
  2. wait, im actually kind of stumped on this part… if I change the ‘added to cart’ metric on klaviyo, then I don’t have the ability to track that anymore, no? I’d like to have both of them. Or am I misconstruing what you’re saying? 
  3. If I do indeed paste that code into the product.liquid, would I then just do the same thing I did with the add to cart metric, as in, just trigger the event on my site and then it will appear? Could it be so simple? It was indeed that simple with the add to cart metric, so I guess maybe it could be! 

Thanks again! 

Reply