You may want to gather some more information about how your customers are interacting with your Bottle store. In this article, we will help you get this in place and get those analytics rolling.

How To Video:

https://www.loom.com/share/7b1bc39360a84202bf63ecbddb7d23d6?sid=20752dd7-1698-455e-9eac-0aaeb26fc612

How to add a Javascript header:

1. From your merchant dashboard click the "edit site" button on the left menu bar

   

2. In the middle of the page, you should see an update button
   1. Here you can paste a Javascript header for Google Analytics or code from a host of other web-tracking services
3. Click Save

How to add Meta Pixel tracking:

1.  From your Merchant Dashboard click the "settings" button at the bottom of the left menu
2. Look for the "Pixels" header on the settings page
3. Enter your Meta Pixel ID
4. Click Save

Google Tag/ GA4 Event Tracking

In addition to basic Javascript headings, Bottle has implemented specific event triggers that can be picked up as Google tag events. These events trigger when customers take certain actions at checkout. When these events trigger, extra data is sent along with the event so that you can know more about the actions your customers are taking when going through checkout. For example, when a customer adds a product to their cart, the add to cart event will trigger and Bottle will share the name of the product in question. 

Below is an example code block that you should place to activate the extra event tracking. Note the missing Google Tag ID

In addition to this, you can see the currently existing event triggers that are in place: 

• Purchase
  • This occurs when a customer completes their order, and it is marked as paid.
• Begin Checkout
  • This occurs when a customer clicks the "proceed to checkout" button and reaches the payment confirmation page.
• View Item List
  • This occurs when a customer is viewing the Bottle store of the merchant. We cannot track certain product views at this time, as all products load in tandem.
• Add to Cart
  • This occurs when a customer adds a specific product to their cart.
• Login
  • This occurs when a customer completes the login step, entering their phone number and enters the login token they receive as confirmation.

<script async
  src="https://www.googletagmanager.com/gtag/js?id=TAG_ID">
</script>
<script>
  window.dataLayer = window.dataLayer || [] ;
  function gtag(){dataLayer.push(arguments);}
  gtag( 'js', new Date () ) ;

  gtag( 'config', 'TAG_ID');
[
  "purchase",
  "begin_checkout",
  "view_item_list",
  "add_to_cart",
  "login",
].forEach(function (name) {
  bottle.hooks.v1.on(name, function (e) {
    gtag("event", name, e);
  });
});

</script>