Introduction

This document provides an overview of business tracking with the Intershop Progressive Web Application (PWA) and describes the general concepts.
It is primarily intended for project developers.

Intershop Progressive Web App (PWA)

The PWA is Intershop's headless front end system that enables users to engage in e-commerce.

Tracking within the PWA allows you to achieve the following goals:

1. Understanding User Behavior:
   Helps analyze how users interact with your site, which pages they visit, and what actions they take.

2. Improving User Experience:
   By identifying pain points or drop-off areas, you can optimize the site to enhance user satisfaction.

3. Measuring Performance:
   Tracking allows you to evaluate the effectiveness of marketing campaigns and website content.

4. Personalization:
   Enables personalized experiences by understanding user preferences and tailoring content accordingly.

5. Conversion Optimization:
   By analyzing the customer journey, you can improve conversion rates and achieve business goals.

6. Data-Driven Decisions:
   Provides insights that support strategic planning and decision-making.

7. Compliance and Security:
   Helps ensure adherence to privacy regulations and enhances security monitoring.

Since not all actions on the PWA make requests to Intershop Commerce Management (ICM), the additional tracking ensures that a complete view of customer events is available in the end.

References

• Cookbook - Business Tracking with Intershop PWA and Google Tag Manager

• Google Tag Manager Help

• Matomo User Guides

• GDPR and Data Protection

Glossary

Usage of Frameworks

There are several frameworks for integrating website tracking into the front end. The most common one is Google Tag Manager (GTM).

In the open source community, Matomo is often used.

Matomo

• Overview:

  • Matomo is an open source web analytics platform that provides insights into website traffic and user behavior.

  • It offers features such as heatmaps, session recordings, and goal tracking.

  • Users can host Matomo on their own servers or use Matomo Cloud.

• Advantages:

  • Full data ownership and privacy control.

  • Customizable and extendable with plugins.

  • Compliance with privacy regulations such as GDPR.

• Use Cases:

  • Ideal for organizations to prioritize data privacy and control.

  • Suitable for detailed analytics and insights.

Google Tag Manager (GTM)

• Overview:

  • GTM is a tag management system that simplifies the process of adding and managing marketing and analytics tags on a website.

  • It allows users to deploy tracking codes without direct code changes.

• Advantages:

  • Simplifies tag management with a user-friendly interface.

  • Supports a wide range of third-party tags.

  • Real-time updates and testing with preview mode.

• Use Cases:

  • Useful for marketers who need to manage multiple tags efficiently.

  • Ideal for dynamic websites that require frequent updates.

Comparison

• Purpose:

  • Matomo focuses on providing comprehensive analytics.

  • GTM is a tool for managing and deploying tracking tags.

• Data Control:

  • Matomo offers complete control over data.

  • GTM relies on third-party analytics platforms like Google Analytics for data processing.

• Complexity:

  • Matomo may require a more technical setup for self-hosting.

  • GTM is generally easier to implement and manage for non-technical users.

• Privacy:

  • Matomo is more privacy-focused, with features to comply with privacy laws.

  • GTM requires careful configuration to ensure compliance.

Both tools serve different purposes but can complement each other when used together. Matomo provides in-depth analytics, while GTM facilitates easy tag management.

Adblocker

How Adblockers Interfere

• Google Tag Manager (GTM):

  • Adblockers may block GTM scripts, preventing tags from firing and data from being collected.

  • This can result in incomplete analytics data and affect marketing campaign tracking.

• Matomo:

  • Adblockers can block Matomo tracking scripts, leading to gaps in data collection.

  • Self-hosted Matomo instances might be less affected but are still vulnerable.

Strategies to Mitigate Impact

1. Custom Domain Setup:

   • For Matomo, use a custom domain for tracking scripts to reduce the likelihood of being blocked.

   • This involves hosting Matomo on a subdomain of your site.

2. Server-Side Tagging:

   • Implement server-side tracking to process data on the server rather than the client side.

   • This approach reduces exposure to adblockers.

   • Not all front-end actions will be known on the server side (PWA caches some requests).

3. Fallback Mechanisms:

   • Use backup methods to capture critical data, such as server logs, to supplement analytics.

4. User Consent:

   • Encourage users to whitelist your site by explaining the benefits of data collection and ensuring compliance with privacy laws.

5. Regular Testing:

   • Continuously test your site with popular adblockers to identify and address any tracking issues.

6. Custom Tracking Scripts:

   • Develop custom tracking scripts that are less likely to be recognized and blocked by adblockers.

While it is challenging to completely avoid adblocker interference, these strategies can help minimize its impact and ensure more reliable data collection.

E-commerce Events

E-commerce events are special actions tracked to gain more insights into the performance of an online shop.

1. Product Impression:
   Tracks when a product appears on a page, such as in a category listing.

2. Product Click:
   Captures when a user clicks on a product to view more details.

3. Product Detail View:
   Records when a user views a product's detail page.

4. Add to Cart:
   Tracks when a user adds a product to their shopping cart.

5. Remove from Cart:
   Captures when a user removes a product from their cart.

6. Checkout:
   Monitors the steps a user takes during the checkout process.

7. Purchase:
   Records the completion of a transaction, including order details.

8. Refund:
   Tracks when a purchase is refunded.

These event data must be integrated into the PWA code.

GTM

Enhanced E-commerce:

• A Google Analytics feature that provides detailed insights into the shopping behavior of users must be enabled.

• Tracks product impressions, clicks, views, add-to-cart actions, checkouts, and transactions.

Data Layer:

• A JavaScript object is used to pass detailed e-commerce data (such as product IDs, prices, and transaction details) to GTM.

• Ensures that data is structured and easily accessible for tags.

• Events must be added to the PWA code and cannot be handled by GTM.

Example Implementation:

https://github.com/WodenWang820118/ng-gtm-integration-sample

Matomo

• E-commerce Reports:

  • Matomo provides detailed reports on product views, cart updates, orders, and revenue.

• JavaScript Tracking Code:

  • Use Matomo's e-commerce tracking functions to capture interactions like product views and purchases.

  • There is an Angular adaption for Matomo: https://github.com/EmmanuelRoux/ngx-matomo-client