Capturing Analytics Events

Tracking user activity is an important measure in understanding user behavior and optimizing your website's performance. By implementing analytics and tracking user interactions, you gain several key benefits:

1. Identifying user preferences: Analytics enable you to observe which parts of your website users are interacting with the most. This information helps you understand their preferences, such as the features, content, or pages that attract the highest engagement. By recognizing these preferences, you can tailor your website to better meet user expectations and provide a more personalized experience.

2. Improving user experience: Tracking user interactions allows you to identify areas of your website that might be causing frustration or confusion. For example, if users frequently abandon a particular form or struggle to navigate a specific section, analytics can reveal these pain points. Armed with this knowledge, you can make targeted improvements to enhance the overall user experience, streamline processes, and increase user satisfaction.

3. Optimizing conversions: Analytics can help you analyze the effectiveness of your website's conversion funnel. By tracking user interactions, you gain insights into the steps users take before converting (e.g., making a purchase, signing up for a newsletter, submitting a form). This data allows you to identify bottlenecks or barriers preventing users from completing desired actions. With this information, you can make data-driven adjustments to optimize the conversion process and maximize conversion rates.

4. Measuring campaign effectiveness: If you are running marketing campaigns or promotional activities, tracking user interactions can provide valuable feedback on their effectiveness. Analytics can show you the impact of various campaigns on user engagement, conversions, or other predefined goals. Armed with this data, you can refine your marketing strategies, invest more in successful campaigns, and improve overall campaign performance.

5. Data-driven decision making: By tracking user activity and analyzing the data, you have access to valuable insights that can inform your decision-making process. You can use this data to identify trends, make informed decisions about website design and content, prioritize feature development, allocate resources effectively, and measure the impact of changes or updates you implement.

Overall, tracking user interactions via analytics empowers you to gain a deep understanding of user behavior, optimize user experience, enhance conversions, measure campaign effectiveness, and make data-driven decisions. This knowledge enables you to continually improve your website, meet user expectations, and achieve your business goals.

WithWine Event Data

WithWine React Widgets dispatch various events containing data that can be used to forward events to your analytics reporting tools. The events that are dispatched by our Widgets currently provide data via the event.detail object within a v1 object which allows us to shape the data we send. At a later date the shape of the data may change depending on the version of the Widgets you are using, at that time new version (eg: v2) can be added to the dispatched event data without causing errors if the properties you are expecting do not exist.

Example: How we dispatch the event

window.dispatchEvent(
  new CustomEvent('out:withwine:<event_name>', {
    detail: {
      eventName: '<event_name>',
      v1: {
        user: {
          id: ...,
          name: ...,
          sessionId: ...
        },
        ...
      }
    }
  })
);

The above example shows how we dispatch the event data for a given user interaction. We use a standard window.dispatchEvent method containing a CustomEvent prefixed with out:withwine: and the name of the event (<event_name> see below for details on events) along with a detail object containing either a v1 object that holds the relevent data or in some cases the data may reside directly in the detail object (i.e. the join_mailing_list uses this method at present).

All dispatched events contain some user data, this includes id, name and sessionId.

Sensitive Data

WithWine will not emit any personally identifying data for analytics, this is to ensure we are protecting your users from accidental data leakage.

Clubs and Mailing lists

Withwine offers several Widgets related to Clubs and Mailing Lists, these Widgets are:

• Club
• Clubs
• Clubs Wizard
• Join Mailing List

Join Club

Example: join_club event listener

window.addEventListener('out:withwine:join_club', function (event) {
  const { detail } = event;
  /* send event data to your analytics platform */
});

The join_club event payload will contain the Club data, this payload currently supports v1 Widgets data schema.

Example: join_club payload

{
  detail: {
    eventName: 'join_club',
    v1: {
      user: { ... },
      club: {
        id: ...,
        brand: ...,
        isAvailable: ...,
        showOnWebsite: ...,
        name: ...,
        description: ...,
        chargeAmount: ...,
        chargeInterval: ...,
        chargesPerYear: ...,
        bottleQuantity: ...,
        hasAnyOption: ...,
        options: ...,
        bottleQuantityOptions: ...,
        chargeIntervalOptions: ...,
        chargesPerYearOptions: ...,
        discountTiers: ...,
        productOptions: ...,
        isRecurringOrderPerChargeIntervalAvailable: ...,
        discountPercentageBenefit: ...,
        freeShippingBenefit: ...,
        freeShippingOnClubOrders: ...,
        otherBenefits: ...,
        coverPhotoPath: ...,
        termsAndConditions: ...,
        selectionMethod: ...,
        priceType: ...,
        discountTiersByOptions: ...
      }
    }
  }
}

