584 lines
18 KiB
JavaScript
584 lines
18 KiB
JavaScript
/**
|
|
* Kasico Analytics - Google Analytics 4 Integration
|
|
* E-Commerce Tracking für Fursuit Shop
|
|
*/
|
|
|
|
// Google Analytics 4 Konfiguration
|
|
window.dataLayer = window.dataLayer || [];
|
|
|
|
function gtag() {
|
|
dataLayer.push(arguments);
|
|
}
|
|
|
|
// GA4 Initialisierung
|
|
gtag('js', new Date());
|
|
gtag('config', 'G-XXXXXXXXXX', { // TODO: Replace with actual GA4 Measurement ID
|
|
'custom_map': {
|
|
'dimension1': 'user_type',
|
|
'dimension2': 'fursuit_type',
|
|
'dimension3': 'product_category',
|
|
'dimension4': 'order_value',
|
|
'dimension5': 'customer_location'
|
|
},
|
|
'ecommerce': {
|
|
'currency': 'EUR'
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Analytics Event Tracking
|
|
*/
|
|
class KasicoAnalytics {
|
|
constructor() {
|
|
this.userId = this.getUserId();
|
|
this.sessionId = this.generateSessionId();
|
|
this.initializeTracking();
|
|
}
|
|
|
|
/**
|
|
* User ID aus Session oder Cookie extrahieren
|
|
*/
|
|
getUserId() {
|
|
const userId = document.querySelector('meta[name="user-id"]')?.content;
|
|
return userId || 'anonymous';
|
|
}
|
|
|
|
/**
|
|
* Session ID generieren
|
|
*/
|
|
generateSessionId() {
|
|
let sessionId = sessionStorage.getItem('kasico_session_id');
|
|
if (!sessionId) {
|
|
sessionId = 'session_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
|
|
sessionStorage.setItem('kasico_session_id', sessionId);
|
|
}
|
|
return sessionId;
|
|
}
|
|
|
|
/**
|
|
* Tracking initialisieren
|
|
*/
|
|
initializeTracking() {
|
|
// Page View Tracking
|
|
this.trackPageView();
|
|
|
|
// User Engagement Tracking
|
|
this.trackUserEngagement();
|
|
|
|
// E-Commerce Events
|
|
this.trackEcommerceEvents();
|
|
|
|
// Custom Events
|
|
this.trackCustomEvents();
|
|
}
|
|
|
|
/**
|
|
* Page View Tracking
|
|
*/
|
|
trackPageView() {
|
|
const pageTitle = document.title;
|
|
const pagePath = window.location.pathname;
|
|
const pageReferrer = document.referrer;
|
|
|
|
gtag('event', 'page_view', {
|
|
'page_title': pageTitle,
|
|
'page_location': window.location.href,
|
|
'page_referrer': pageReferrer,
|
|
'user_type': this.getUserType(),
|
|
'session_id': this.sessionId
|
|
});
|
|
}
|
|
|
|
/**
|
|
* User Type bestimmen
|
|
*/
|
|
getUserType() {
|
|
const isLoggedIn = document.querySelector('[data-user-logged-in]') !== null;
|
|
const isAdmin = document.querySelector('[data-user-admin]') !== null;
|
|
|
|
if (isAdmin) return 'admin';
|
|
if (isLoggedIn) return 'registered';
|
|
return 'guest';
|
|
}
|
|
|
|
/**
|
|
* User Engagement Tracking
|
|
*/
|
|
trackUserEngagement() {
|
|
// Scroll Depth Tracking
|
|
let maxScroll = 0;
|
|
window.addEventListener('scroll', () => {
|
|
const scrollPercent = Math.round((window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100);
|
|
if (scrollPercent > maxScroll) {
|
|
maxScroll = scrollPercent;
|
|
if (maxScroll % 25 === 0) { // Track every 25%
|
|
this.trackEvent('scroll_depth', {
|
|
'scroll_percentage': maxScroll,
|
|
'page_path': window.location.pathname
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
// Time on Page Tracking
|
|
let startTime = Date.now();
|
|
window.addEventListener('beforeunload', () => {
|
|
const timeOnPage = Math.round((Date.now() - startTime) / 1000);
|
|
this.trackEvent('time_on_page', {
|
|
'time_on_page_seconds': timeOnPage,
|
|
'page_path': window.location.pathname
|
|
});
|
|
});
|
|
|
|
// Click Tracking für wichtige Elemente
|
|
document.addEventListener('click', (e) => {
|
|
const target = e.target.closest('[data-track]');
|
|
if (target) {
|
|
const eventName = target.dataset.track;
|
|
const eventData = JSON.parse(target.dataset.trackData || '{}');
|
|
this.trackEvent(eventName, eventData);
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* E-Commerce Events Tracking
|
|
*/
|
|
trackEcommerceEvents() {
|
|
// Product View
|
|
this.trackProductView();
|
|
|
|
// Add to Cart
|
|
this.trackAddToCart();
|
|
|
|
// Remove from Cart
|
|
this.trackRemoveFromCart();
|
|
|
|
// Begin Checkout
|
|
this.trackBeginCheckout();
|
|
|
|
// Purchase
|
|
this.trackPurchase();
|
|
|
|
// Wishlist Events
|
|
this.trackWishlistEvents();
|
|
}
|
|
|
|
/**
|
|
* Product View Tracking
|
|
*/
|
|
trackProductView() {
|
|
const productElement = document.querySelector('[data-product-id]');
|
|
if (productElement) {
|
|
const productId = productElement.dataset.productId;
|
|
const productName = productElement.dataset.productName;
|
|
const productCategory = productElement.dataset.productCategory;
|
|
const productPrice = parseFloat(productElement.dataset.productPrice);
|
|
const fursuitType = productElement.dataset.fursuitType;
|
|
|
|
gtag('event', 'view_item', {
|
|
'currency': 'EUR',
|
|
'value': productPrice,
|
|
'items': [{
|
|
'item_id': productId,
|
|
'item_name': productName,
|
|
'item_category': productCategory,
|
|
'item_variant': fursuitType,
|
|
'price': productPrice,
|
|
'currency': 'EUR'
|
|
}],
|
|
'custom_parameters': {
|
|
'fursuit_type': fursuitType,
|
|
'product_category': productCategory
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Add to Cart Tracking
|
|
*/
|
|
trackAddToCart() {
|
|
document.addEventListener('click', (e) => {
|
|
const addToCartBtn = e.target.closest('[data-add-to-cart]');
|
|
if (addToCartBtn) {
|
|
const productId = addToCartBtn.dataset.productId;
|
|
const productName = addToCartBtn.dataset.productName;
|
|
const productPrice = parseFloat(addToCartBtn.dataset.productPrice);
|
|
const quantity = parseInt(addToCartBtn.dataset.quantity || 1);
|
|
|
|
gtag('event', 'add_to_cart', {
|
|
'currency': 'EUR',
|
|
'value': productPrice * quantity,
|
|
'items': [{
|
|
'item_id': productId,
|
|
'item_name': productName,
|
|
'item_category': addToCartBtn.dataset.productCategory,
|
|
'item_variant': addToCartBtn.dataset.fursuitType,
|
|
'price': productPrice,
|
|
'quantity': quantity,
|
|
'currency': 'EUR'
|
|
}]
|
|
});
|
|
|
|
this.trackEvent('add_to_cart', {
|
|
'product_id': productId,
|
|
'product_name': productName,
|
|
'quantity': quantity,
|
|
'price': productPrice
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Remove from Cart Tracking
|
|
*/
|
|
trackRemoveFromCart() {
|
|
document.addEventListener('click', (e) => {
|
|
const removeFromCartBtn = e.target.closest('[data-remove-from-cart]');
|
|
if (removeFromCartBtn) {
|
|
const productId = removeFromCartBtn.dataset.productId;
|
|
const productName = removeFromCartBtn.dataset.productName;
|
|
const productPrice = parseFloat(removeFromCartBtn.dataset.productPrice);
|
|
|
|
this.trackEvent('remove_from_cart', {
|
|
'product_id': productId,
|
|
'product_name': productName,
|
|
'price': productPrice
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Begin Checkout Tracking
|
|
*/
|
|
trackBeginCheckout() {
|
|
const checkoutForm = document.querySelector('[data-checkout-form]');
|
|
if (checkoutForm) {
|
|
checkoutForm.addEventListener('submit', (e) => {
|
|
const cartItems = this.getCartItems();
|
|
const totalValue = cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0);
|
|
|
|
gtag('event', 'begin_checkout', {
|
|
'currency': 'EUR',
|
|
'value': totalValue,
|
|
'items': cartItems,
|
|
'coupon': this.getCouponCode()
|
|
});
|
|
|
|
this.trackEvent('begin_checkout', {
|
|
'total_value': totalValue,
|
|
'item_count': cartItems.length,
|
|
'coupon_used': !!this.getCouponCode()
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Purchase Tracking
|
|
*/
|
|
trackPurchase() {
|
|
const purchaseElement = document.querySelector('[data-purchase]');
|
|
if (purchaseElement) {
|
|
const orderId = purchaseElement.dataset.orderId;
|
|
const totalValue = parseFloat(purchaseElement.dataset.totalValue);
|
|
const paymentMethod = purchaseElement.dataset.paymentMethod;
|
|
const shippingMethod = purchaseElement.dataset.shippingMethod;
|
|
|
|
gtag('event', 'purchase', {
|
|
'transaction_id': orderId,
|
|
'currency': 'EUR',
|
|
'value': totalValue,
|
|
'tax': parseFloat(purchaseElement.dataset.tax || 0),
|
|
'shipping': parseFloat(purchaseElement.dataset.shipping || 0),
|
|
'items': this.getCartItems(),
|
|
'payment_type': paymentMethod,
|
|
'shipping_tier': shippingMethod
|
|
});
|
|
|
|
this.trackEvent('purchase', {
|
|
'order_id': orderId,
|
|
'total_value': totalValue,
|
|
'payment_method': paymentMethod,
|
|
'shipping_method': shippingMethod
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Wishlist Events Tracking
|
|
*/
|
|
trackWishlistEvents() {
|
|
// Add to Wishlist
|
|
document.addEventListener('click', (e) => {
|
|
const addToWishlistBtn = e.target.closest('[data-add-to-wishlist]');
|
|
if (addToWishlistBtn) {
|
|
const productId = addToWishlistBtn.dataset.productId;
|
|
const productName = addToWishlistBtn.dataset.productName;
|
|
|
|
this.trackEvent('add_to_wishlist', {
|
|
'product_id': productId,
|
|
'product_name': productName
|
|
});
|
|
}
|
|
});
|
|
|
|
// Remove from Wishlist
|
|
document.addEventListener('click', (e) => {
|
|
const removeFromWishlistBtn = e.target.closest('[data-remove-from-wishlist]');
|
|
if (removeFromWishlistBtn) {
|
|
const productId = removeFromWishlistBtn.dataset.productId;
|
|
const productName = removeFromWishlistBtn.dataset.productName;
|
|
|
|
this.trackEvent('remove_from_wishlist', {
|
|
'product_id': productId,
|
|
'product_name': productName
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Custom Events Tracking
|
|
*/
|
|
trackCustomEvents() {
|
|
// Search Events
|
|
this.trackSearchEvents();
|
|
|
|
// Filter Events
|
|
this.trackFilterEvents();
|
|
|
|
// Navigation Events
|
|
this.trackNavigationEvents();
|
|
|
|
// Form Events
|
|
this.trackFormEvents();
|
|
|
|
// Error Events
|
|
this.trackErrorEvents();
|
|
}
|
|
|
|
/**
|
|
* Search Events Tracking
|
|
*/
|
|
trackSearchEvents() {
|
|
const searchForm = document.querySelector('[data-search-form]');
|
|
if (searchForm) {
|
|
searchForm.addEventListener('submit', (e) => {
|
|
const searchTerm = e.target.querySelector('[name="q"]')?.value;
|
|
const searchResults = this.getSearchResultsCount();
|
|
|
|
this.trackEvent('search', {
|
|
'search_term': searchTerm,
|
|
'results_count': searchResults
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Filter Events Tracking
|
|
*/
|
|
trackFilterEvents() {
|
|
document.addEventListener('change', (e) => {
|
|
const filterElement = e.target.closest('[data-filter]');
|
|
if (filterElement) {
|
|
const filterType = filterElement.dataset.filter;
|
|
const filterValue = e.target.value;
|
|
|
|
this.trackEvent('filter_applied', {
|
|
'filter_type': filterType,
|
|
'filter_value': filterValue
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Navigation Events Tracking
|
|
*/
|
|
trackNavigationEvents() {
|
|
// Category Navigation
|
|
document.addEventListener('click', (e) => {
|
|
const categoryLink = e.target.closest('[data-category-link]');
|
|
if (categoryLink) {
|
|
const categoryName = categoryLink.dataset.categoryName;
|
|
const categorySlug = categoryLink.dataset.categorySlug;
|
|
|
|
this.trackEvent('category_view', {
|
|
'category_name': categoryName,
|
|
'category_slug': categorySlug
|
|
});
|
|
}
|
|
});
|
|
|
|
// Pagination
|
|
document.addEventListener('click', (e) => {
|
|
const paginationLink = e.target.closest('[data-pagination]');
|
|
if (paginationLink) {
|
|
const pageNumber = paginationLink.dataset.pageNumber;
|
|
|
|
this.trackEvent('pagination', {
|
|
'page_number': pageNumber,
|
|
'page_path': window.location.pathname
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Form Events Tracking
|
|
*/
|
|
trackFormEvents() {
|
|
// Contact Form
|
|
const contactForm = document.querySelector('[data-contact-form]');
|
|
if (contactForm) {
|
|
contactForm.addEventListener('submit', (e) => {
|
|
this.trackEvent('contact_form_submit', {
|
|
'form_type': 'contact'
|
|
});
|
|
});
|
|
}
|
|
|
|
// Custom Order Form
|
|
const customOrderForm = document.querySelector('[data-custom-order-form]');
|
|
if (customOrderForm) {
|
|
customOrderForm.addEventListener('submit', (e) => {
|
|
const fursuitType = customOrderForm.querySelector('[name="fursuit_type"]')?.value;
|
|
const budget = customOrderForm.querySelector('[name="budget"]')?.value;
|
|
|
|
this.trackEvent('custom_order_submit', {
|
|
'fursuit_type': fursuitType,
|
|
'budget_range': budget
|
|
});
|
|
});
|
|
}
|
|
|
|
// Newsletter Signup
|
|
const newsletterForm = document.querySelector('[data-newsletter-form]');
|
|
if (newsletterForm) {
|
|
newsletterForm.addEventListener('submit', (e) => {
|
|
this.trackEvent('newsletter_signup', {
|
|
'source': 'footer' // or 'popup', 'sidebar'
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Error Events Tracking
|
|
*/
|
|
trackErrorEvents() {
|
|
window.addEventListener('error', (e) => {
|
|
this.trackEvent('javascript_error', {
|
|
'error_message': e.message,
|
|
'error_filename': e.filename,
|
|
'error_lineno': e.lineno,
|
|
'page_path': window.location.pathname
|
|
});
|
|
});
|
|
|
|
// 404 Errors
|
|
if (document.title.includes('404') || window.location.pathname.includes('404')) {
|
|
this.trackEvent('page_not_found', {
|
|
'page_path': window.location.pathname,
|
|
'referrer': document.referrer
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Utility Functions
|
|
*/
|
|
getCartItems() {
|
|
const cartItems = [];
|
|
const itemElements = document.querySelectorAll('[data-cart-item]');
|
|
|
|
itemElements.forEach(item => {
|
|
cartItems.push({
|
|
'item_id': item.dataset.productId,
|
|
'item_name': item.dataset.productName,
|
|
'item_category': item.dataset.productCategory,
|
|
'item_variant': item.dataset.fursuitType,
|
|
'price': parseFloat(item.dataset.productPrice),
|
|
'quantity': parseInt(item.dataset.quantity),
|
|
'currency': 'EUR'
|
|
});
|
|
});
|
|
|
|
return cartItems;
|
|
}
|
|
|
|
getSearchResultsCount() {
|
|
const resultsElement = document.querySelector('[data-search-results-count]');
|
|
return resultsElement ? parseInt(resultsElement.textContent) : 0;
|
|
}
|
|
|
|
getCouponCode() {
|
|
const couponInput = document.querySelector('[name="coupon_code"]');
|
|
return couponInput ? couponInput.value : null;
|
|
}
|
|
|
|
/**
|
|
* Generic Event Tracking
|
|
*/
|
|
trackEvent(eventName, parameters = {}) {
|
|
gtag('event', eventName, {
|
|
...parameters,
|
|
'user_type': this.getUserType(),
|
|
'session_id': this.sessionId,
|
|
'timestamp': Date.now()
|
|
});
|
|
|
|
// Console Log für Development
|
|
if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
|
|
console.log('Analytics Event:', eventName, parameters);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Custom Dimensions Setzen
|
|
*/
|
|
setCustomDimension(dimension, value) {
|
|
gtag('config', 'G-XXXXXXXXXX', {
|
|
[dimension]: value
|
|
});
|
|
}
|
|
|
|
/**
|
|
* User Properties Setzen
|
|
*/
|
|
setUserProperty(property, value) {
|
|
gtag('set', 'user_properties', {
|
|
[property]: value
|
|
});
|
|
}
|
|
}
|
|
|
|
// Analytics initialisieren
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
window.kasicoAnalytics = new KasicoAnalytics();
|
|
console.log('Kasico Analytics initialized');
|
|
});
|
|
|
|
// Performance Monitoring
|
|
if ('performance' in window) {
|
|
window.addEventListener('load', () => {
|
|
setTimeout(() => {
|
|
const perfData = performance.getEntriesByType('navigation')[0];
|
|
const loadTime = perfData.loadEventEnd - perfData.loadEventStart;
|
|
const domContentLoaded = perfData.domContentLoadedEventEnd - perfData.domContentLoadedEventStart;
|
|
|
|
if (window.kasicoAnalytics) {
|
|
window.kasicoAnalytics.trackEvent('page_performance', {
|
|
'load_time': loadTime,
|
|
'dom_content_loaded': domContentLoaded,
|
|
'page_path': window.location.pathname
|
|
});
|
|
}
|
|
}, 0);
|
|
});
|
|
}
|