braze-inc / braze-gtm-actions

Braze Web SDK Actions Template for Google Tag Manager
Apache License 2.0
0 stars 0 forks source link

Capture multiple items with purchase tag #3

Closed mariusrudolph closed 2 years ago

mariusrudolph commented 2 years ago

Hi, how can we capture multiple items with the braze action tag? When I select purchase I am only able to capture and send one item to braze. How can we handle multiple items?

wesleyorbin commented 2 years ago

Hi @mariusrudolph. As of now, there is no way to submit multiple purchases with a single action tag. You can set up your code to trigger multiple purchase tags or use a custom HTML tag that calls logPurchase() for each item.

davidbielik commented 2 years ago

Hi @mariusrudolph, can you share the shape of what your dataLayer item looks like? We can look into adding support for e-commerce to our purchase type.

mariusrudolph commented 2 years ago

Hi @wesleyorbin and @davidbielik , thanks a lot for the answer. I think the braze community would highly appreciate it because it is quite common that multiple items are purchased at once.

In our case we currently support the UA (Universal Analytics) and the GA4 (Google Analytics 4) purchase datalayer push. UA will be deprecated next year (June 2023) by Google so I guess it's worth investing time in the GA4 datalayer.

Google Analytics 4 - Purchase

dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  event: "purchase",
  ecommerce: {
      transaction_id: "T_12345",
      affiliation: "Google Merchandise Store",
      value: 25.42,
      tax: 4.90,
      shipping: 5.99,
      currency: "USD",
      coupon: "SUMMER_SALE",
      items: [
       {
        item_id: "SKU_12345",
        item_name: "Stan and Friends Tee",
        affiliation: "Google Merchandise Store",
        coupon: "SUMMER_FUN",
        currency: "USD",
        discount: 2.22,
        index: 0,
        item_brand: "Google",
        item_category: "Apparel",
        item_category2: "Adult",
        item_category3: "Shirts",
        item_category4: "Crew",
        item_category5: "Short sleeve",
        item_list_id: "related_products",
        item_list_name: "Related Products",
        item_variant: "green",
        location_id: "L_12345",
        price: 9.99,
        quantity: 1
      },
      {
        item_id: "SKU_12346",
        item_name: "Google Grey Women's Tee",
        affiliation: "Google Merchandise Store",
        coupon: "SUMMER_FUN",
        currency: "USD",
        discount: 3.33,
        index: 1,
        item_brand: "Google",
        item_category: "Apparel",
        item_category2: "Adult",
        item_category3: "Shirts",
        item_category4: "Crew",
        item_category5: "Short sleeve",
        item_list_id: "related_products",
        item_list_name: "Related Products",
        item_variant: "gray",
        location_id: "L_12345",
        price: 20.99,
        promotion_id: "P_12345",
        promotion_name: "Summer Sale",
        quantity: 1
      }]
  }
});

Universal Analytics - Purchase

dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'purchase': {
      'actionField': {
        'id': 'T12345',                         // Transaction ID. Required for purchases and refunds.
        'affiliation': 'Online Store',
        'revenue': '35.43',                     // Total transaction value (incl. tax and shipping)
        'tax':'4.90',
        'shipping': '5.99',
        'coupon': 'SUMMER_SALE'
      },
      'products': [{                            // List of productFieldObjects.
        'name': 'Triblend Android T-Shirt',     // Name or ID is required.
        'id': '12345',
        'price': '15.25',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Gray',
        'quantity': 1,
        'coupon': ''                            // Optional fields may be omitted or set to empty string.
       },
       {
        'name': 'Donut Friday Scented T-Shirt',
        'id': '67890',
        'price': '33.75',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Black',
        'quantity': 1
       }]
    }
  }
});
wesleyorbin commented 2 years ago

HI @mariusrudolph. Thanks for the feedback! We will look into supporting the enhanced e-commerce dataLayer.

mariusrudolph commented 2 years ago

