Wordpress Shop Analytics

This plugin tracks the activity of customers in WooCommerce based ecommerce sites and sends the collected data to Google Data Layer.

The plugin acts in two general areas:

Static Tracking: Tracking of information about the page currently displayed.
Dynamic Tracking: Tracking of the events triggered by the customers as they interact with the site.

In order to implement these functionalities, the plugin relies on Google Tag manager script. The plugin takes care of adding the GTM script in the page, once the required GTM ID is added to its backend configuration settings and the script injection enabled.

The (very) initial concept and requirements description of shop-analytics plugin can be found in this document. However, the plugin has grown and considerably evolved in complexity and functionality since then.

Shop Analytics configuration settings

The plugin has a dedicated configuration settings page (wp-admin/admin.php?page=shop-analytics). Upon activation, the plugin adds a Shop Analytics entry to the WordPress admin menu.

The available configuration settings are:

Google Tag Manager Container ID: account ID to be used by Tag Manager script.
Google Tag Manager script embed: if checked, enabled the injection of the GTM script.
TagCommander enabled: Enables TagCommander variable optout.
Track User ID: if checked, user ID is tracked.
Use anonymized E-Mail address as User ID: if checked, anonymized E-Mail address is applied as user ID.
Track User Role: if checked, user role is tracked.
Disable User Tracking: user roles that should not be tracked.
Enable E-Commerce tracking: if checked, e-commerce related activity is tracked.
Market code (fallback value): market default code.
Enable GA dataLayer console logging: if checked, data object pushed to Google Data Layer is printed in the browser console. Useful for debugging purposes.
Attribute used as product brand: if a product attribute is used to manage product brands (instead of the WooCommerce native brand field), it can be selected here. This is necessary to correctly track products brand.
Attribute used as product category: if a product attribute is used to manage product categories (instead of regular categories), it can be selected here. This is necessary to correctly track products categories.

Static Tracking

Several relevant details about the site page displayed are sent to GTM. This is achieved by injecting data attribute fields in the <html> tag. See code.

The data fields can vary depending on the type of page visited. Some data fields are used in all cases.

Common data fields:
- language: Site language.
- user-id: User ID (if logged in).
- user-type: User role.
- user-track: tracking status for current user (1 means tracked, 0 not tracked).
Not commerce related
- page-type: Page type. Possible values are:
  - Home
  - Page
  - Post
  - Tag
  - Category
  - Search
  - Other
Commerce related, if tracking enabled in backend settings:
- page-type: Page type. Possible values are:
  - Product single
    - Additionally: Product details and attributes.
      - product-{detail name}: product details.
      - product-{attribute name}: product attributes.
  - Product category, and
    - product-category: Category path
    - product-count: Products count in current taxonomy.
  - Product tag, and
    - product-tag: Tag name,
    - product-count: Products count in current taxonomy.
  - Cart
  - Checkout
- market: Market designation.
- currency: Currency in use.

E.g Homepage

<html class="no-js" lang="de" data-language="de" data-user-id="cee037efd9a618bc4d1e8773eb18d2278370b798" data-user-type="administrator" data-user-track="0" data-page-type="Home" data-market="GLOBAL" data-currency="EUR">

Content page

<html class="no-js" lang="de" data-language="de" data-user-id="cee037efd9a618bc4d1e8773eb18d2278370b798" data-user-type="administrator" data-user-track="0" data-page-type="Page" data-market="GLOBAL" data-currency="EUR"

Search results page

<html class="no-js" lang="de" data-language="de" data-user-id="cee037efd9a618bc4d1e8773eb18d2278370b798" data-user-type="administrator" data-user-track="0" data-page-type="Search" data-market="GLOBAL" data-currency="CHF">

Product category listing

<html class="no-js" lang="de" data-language="de" data-user-id="cee037efd9a618bc4d1e8773eb18d2278370b798" data-user-type="administrator" data-user-track="0" data-page-type="Product | Category" data-market="GLOBAL" data-currency="EUR" data-product-category="Loungemöbel > Fix &amp; Fertig > Loungesets" data-product-count="173">

Single product

