SSGTM Code-Vorlagen für Prestashop 1.7

Die nachfolgenden Code-Vorlagen sind für das Standard-Theme von Prestashop 1.7. Du kannst sie nutzen, um an deine Bedürfnisse anzupassen.

Product Impression

Ein Kunde sieht ein Produkt auf einer Seite mit einer Liste von Produkten. Sobald es in seinen Sichtbereich kommt, informieren wir den GTM.

Snippet pages: index,category,search

function ssgtmSendProductImpressions() {
    var impressions = [];
    
    $(".product-miniature:visible").each(function(index, e) {
        if ($(this).visible(true, true)) {
            var position = $(this).prevAll().length;
            impressions.push({
                id: $(this).data("id-product"),
                position: position,
                list: window.gtmData.page
            });
        }
    });
    
    if (impressions && impressions.length > 0) {
        window.dataLayer.push({
            event: "ssgtm.product.impression",
            ecommerce: {
                currencyCode: window.gtmData.currency.code,
                impressions: impressions
            }
        });
    }
}

$(window).scroll($.debounce(250, function (e) {
    ssgtmSendProductImpressions();
}));

ssgtmSendProductImpressions();

Product Click

Ein Kunde klickt ein Produkt in einer Liste mit mehreren Produkten.

Snippet pages: index,category,search

$(".product-miniature a").on("click", function(e, options) {
    var position = $(this).parents(".product-miniature").prevAll().length;
    var productId = $(this).parents(".product-miniature").data("id-product");
    
    window.dataLayer.push({
        event: "ssgtm.product.click",
        ecommerce: {
            click: {
                actionField: {
                    list: window.gtmData.page
                },
                products: [{
                    id: productId,
                    position: position
                }]
            }
        }
    });
});

Product Details Impression

Ein Kunde öffnet die Detailseite eines Produkts.

Snippet pages: product

window.dataLayer.push({
    event: "ssgtm.product.details",
    ecommerce: {
        detail: {
            products: window.gtmData.products
        }
    }
});

Add To Cart

Ein Kunde legt ein Produkt in den Warenkorb.

Snippet pages: product

$(".add-to-cart").click(function(e) {
    var qty = $("input#quantity_wanted").val();
    var product = window.gtmData.products[0];
    window.dataLayer.push({
        event: "ssgtm.product.add",
        ecommerce: {
            currencyCode: window.gtmData.currency.code,
            add: {
                products: [{
                    id: product.id,
                    name: product.name,
                    price: product.price,
                    quantity: qty
                }]
            }
        }
    });
});

Remove from Cart

Ein Kunde entfernt ein Produkt aus dem Warenkorb.

Snippet pages: cart

$(".remove-from-cart").click(function(e) {
    dataLayer.push({
        event: "ssgtm.product.remove",
        ecommerce: {
            remove: {
                actionField: {
                    list: "cart"
                },
                products: [{
                    id: $(this).data("id-product")
                }]
            }
        }
    });
});

Checkout

Ein Kunde geht zur Kasse und beginnt den Einkauf abzuschließen.

Snippet pages: order

var target = document.querySelector("section.checkout-step");
var observer = new MutationObserver(function(mutations) {
    ssgtmOnCheckoutStepChanged($("section.checkout-step.-current"));
});

observer.observe(target, { attributes: true });
$("section.checkout-step").each(function(index, element) {
  $(element).data("index", index + 1);
});

ssgtmOnCheckoutStepChanged($("section.checkout-step.-current"));

function ssgtmOnCheckoutStepChanged(element) {
    if (!element) { return; }
    
    window.dataLayer.push({
        event: "ssgtm.checkout",
        ecommerce: {
            checkout: {
                actionField: {"step": $(element).data("index")}
            },
            products: window.gtmData.products
        }
    });
}

Order Confirmation

Ein Kunde hat einen Kauf getätigt.

Snippet pages: order-confirmation

var tx = window.gtmData ? window.gtmData.transaction : null;
if (tx) {
    window.dataLayer.push({
        event: "ssgtm.purchase",
        ecommerce: {
            currencyCode: window.gtmData.currency.code,
            purchase: {
                actionField: {
                    id: tx.id,
                    reference: tx.reference,
                    affiliation: tx.store,
                    revenue: tx.total,
                    tax: tx.tax,
                    shipping: tx.shipping
                },
                products: window.gtmData.products
            }
        }
    });
}