Reporting Analytical Statistics - ecellar/remote-widgets GitHub Wiki

The eCellar Designer Widget system is capable of providing robust consumer interaction data to Google Analytics 4 and/or Facebook Pixel to help you see and understand your consumer behavior.

It is straight-forward to enable these in your Initialization Options by including a stats object, though some additional configuration is recommended in Google Analytics and required for Google Tag Manager.

epubOptions = {
  APIKey: 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX',
  pathRoot: '/shop/',
  stats: {ga4gtag: true}
}

The example above instructs Designer Widgets to provide data to Google Analytics 4 using a simple Google Tag (not Google Tag Manager). This is the modern, simple, way of implementing Google Analytics 4. We also support passing data through Google Tag Manager with ga4gtm: true. You should only use ONE of these for sending data to Google Analytics 4. Facebook pixel is enabled with fbq: true. While it may be possible to map data from Google Tag Manager into Facebook Pixel, we are not able to help you configure GTM for that.

You have already installed the base tracking code on all Designer Widget enabled pages to collect page view statistics. Confirm page view statistics are appearing in your destination (Google Analytics 4 / Facebook Pixel).

• Google Analytics 4 stand alone
• Google Analytics 4 via Google Tag Manager
• Facebook Pixel

You should already have page view statistics showing for your Google Analytics 4 property. The google tracking code on your website should look like this:

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

   gtag('config', 'G-XXXXXXXXXX');
  </script>

To get even more information from your DW installation enable additional events by adjusting the DW config to include {stats: ga4gtag: true}.

epubOptions = {
  APIKey: 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX',
  pathRoot: '/shop/',
  stats: {ga4gtag: true}
}

To receive “page view” statistics for dynamic page changes within Designer Widgets, confirm the Data Stream for your Website is configured to enable “Enhanced Measurement” → “Page Views” → “Page changes based on browser history events”. Find this setting in the “Admin” within Google Analytics.

To track “Create Account”, “Join List” and “Join Club” events as “Conversions”, find or create an Event named “sign_up” and toggle that to enable it as a Conversion metric.

To track “Create Subscription” events for existing customers as “Conversions”, find or create an Event named “join_group” and toggle that to enable it as a Conversion metric.

To track “Reservation Requested” events as “Conversions”, find or create Events named “reservation” and “reservation_with_purchase” and toggle that to enable it as a Conversion metric.

Designer Widgets will now report the following information via recommended GA4 events:

• Cart Add / Remove / Update (with product sku, quantity and name)
• Product Impressions (with product category, sku, name, price and position)
• Product Detail Impressions (with product sku, name and price)
• Checkout Start (with product sku, quantity, name and price)
• Checkout Steps (Delivery and Payment Method)
• Checkout Complete (with total, tax, shipping, and product sku, quantity, name and price)
• Dynamic “page” view changes
• Account Created
• Join List Completed
• Wine Club Join Completed (with tier name)
• Customer Create Club Subscription (with tier name)
• Reservation Requested (with purchase data)

You may see some of the statistics immediately in the real time reporting, though some things are delayed (in Google Analytics) by up to 24 hours.

You should already have page view statistics showing for your Google Analytics 4 property. The google tracking code on your website should look like this:

  <!-- Google Tag Manager -->
  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-XXXXXXX');</script>

To get even more information from your DW installation you’ll need to enable additional events by adjusting the DW config to include {stats: ga4gtm: true} as well as perform some necessary configuration in both Google Analytics and Google Tag Manger.

epubOptions = {
  APIKey: 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX',
  pathRoot: '/shop/',
  stats: {ga4gtm: true}
}

Begin by configuring the following within Google Analytics for your GA4 property:

To receive “page view” statistics for dynamic page changes within Designer Widgets, confirm the Data Stream for your Website is configured to enable “Enhanced Measurement” → “Page Views” → “Page changes based on browser history events”. Find this setting in the “Admin” within Google Analytics.

To track “Create Account”, “Join List” and “Join Club” events as “Conversions”, find or create an Event named “sign_up” and toggle that to enable it as a Conversion metric.

To track “Create Subscription” events for existing customers as “Conversions”, find or create an Event named “join_group” and toggle that to enable it as a Conversion metric.

To track “Reservation Requested” events as “Conversions”, find or create Events named “reservation” and “reservation_with_purchase” and toggle that to enable it as a Conversion metric.

Create the Variables, Triggers and Tags in Google Tag Manager

You’ll need to create a Variable for each piece of data in the Google Analytics 4 recommended events so they can be passed through in the tags:

• currency
• value
• items
• item_list_name
• shipping
• tax
• transaction_id
• method
• group_id
• location
• number_tasting
• party_size
• reservation_start
• reservation_end
• reservation_id
• reservation_type
• station

You’ll also want to create a Variable with your GA4 tag id so you don’t have to enter it manually for every tag later, we’ll start with that:

Open Google Tag Manager and navigate to “Variables” display. Click the button to create a new “User-Defined Variable.”

Name the User-Defined Variable something easily identifiable for the GA4 property, we used “eCELLAR Test GA4”, choose type “Constant”.

