Track more events

- addToCart with product name
- cartOpen
- cartCheckout when going to checkout page

src/components/atoms/ButtonCart.svelte

@@ -6,12 +6,14 @@
     import { scale } from 'svelte/transition'
     import { quartOut } from 'svelte/easing'
     import { cartOpen, cartAmount } from '$utils/stores/shop'
+    import { sendEvent } from '$utils/analytics'
     // Components
     import Icon from '$components/atoms/Icon.svelte'
     import ButtonCircle from '$components/atoms/ButtonCircle.svelte'
 
     const openCart = () => {
         $cartOpen = true
+        sendEvent('cartOpen')
     }
 </script>
 

src/components/organisms/Cart.svelte

@@ -15,6 +15,7 @@
     import Icon from '$components/atoms/Icon.svelte'
     import CartItem from '$components/molecules/CartItem.svelte'
     import ShopLocationSwitcher from '$components/molecules/ShopLocationSwitcher.svelte'
+    import { sendEvent } from '$utils/analytics';
 
 
     // Block scroll if cart is open
@@ -139,6 +140,7 @@
                             text="Checkout"
                             color="pink"
                             size="small"
+                            on:click={() => sendEvent('cartCheckout', { props: { amount: $cartAmount }})}
                         />
                     </div>
                 {/if}

src/utils/functions/shop.ts

@@ -44,7 +44,9 @@ export const addToCart = async (product: any, quantity: number = 1) => {
 
         // Send event
         sendEvent('addToCart', {
-            product: product.name
+            props: {
+                product: product.name,
+            },
         })
     }
 }