<html class="no-js" lang="de" data-language="de" data-user-id="cee037efd9a618bc4d1e8773eb18d2278370b798" data-user-type="administrator" data-user-track="0" data-page-type="Product | Variable" data-market="GLOBAL" data-currency="EUR" data-product-id="237112" data-product-sku="213520-M" data-product-name="4Seasons Outdoor Accor Diningsessel" data-product-type="variable" data-product-price="294.00" data-product-category="Gartenmöbel > Basics > Gartenstühle" data-product-brand="4Seasons Outdoor" data-product-availability="In stock" data-product-stock="2" data-product-currency="EUR" data-product-delivery-time="ca. 8-10 Werktage (Lagerartikel)" data-product-ausfuehrung-gestell="Edelstahl anthrazit" data-product-ausfuehrung-sitzflaeche="Rope anthrazit | Rope mid grey" data-product-material-kissen-bzw-auflage="100% Polypropylen (Olefin)" data-product-farbe-kissen-bzw-auflage="grau" data-product-pflegehinweis-kissen="abziehbar und waschbar" data-product-wetterfestigkeit-kissen="gut - verträgt längeren Schauer" data-product-breite="64 cm" data-product-tiefe="62 cm" data-product-hoehe="83 cm" data-product-belastbarkeit="120 kg" data-product-gewicht-ohne-verpackung="7 kg" data-product-serie="4Seasons Outdoor Accor" data-product-lieferzustand="montiert"

Dynamic tracking

The activity of the user in the site triggers diverse events that are also tracked by shop-analytics and sent to Google Data Layer. The user interactions the plugin watches are related to:

Navigation across the shop
Checkout steps and details

In order to collect the data to be sent to Google Data Layer, shop-analytics builds adds data attribute fields into hidden <div> and <span> elements. This is done during the building and rendering of the page, relying on diverse WooCommerce hooks (see code). E.g.

On single product view (see code)

<div class="shop-analytics-single-product-details" style="display:none;height:0;" data-id="237112" data-sku="213520-M" data-name="4Seasons Outdoor Accor Diningsessel" data-type="variable" data-price="294.00" data-category="Gartenmöbel/Basics/Gartenstühle" data-brand="4Seasons Outdoor" data-availability="In stock" data-stock="2" data-currency="EUR" data-delivery_time="ca. 8-10 Werktage (Lagerartikel)"></div>

In cart page (see code)

<span class="shop-analytics-product-info" data-id="237112" data-sku="213520-M" data-name="4Seasons Outdoor Accor Diningsessel" data-type="variable" data-price="294.00" data-category="Gartenmöbel/Basics/Gartenstühle" data-brand="4Seasons Outdoor" data-availability="In stock" data-stock="2" data-currency="EUR" data-delivery_time="ca. 8-10 Werktage (Lagerartikel)" data-item_key="8587e5976f070d5eee05ff4d18262f38" data-variant="Ausführung Sitzfläche: Rope anthrazit" data-quantity="1"></span>

In order confirmation page (see code)

<div class="shop-analytics-order-details" style="display:none;height:0;" data-id="6023852" data-currency="EUR" data-revenue="578" data-tax="79.72" data-shipping="0" data-shipping_tax="0" data-payment-method="50% Vorkasse per Überweisung" data-coupon="weil wir nett sind :-)" data-order_count="2">
  <div class="shop-analytics-product-details" style="display:none;height:0;" data-id="280274" data-sku="213520" data-name="4Seasons Outdoor Accor Diningsessel - Rope anthrazit" data-type="variation" data-price="294.00" data-availability="Out of stock" data-stock="0" data-gtin="8720087001241" data-currency="EUR" data-delivery_time="ca. 8-10 Werktage (Lagerartikel)" data-quantity="2"></div>
</div>

When the hidden element is ready, all the required data attribute fields added, a set of scripts take care of retrieve the information, organize it in a DataLayer object, and push it into Google DataLayer.

The JSON object pushed to Google Data Layer has a predefined basic format, which varies depending on the event to be tracked.

E.g. Products impressions (products listing page, partial data)

