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. The legacy Google Analytics integrations remain with documentation below, please note these are now deprecated and no longer supported.

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
• (Deprecated) Google Analytics via Google Tag Manager
• (Deprecated) Google Analytics stand alone

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.

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)

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.

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

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.

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

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.

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

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.

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)

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

This is deprecated and no longer supported. You should already have page view statistics showing in Google Analytics. To get even more information from your DW installation enable additional events by adjusting the DW config to include {stats: gtm: true}.

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

The default settings in Google Analytics and Google Tag Manager are to ignore ecommerce data. It’s critical to enable enhanced ecommerce statistics in BOTH Google Analytics and Google Tag Manager.

In Google Analytics select the correct account and view, then click “Admin” (the cog menu icon) and open “Ecommerce Settings”. Enable both ecommerce and enhanced ecommerce reporting. While you’re in here, configure the checkout funnel steps as: 1 Delivery, 2 Billing, 3 Payment, 4 Review.

Enable enhanced ecommerce in Google Analytics (setup the checkout funnel too)

In Google Tag Manager select the correct account and workspace, then click to view your Variables. Find your “Google Analytics Settings” variable and click to edit, check to enable enhanced ecommerce features and check the box to use the data layer.

Enable enhanced ecommerce in Google Tag Manager – Variables – Google Analytics Settings (don’t worry about the “fields to set”, we’ll get to those below)

Designer Widgets will report 4 different Goals: Create Account, Join List, Join Club (new customer), and Complete Checkout. Let’s configure the goals in Google Analytics by selecting the correct account and view, then click “Admin” and open “Goals”.

Create Account
Click to create a New Goal, use a Template → Acquisition → Create an Account and click continue. Give the goal a description like “Create an Account” and choose type “Event” and click continue. The event conditions should have the Category set to “epubEvent”, the Action set to “epubCreateAccount” and Yes to using the event value as the goal value, click Save.

Create Account – Step 1

Create Account – Step 2

Create Account – Step 3

Join List
Click to create a New Goal, use a Template → Acquisition → Create an Account and click continue. Give the goal a description like “Join List” and choose type “Event” and click continue. The event conditions should have the Category set to “epubEvent”, the Action set to “epubJoinList” and Yes to using the event value as the goal value, click Save.

Join List – Step 3

Join Club
Click to create a New Goal, use a Template → Revenue → Register Online and click continue. Give the goal a description like “Join Club” and choose type “Event” and click continue. The event conditions should have the Category set to “epubEvent”, the Action set to “epubJoinClub” and Yes to using the event value as the goal value, click Save. Note: you can create separate goals for each club tier by setting the “Label” to your club tier’s public name.

Join Club – Step 3

Complete Checkout
Click to create a New Goal, use a Template → Revenue → Buy Tickets and click continue. Give the goal a description like “Complete Purchase” and choose type “Event” and click continue. The event conditions should have the Category set to “epubEvent”, the Action set to “epubCheckoutComplete” and Yes to using the event value as the goal value, click Save.

Complete Checkout – Step 3

Now that Google Analytics is configured to track all this new data we need to configure Google Tag Manager to send it all through from your website. There are three main components we’ll be using in Google Tag Manager: Variables (maps the DW data into GTM), Triggers (maps the DW events), and Tags (sends data to GA).

We’ll start by configuring the Variables in Google Tag Manager, select the correct account and workspace then open Variables. We have five variables to define: pageTitle, pagePath, action, label and value.

pageTitle
Under “User-Defined Variables” click to add a “New” variable, replace “Untitled Variable” with “dlv – pageTitle”. Click the pencil icon to choose a variable type, under “Page Variables” choose “Data Layer Variable” and set the Data Layer Variable Name to “pageTitle” then click Save.

pageTitle

pagePath
Under “User-Defined Variables” click to add a “New” variable, replace “Untitled Variable” with “dlv – pagePath”. Click the pencil icon to choose a variable type, under “Page Variables” choose “Data Layer Variable” and set the Data Layer Variable Name to “pagePath” then click Save.

pagePath

action
Under “User-Defined Variables” click to add a “New” variable, replace “Untitled Variable” with “dlv – action”. Click the pencil icon to choose a variable type, under “Page Variables” choose “Data Layer Variable” and set the Data Layer Variable Name to “action” then click Save.

action

label
Under “User-Defined Variables” click to add a “New” variable, replace “Untitled Variable” with “dlv – label”. Click the pencil icon to choose a variable type, under “Page Variables” choose “Data Layer Variable” and set the Data Layer Variable Name to “label” then click Save.

label

value
Under “User-Defined Variables” click to add a “New” variable, replace “Untitled Variable” with “dlv – value”. Click the pencil icon to choose a variable type, under “Page Variables” choose “Data Layer Variable” and set the Data Layer Variable Name to “value” then click Save.

value