Hi @wesleyorbin , great news! Thanks so much. Just to make sure (if others are reading this too). In GA4 it is not called "Enhanced E-Commerce" anymore - I was confused by that too. If it helps there are already some great "converter" templates out there which you could use as inspiration (for example the Facebook Pixel Converter.

Please let me know when you know about a timeline because at the moment this issue is blocking us in rolling out braze to our web shops because we have limited to no developer resources.

mariusrudolph commented 2 years ago

Hi @wesleyorbin : Is there anything I can support with?

wesleyorbin commented 2 years ago

Hi @mariusrudolph. This is on our roadmap, but we don't have a timeline right now. For now, I would recommend writing a custom HTML tag that splits the purchase items and calls braze.logPurchase() for each one.

spvismaya commented 2 years ago

Hi @mariusrudolph ! We have now released an update that will support integration with GTM's eCommerce dataLayer. The change should be picked up by google in a day or so.

Please follow our guide to updating your tag template and let us know if you run into any issues with this.

mariusrudolph commented 2 years ago

Hi @spvismaya - thanks for the great news! I just checked it out and I have some questions. So I selected as tag type: "E-Commerce Purchase" (see screenshot).

Bildschirmfoto 2022-07-15 um 09 35 32 Bildschirmfoto 2022-07-15 um 09 37 01

I made a purchase and had a look at the fired tag. How can I debug if all items are not transferred to braze? How can I add additional event properties to the braze "E-Commerce Purchase" tag because they need to be looped through all the items? Let's say I want to make sure that the brands are saved as "item_brand" (as in the add_to_cart event - see screenshot).

Bildschirmfoto 2022-07-15 um 09 42 40
spvismaya commented 2 years ago

Hi @mariusrudolph! To answer your questions:

  1. In the e-commerce tag, there is an option to add property names to the Purchase Properties table by clicking on the Add Row button. We will pass any properties listed here while logging purchase to braze as long as it is present in the ecommerce item object in the dataLayer. So in your example, if you wish to have item_brand logged in the purchase, you could simply add item_brand as one of the properties under Purchase Properties table.

  2. To debug whether all purchases were successfully logged to braze, you could either enable braze SDK's logging during initialization on gtm, or you could also verify on the network tab to check if all items were sent as expected.

Please feel free to reach out if you have more questions. Thank you!

mariusrudolph commented 2 years ago

Hi @spvismaya, thanks for that. I added the item_brand as a property but how does the tool know which data to use?

Bildschirmfoto 2022-07-16 um 19 15 56

Is there any documentation available how to debug the braze events in the developer console in Chrome?

davidbielik commented 2 years ago

Hi @mariusrudolph, our documentation can be found here: https://www.braze.com/docs/developer_guide/platform_integration_guides/web/google_tag_manager/#ecommerce

Each item you add to the properties table will be sent along as a purchase property to Braze. These properties must exist within the items array.

For example, you added item_brand and item_id to the Purchase Properties table. You should have those fields within your ecommerce items as below.

This will call logPurchase with {item_id: "10801463", item_brand: "EUROLUB"} as purchase properties.

items: [
  {
  item_name: "5 L WIV ECO SAE 5W/30",
  **item_id**: "10801463",
  price: 24.65,
  **item_brand**: "EUROLUB",
  quantity: 1
  },
mariusrudolph commented 2 years ago

Hi @davidbielik, thanks for the clarification. As far as I understood the GTM action template I only can create a "Property name" (see screenshot) but I am not able to pass a property value (for example with a datalayer variable) or does this braze automatically checks for the property value in the items array?

Bildschirmfoto 2022-07-19 um 19 42 59
davidbielik commented 2 years ago

@mariusrudolph we dynamically pull the value for each of the property names you supply. Here's an example:

  1. In GTM i've specified these property names

    image
  2. My website pushes the following items to the e-commerce datalayer:

    image
  3. The resulting values are sent in the Purchase event. Notice how the item_name property value is different because the two items sent different values in the datalayer.

image image
mariusrudolph commented 2 years ago

Hi @davidbielik, thanks for that! In general everything works - thanks a lot. Maybe some ideas for next iterations of the braze action tag template:

  1. Other templates like the Facebook GTM Template automatically recognize the standard datalayer ecommerce events (view_item, select_item, add_to_cart, add_to_wishlist, begin_checkout, purchase, remove_from_cart). I guess those events can be very interesting for all your braze customers as well. Maybe it's worth doing the same so it is easier to capture those events without setting them up manually.
  2. It would be great to have more flexibility when it comes to the key/values in the purchase event. Your documentation states that it is recommended to have the "product name or product category" set for the product_id. The updated braze template uses the item_id as a value for the product_id. That makes it hard for our CRM team to work with it. (Documentation