{
  "event": "view_item_list",
  "ecommerce": {
    "currency": "EUR",
    "items": [
      {
        "item_name": "4Seasons Outdoor Accor Diningsessel",
        "item_id": "213520-M",
        "price": "294.00",
        "item_category": "Gartenmöbel/Basics/Gartenstühle",
        "item_brand": "4Seasons Outdoor",
        "position": 1,
        "item_list_name": "Product Category"
      },
      {
        "item_name": "4Seasons Outdoor Athena Diningsessel",
        "item_id": "91013",
        "price": "249.00",
        "item_category": "Gartenmöbel/Basics/Gartenstühle",
        "item_brand": "4Seasons Outdoor",
        "position": 2,
        "item_list_name": "Product Category"
      },
      {
        "item_name": "Cane-line Diamond GartenstuhlTextilgewebe",
        "item_id": "8401TXW-M",
        "price": "484.00",
        "item_category": "Gartenmöbel/Basics/Gartenstühle",
        "item_brand": "Cane-line",
        "position": 3,
        "item_list_name": "Product Category"
      },
      {

      }
    ]
  },
  "gtm.uniqueEventId": 12
}

Single product view

{
  "event": "view_item",
  "ecommerce": {
    "items": [
      {
        "item_name": "4Seasons Outdoor Accor Diningsessel",
        "item_id": "213520-M",
        "price": "294.00",
        "item_category": "Gartenmöbel/Basics/Gartenstühle",
        "item_brand": "4Seasons Outdoor",
        "item_list_name": "Product detail"
      }
    ]
  },
  "gtm.uniqueEventId": 12
}

Add product(s) to cart

{
  "event": "add_to_cart",
  "ecommerce": {
    "currency": "EUR",
    "items": [
      {
        "item_name": "4Seasons Outdoor Accor Diningsessel",
        "item_id": "280274",
        "price": "294.00",
        "item_category": "Gartenmöbel/Basics/Gartenstühle",
        "item_brand": "4Seasons Outdoor",
        "item_variant": "Rope anthrazit",
        "quantity": 1
      }
    ]
  },
  "gtm.uniqueEventId": 48
}

The events tracked are:

Navigation
- Click on navigation element
User
Products listings
- Product impressions
- Click on product
Single product
Cart
Checkout
- Update shipping method
- Update payment method
- Update billing address
- Update shipping address
- Order placed
- WooCommerce checkout enpoints (See code), represented with an integer value (default values can be modified with a filter).
  - view-order
  - edit-account
  - edit-address
  - lost-password
  - customer-logout
  - add-payment-method
  - order-pay
  - order-received

Code customization

Backend

Code customization is possible using the provided filters:

shop_analytics_product_meta_key_gtin: allows to modify the name (value of meta_key) of the meta field used to store the products GTIN.
shop_analytics_checkout_steps: allows to modify the integer used to represent each WooCommerce checkout step.
shop_analytics_wc_endpoints: allows to modify the integer used to represent each WooCommerce endpoint.
shop_analytics_checkout_step__view_cart: allows to modify the integer used to represent WooCommerce view_cart checkout step.
shop_analytics_checkout_step__checkout_pay: allows to modify the integer used to represent WooCommerce pay checkout step.
shop_analytics_checkout_step__checkout_page: allows to modify the integer used to represent WooCommerce checkout_page checkout step.
shop_analytics_checkout_step_current: allows to modify the integer passed to the frontend to represent WooCommerce current checkout step.

Frontend (JS)

It is possible to override many default values modifying the entries of the properties of the object shopAnalytics, which is added to the browser document object as a property. This allows to customize the selectors used to trigger some dynamic tracking events, if necessary.

Name		Name	Last commit message	Last commit date
Latest commit History 106 Commits
.github		.github
assets/scripts/datalayer		assets/scripts/datalayer
dist/scripts/datalayer		dist/scripts/datalayer
src		src
templates		templates
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
README.md		README.md
composer.json		composer.json
gulpfile.js		gulpfile.js
package.json		package.json
plugin.php		plugin.php

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

Wordpress Shop Analytics

Shop Analytics configuration settings

Static Tracking

Dynamic tracking

Code customization

Backend

Frontend (JS)

About

Releases

Packages

Contributors 16

Languages

netzstrategen/wordpress-shop-analytics

Folders and files

Latest commit

History

Repository files navigation

Wordpress Shop Analytics

Shop Analytics configuration settings

Static Tracking

Dynamic tracking

Code customization

Backend

Frontend (JS)

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages 0

Contributors 16

Languages

Packages