With the variables mapped from the data layer, and while we’re still here at the variables, let’s edit your Google Analytics Settings variable to include the pageTitle and pagePath for dynamically loaded DW “pages”. Click your GA Settings variable and then click the pencil to edit. Under “Fields to Set” click “Add Field” and enter “title” as the “Field Name” and “{{dlv – pageTitle}}” as the “Value”. Click “Add Field” again to add “page” with the Value “{{dlv – pagePath}}”. Click Save.

Map Page Path and Title – Google Analytics Settings

Next up we’ll configure two Triggers: epubEvent and epubPageView.

epubEvent
Click into Triggers, click “New” and replace “Untitled Trigger” with “epubEvent”. Next, click the pencil to configure the trigger and scroll down to “Other” and choose “Custom Event”, enter “epubEvent” as the “Event Name” and click Save.

epubEvent

epubPageView
Click into Triggers, click “New” and replace “Untitled Trigger” with “epubPageView”. Next, click the pencil to configure the trigger and scroll down to “Other” and choose “Custom Event”, enter “epubPageView” as the “Event Name” and click Save.

epubPageView

We’re on to the home-stretch, let’s assign these new triggers to some Tags. Click to open your existing GA Universal Analytics Tag, click to edit “firing triggers” and add “epubPageView”, then Save.

Existing GA Tag

Now we need to create a NEW Tag named “epub Events Tag”, it is also a “Google Analytics Universal Analytics” type with the trigger “epubEvents”. The “Track Type” is “Event”, the “Category” is “epubEvent”, the “Action” is “{{dlv – action}}”, the “Label” is “{{dlv – label}}”, and the “Value” is “{{dlv – value}}”

New GA Event Tag

Save

Publish

Designer Widgets will now report the following information via enhanced ecommerce:

• 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 Step Start/Complete (Delivery, Billing, Payment Method, Review)
• Checkout Complete (with total, tax, shipping, and product sku, quantity, name and price)
• Dynamic “page” view changes

Additionally, the following will be reported via custom events

• Account Created
• Join List Completed
• Wine Club Join Completed (with tier name)

This is deprecated and no longer supported. You should already have page view statistics showing in Google Analytics, to get even more information from your DW installation enable additional events by adjusting the config for DW to include {stats: ga: true}.

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

The default tracking code does not enable the enhanced ecommerce statistics plugin, it’s vital that your tracking code include ga(‘require’, ‘ec’) like this example:

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-XXXXXXXX-Y', 'auto');
  ga('require', 'ec');
  ga('send', 'pageview');
</script>

Additionally, the default settings in Google Analytics are to ignore ecommerce data. It’s critical to enable enhanced ecommerce statistics in Google Analytics. In Google Analytics select the correct account and view, then click “Admin” (the cog menu icon) and open “Ecommerce Settings”. Enable both ecommerce and enhanced ecommerce reporting. While you’re in here, configure the checkout funnel steps as: 1 Delivery, 2 Billing, 3 Payment, 4 Review.

Enable enhanced ecommerce in Google Analytics (setup the checkout funnel too)

Designer Widgets will report 4 different Goals: Create Account, Join List, Join Club (new customer), and Complete Checkout. Let’s configure the goals in Google Analytics by selecting the correct account and view, then click “Admin” and open “Goals”.

Create Account
Click to create a New Goal, use a Template → Acquisition → Create an Account and click continue. Give the goal a description like “Create an Account” and choose type “Event” and click continue. The event conditions should have the Category set to “epubEvent”, the Action set to “epubCreateAccount” and Yes to using the event value as the goal value, click Save.

Create Account – Step 1

Create Account – Step 2

Create Account – Step 3

Join List
Click to create a New Goal, use a Template → Acquisition → Create an Account and click continue. Give the goal a description like “Join List” and choose type “Event” and click continue. The event conditions should have the Category set to “epubEvent”, the Action set to “epubJoinList” and Yes to using the event value as the goal value, click Save.

Join List – Step 3

Join Club
Click to create a New Goal, use a Template → Revenue → Register Online and click continue. Give the goal a description like “Join Club” and choose type “Event” and click continue. The event conditions should have the Category set to “epubEvent”, the Action set to “epubJoinClub” and Yes to using the event value as the goal value, click Save. Note: you can create separate goals for each club tier by setting the “Label” to your club tier’s public name.

Join Club – Step 3

Complete Checkout
Click to create a New Goal, use a Template → Revenue → Buy Tickets and click continue. Give the goal a description like “Complete Purchase” and choose type “Event” and click continue. The event conditions should have the Category set to “epubEvent”, the Action set to “epubCheckoutComplete” and Yes to using the event value as the goal value, click Save.

Complete Checkout – Step 3

Designer Widgets will now report the following information via enhanced ecommerce:

• 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 Step Start/Complete (Delivery, Billing, Payment Method, Review)
• Checkout Complete (with total, tax, shipping, and product sku, quantity, name and price)
• Dynamic “page” view changes

Additionally, the following will be reported via custom events

• Account Created
• Join List Completed
• Wine Club Join Completed (with tier name)