Enter the tag id of your GA4 property (format like G-XXXXXXXXXX) and click save.

Now, begin creating the Data Layer Variables starting with currency. Click the New button again and name the User-Defined Variable “dlv – currency”, choose type “Data Layer Variable” with name “currency” and save.

Repeat for the “value” variable.

Repeat for the “items” variable.

Repeat for the “item_list_name” variable.

Repeat for the “shipping” variable.

Repeat for the “tax” variable.

Repeat for the “transaction_id” variable.

Repeat for the “method” variable.

Repeat for the “group_id” variable.

Repeat for the “location” variable.

Repeat for the “number_tasting” variable.

Repeat for the “party_size” variable.

Repeat for the “reservation_start” variable.

Repeat for the “reservation_end” variable.

Repeat for the “reservation_id” variable.

Repeat for the “reservation_type” variable.

Repeat for the “station” variable.

You should now have the following User-Defined Variables:

Next, you’ll create Triggers for all the events you want to pass along to Google Analytics 4:

• view_item_list
• view_item
• add_to_cart
• remove_from_cart
• begin_checkout
• add_shipping_info
• add_payment_info
• purchase
• sign_up
• join_group
• reservation
• reservation_with_purchase

Navigate to “Triggers” and click the “New” button.

Name the Trigger “eCELLAR Event – List View” and choose “Custom Event” as the Trigger Type.

Use event name “view_item_list” for all custom events and save.

Repeat for “view_item” trigger.

Repeat for “add_to_cart” trigger.

Repeat for “remove_from_cart” trigger.

Repeat for “begin_checkout” trigger.

Repeat for “add_shipping_info” trigger.

Repeat for “add_payment_info” trigger.

Repeat for “purchase” trigger.

Repeat for “sign_up” trigger.

Repeat for “join_group” trigger.

Repeat for “reservation” trigger.

Repeat for “reservation_with_purchase” trigger.

You should now have the following Triggers:

Using the Variables and Triggers created above, you’ll create Tags for each event you want to send to Google Analytics 4 with the appropriate data:

• view_item_list
• view_item
• add_to_cart
• remove_from_cart
• begin_checkout
• add_shipping_info
• add_payment_info
• purchase
• sign_up
• join_group
• reservation

Navigate to “Tags” and click the “New” button.

Name the Trigger “eCELLAR – List View” and choose “Google Analytics: GA4 Event” as the Tag Type.

Select the User Defined Variable with the Constant value of the Tag ID for your Google Analytics 4 property.

Set Event Name to “item_list_view”, add Event Parameters for “items” and “item_list_name” then check “Send Ecommerce Data” under More Settings.

Add the List View trigger created earlier and save.

Repeat for “view_item” using “items” parameter and appropriate Trigger.

Repeat for “add_to_cart” using “items”, “currency” and “value” parameters and appropriate Trigger.

Repeat for “remove_from_cart” using “items”, “currency” and “value” parameters and appropriate Trigger.

Repeat for “begin_checkout” using “items”, “currency” and “value” parameters and appropriate Trigger.

Repeat for “add_shipping_info” using no parameters and no ecommerce data with the appropriate Trigger.

Repeat for “add_payment_info” using no parameters and no ecommerce data with the appropriate Trigger.

Repeat for “purchase” using “items”, “currency”, “shipping”, “tax”, “transaction_id”, and “value” parameters and appropriate Trigger.

Repeat for “sign_up” using “method” parameter and appropriate Trigger.

Repeat for “join_group” using “group_id” parameter and appropriate Trigger.

Repeat for “reservation” using new “ReservationData” parameter and appropriate Trigger.

Include the reservation data by creating a new variable with all the data layer variables

You should now have the following Tags:

Save

Publish

Designer Widgets will now report the following information via recommended GA4 events:

• Cart Add / Remove / Update (with product sku, quantity and name)
• Product Impressions (with product category, sku, name, price and position)
• Product Detail Impressions (with product sku, name and price)
• Checkout Start (with product sku, quantity, name and price)
• Checkout Steps (Delivery and Payment Method)
• Checkout Complete (with total, tax, shipping, and product sku, quantity, name and price)
• Dynamic “page” view changes
• Account Created
• Join List Completed
• Wine Club Join Completed (with tier name)
• Reservation Requested (with purchase data)

You may see some of the statistics immediately in the real time reporting, though some things are delayed (in Google Analytics) by up to 24 hours.

You should already have page view statistics showing in Facebook Pixel, to get even more information from your DW installation enable additional events by adjusting the config for DW to include {stats: fbq: true}.

epubOptions = {
  APIKey: 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX',
  pathRoot: '/shop/',
  stats: { fbq: true}
}

Designer Widgets will now report the following information via pixel standard events:

• Cart Add / Remove / Update (with product sku and quantity)
• Checkout Start (with product skus and quantities)
• Checkout Complete (with total and product skus and quantities)
• Account Created
• Join List Completed
• Wine Club Join Completed
• Dynamic “page” view changes