Join Mailing List

Example: join_mailing_list event listener

window.addEventListener('out:withwine:join_mailing_list', function (event) {
  const { detail } = event;
  /* send event data to your analytics platform */
});

The join_mailing_list event payload will contain the data that was submitted in the form.

Example: join_mailing_list payload

{
  detail: {
    eventName: 'join_mailing_list',
    v1: {
      user: { ... },
      location: ...,
      email: ...,
      firstName: ...,
      lastName: ...,
      phone: ...,
      countryCode: ...,
      stateCode: ...,
      postcode: ...,
      acceptTermsAndConditions: ...
    }
  }
}

Cart

There are several user interactions tracked related to the Cart, these interaction can occure in the following Widgets:

• Product (Card)
• Product Details
• Cart

Add to Cart

Example: add_to_cart event listener

window.addEventListener('out:withwine:add_to_cart', function (event) {
  const { detail } = event;
  /* send event data to your analytics platform */
});

The add_to_cart event payload will contain the current Cart data along with the product(s) that were added, this payload currently supports v1 Widgets data schema.

Example: add_to_cart payload

{
  detail: {
    eventName: 'add_to_cart',
    v1: {
      cart: [
        {
          product: {
            id: ...,
            skuCode: ...,
            name: ...,
            vintage: ...,
            wineType: ...,
            productType: ...,
            productGroup: ...,
          },
          quantity: ...
        }
        ...
      ],
      added: {
        product: {
          id: ...,
            skuCode: ...,
            name: ...,
            vintage: ...,
            wineType: ...,
            productType: ...,
            productGroup: ...,
        },
        quantity: ...
      }
    }
  }
}

Remove from Cart

Example: remove_from_cart event listener

window.addEventListener('out:withwine:remove_from_cart', function (event) {
  const { detail } = event;
  /* send event data to your analytics platform */
});

The remove_from_cart event payload will contain the current Cart data along with the product(s) that were removed, this payload currently supports v1 Widgets data schema.

Example: remove_from_cart payload

{
  detail: {
    eventName: 'remove_from_cart',
    v1: {
      cart: [
        {
          product: {
            id: ...,
            skuCode: ...,
            name: ...,
            vintage: ...,
            wineType: ...,
            productType: ...,
            productGroup: ...,
          },
          quantity: ...
        }
        ...
      ],
      removed: {
        product: {
          id: ...,
            skuCode: ...,
            name: ...,
            vintage: ...,
            wineType: ...,
            productType: ...,
            productGroup: ...,
        },
        quantity: ...
      }
    }
  }
}

View Cart

Example: view_cart event listener

window.addEventListener('out:withwine:view_cart', function (event) {
  const { detail } = event;
  /* send event data to your analytics platform */
});

The view_cart event payload will contain the current Cart data, this payload currently supports v1 Widgets data schema.

Example: view_cart payload

{
  detail: {
    eventName: 'view_cart',
    v1: {
      cart: [
        {
          product: {
            id: ...,
            skuCode: ...,
            name: ...,
            vintage: ...,
            wineType: ...,
            productType: ...,
            productGroup: ...,
          },
          quantity: ...
        }
        ...
      ]
    }
  }
}

Empty Cart

Example: empty_cart event listener

window.addEventListener('out:withwine:empty_cart', function (event) {
  const { detail } = event;
  /* send event data to your analytics platform */
});

The empty_cart event payload will contain the previous Cart data, this payload currently supports v1 Widgets data schema.

Example: empty_cart payload

{
  detail: {
    eventName: 'empty_cart',
    v1: {
      cart: [
        {
          product: {
            id: ...,
            skuCode: ...,
            name: ...,
            vintage: ...,
            wineType: ...,
            productType: ...,
            productGroup: ...,
          },
          quantity: ...
        }
        ...
      ]
    }
  }
}

