SSGTM Code-Vorlagen für Prestashop 1.6

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

Product Impression

Ein Kunde sieht Produkte auf einer Seite mit einer Liste von Produkten. Sobald sie in den Sichtbereich kommen, schicken wir die Daten an den GTM.

Snippet pages: index,category,search

function ssgtmSendProductImpressions() {
    var impressions = [];
    
    $(".product-container:visible").each(function(index, e) {
        if ($(this).visible(true, true)) {
            var position = $(this).prevAll().length;
            var addToCartBtn = $(this).find("a.ajax_add_to_cart_button");
            impressions.push({
                id: addToCartBtn.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 klick ein Produkt auf einer Seite mit einer Liste von Produkten.

Snippet pages: index,category,search

$(".product_img_link").on("click", function(e, options) {
    var parent = $(this).parents(".ajax_block_product");
    var position = parent.prevAll().length;
    var productId = parent.find(".ajax_add_to_cart_button").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 ruft die Detailseite eines Produkts auf.

Snippet pages: product

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

Add To Cart

Ein Kunde fügt ein Produkt zum Warenkorb hinzu.

Snippet pages: product

$("#add_to_cart > button[name=Submit]").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: order

$(document).ready(function() {
    $(".cart_quantity_delete").on("click", function(e) {
        var href = $(this).attr("href");
        var regex = /id_product=([0-9]+)/g;
        var matches = regex.exec(href);
        var productId = matches && matches.length > 1 ? matches[1] : null;

        if (productId) {
            dataLayer.push({
                event: "ssgtm.product.remove",
                ecommerce: {
                    remove: {
                        actionField: {
                            list: "cart"
                        },
                        products: [{
                            id: productId
                        }]
                    }
                }
            });
        }
    });
});

Checkout

Ein Kunde hat die Kasse erreicht und beginnt zu kaufen.

Snippet pages: order,authentication

$(document).ready(function() {
    var steps = $("ul#order_step li");
    if (steps && steps.length > 0) {
        var observer = new MutationObserver(function(mutations) {
            ssgtmOnCheckoutStepChanged($("ul#order_step li.step_current"));
        });
        
        steps.each(function(index, element) {
            observer.observe(steps[index], { attributes: true });
            $(element).data("index", index + 1);
        });
        
        ssgtmOnCheckoutStepChanged($("ul#order_step li.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 bestellt.

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
            }
        }
    });
}