Checkout

There are two user interactions tracked related to the Checkout Process, begin_checkout and checkout_success. The Widgets related to these events currently cannot be implmemented independantly, they are added programatically to the page when the Widgets are loaded.

Begin Checkout

Example: begin_checkout event listener

window.addEventListener('out:withwine:begin_checkout', function (event) {
  const { detail } = event;
  /* send event data to your analytics platform */
});

The begin_checkout event payload will contain the current Cart data, this payload currently supports v1 Widgets data schema.

Example: begin_checkout payload

{
  detail: {
    eventName: 'begin_checkout',
    v1: {
      user: { ... },
      cart: [
        {
          product: {
            id: ...,
            skuCode: ...,
            name: ...,
            vintage: ...,
            wineType: ...,
            productType: ...,
            productGroup: ...,
          },
          quantity: ...
        }
        ...
      ]
    }
  }
}

Location Changed

Example: location_changed event listener

window.addEventListener('out:withwine:location_changed', function (event) {
  const { detail } = event;
  /* send event data to your analytics platform */
});

The location_changed event payload will contain ... , this payload currently supports v1 Widgets data schema.

Example: location_changed payload

{
  detail: {
    eventName: 'location_changed',
    v1: {
      user: { ... },
      location: { ... },
    }
  }
}

Checkout Success

Example: checkout_success event listener

window.addEventListener('out:withwine:checkout_success', function (event) {
  const { detail } = event;
  /* send event data to your analytics platform */
});

The checkout_success event payload will contain information related to the type of event (i.e. Order, JoinClub or RedeemGiftCard) that was performed along with data related to what was processed, this payload currently supports v1 Widgets data schema.

Example: checkout_success payload - Order

{
  detail: {
    eventName: 'checkout_success',
    v1: {
      eventType: 'Order',
      ordertotal: ...,
      orderItems: [
        {
          productId: ...,
          quantity: ...,
          orderItemTotal: ...
        }
        ...
      ],
      orderCouponId: ...
    }
  }
}

Example: checkout_success payload - Join Club

{
  detail: {
    eventName: 'checkout_success',
    v1: {
      eventType: 'JoinClub',
      clubId: ...,
      chargeInterval: ..., // Selected / Default
      bottleQuantity: ... // Selected / Default
    }
  }
}

Example: checkout_success payload - Gift Card Redemption

{
  detail: {
    eventName: 'checkout_success',
    v1: {
      eventType: 'RedeemGiftCard',
      giftCardTotal: ...
    }
  }
}

Products and Tasting Menus

Tried

Example: tried event listener

window.addEventListener('out:withwine:tried', function (event) {
  const { detail } = event;
  /* send event data to your analytics platform */
});

The tried event payload will contain the current Cart data along with the product(s) that were "tried", this payload currently supports v1 Widgets data schema.

Example: tried payload

{
  detail: {
    eventName: 'tried',
    v1: {
      cart: [
        {
          product: {
            id: ...,
            skuCode: ...,
            name: ...,
            vintage: ...,
            wineType: ...,
            productType: ...,
            productGroup: ...,
          },
          quantity: ...
        }
        ...
      ],
      added: {
        product: {
          id: ...,
            skuCode: ...,
            name: ...,
            vintage: ...,
            wineType: ...,
            productType: ...,
            productGroup: ...,
        },
        quantity: ...
      }
    }
  }
}

Liked

Example: liked event listener

window.addEventListener('out:withwine:liked', function (event) {
  const { detail } = event;
  /* send event data to your analytics platform */
});

The liked event payload will contain the current Cart data along with the product(s) that were "liked", this payload currently supports v1 Widgets data schema.

Example: liked payload

{
  detail: {
    eventName: 'liked',
    v1: {
      cart: [
        {
          product: {
            id: ...,
            skuCode: ...,
            name: ...,
            vintage: ...,
            wineType: ...,
            productType: ...,
            productGroup: ...,
          },
          quantity: ...
        }
        ...
      ],
      added: {
        product: {
          id: ...,
            skuCode: ...,
            name: ...,
            vintage: ...,
            wineType: ...,
            productType: ...,
            productGroup: ...,
        },
        quantity: ...
      }
    }
  }
}