Obsługa Facebook Pixel w szablonach

Facebook Pixel w szablonach

W tym artykule dowiesz się jak zmodyfikować swój szablon, aby obsłużyć działanie narzędzia Facebook Pixel.

Szafir

Na początku pliku _layout.html znajduje się element head. W tym elemencie na samym końcu wklej poniższy kod:

{{ globalSettings.FbPixel.Script }}
{% if order.OrderStep != 'ThankYou' -%}
    
{% endif -%}

Następnie w pliku order/thx.html, na końcu głównego kontenera wklej poniższy kod:

Teraz w pliku js/init.js znajdź funkcję post, a w niej linijkę z frazą var obj = app.getTemplate(e);. Nad nią wklej poniższy kod:

if(form.hasClass('add-to-cart-lq')){
    if(form.hasClass('add-set-to-cart-lq')){
        var setProducts = form.find('.set-product-lq');
        var setProductsForFBPixel = [];
        var totalValue = 0;
        setProducts.each(function () {
	    var setProductFBP = {
	        id: $(this).data('id').toString(),
		content_name: $(this).data('name'),
		value: Number($(this).data('price').toString().replace(',','.')),
		quantity: $(this).data('quantity')
	    }
	    totalValue = totalValue + (Number($(this).data('price').toString().replace(',','.')) * Number($(this).data('quantity').toString().replace(',','.')));
            setProductsForFBPixel.push(setProductFBP);
        });
	if(typeof fbq !== 'undefined') {
	    fbq('track', 'AddToCart',
		{
		    value: totalValue,
		    currency: __curr,
		    content_type: 'product',
		    contents: setProductsForFBPixel
		}
	    );
	}
    } else {
        var input = form.find('[name=quantity]');
	if(typeof fbq !== 'undefined') {
	    fbq('track', 'AddToCart',
	        {
		    content_ids: $('[data-product-id]').data('product-id').toString(),
		    content_name: input.data('name'),
		    value: Number(input.data('price-number').replace(',','.')),
		    currency: __curr,
		    quantity: input.val(),
		    content_type: 'product'
		}
	    );
	}
    }
}

Dalej w tym samym pliku (js/init.js) znajdź funkcję signUpSuccess, a w niej linijkę z frazą $.get(”, {__collection: 'customer.UserId32′}, function (result) {. Jest to request, w którym należy wkleić poniższy kod:

var userId = result.collection;
if(typeof fbq !== 'undefined') {
    fbq('track', 'CompleteRegistration', {status: true, content_name: userId});
}

Jeśli nie ma tego requesta w tej funkcji to przed linijką app.replace(url, delay, form); dodaj poniższy kod:

$.get('', {__collection: 'customer.UserId32'}, function (result) {
    var userId = result.collection;
    if(typeof fbq !== 'undefined') {
	fbq('track', 'CompleteRegistration', {status: true, content_name: userId});
    }
});

Następnie w pliku js/init-ui1.js znajdź funkcję serialAddingToCart, a w niej linijkę z frazą if (resGuardian) {. Na samym początku tego warunku wklej poniższy kod:

var productsToFBPixel = [];
var totalValue = 0;
for(var i=0; i<products.length; i++){
    var productFBP = { id: products[i].productId.toString(), content_name: products[i].productName, value: products[i].productPriceNumber, quantity: products[i].productQuantity };
    totalValue = totalValue + (products[i].productPriceNumber * products[i].productQuantity);
    productsToFBPixel.push(productFBP);
}
if(typeof fbq !== 'undefined') {
    fbq('track', 'AddToCart',
        {
            value: totalValue,
            currency: __curr,
            content_type: 'product',
            contents: productsToFBPixel
        }
    );
}

Dalej w tym samym pliku (js/init-ui1.js) znajdź funkcję addManyProducts i na samym jej początku dodaj linijkę var productsToFBPixel = null;. Następnie dalej w tej samej funkcji znajdź frazę if(supplyId != undefined){. Pod tym warunkiem wklej poniższy kod:

var productToFBPixel = { id: id, content_name: $('.page-title-lq').text(), value: products[i].brutto, quantity: products[i].quantity };
totalValue = totalValue + (products[i].brutto * products[i].quantity);
if (productsToFBPixel) {
    productsToFBPixel.push(productToFBPixel);
} else {
    productsToFBPixel = [productToFBPixel];
}

Cały czas w tej samej funkcji wyszukaj linijkę $.post(”, { __action: 'Cart/Add’, __csrf: __CSRF, __parameters:JSON.stringify(parameters), __template: 'common/header/client-area.html’ }).then(function (res) {. Na początku tego requesta dodaj poniższy kod:

if(typeof fbq !== 'undefined') {
    fbq('track', 'AddToCart',
        {
            value: totalValue,
            currency: __curr,
            content_type: 'product',
            contents: productsToFBPixel
        }
    );
}

Topaz

Na początku pliku base_layout.html znajduje się element head. W tym elemencie na samym końcu wklej poniższy kod:

{{ globalSettings.FbPixel.Script }}
{% if cart.CartEmpty  == true and cart.OrderStep != 'ThankYou' and page.PageId == config.DefinedPages.Order.Id -%}
    {% assign fbInCartNeeded = true -%}
{% endif -%}
{% if fbInCartNeeded or page.PageId != config.DefinedPages.Order.Id -%}
    
{% endif -%}

Następnie na końcu pliku staticElements/cart/cart.html wyszukaj frazę {% endcase %} i wklej pod nią poniższy kod:

Teraz w pliku js/layout.js znajdź funkcję post, a w niej linijkę z frazą } else if (result.action.Action === 'Customer/Register’) {. W tym warunku znajdź linijkę z frazą $.get(”, {__collection: 'customer.UserId32′}, function (result) {. Jest to request, w którym należy wkleić poniższy kod:

var userId = result.collection;
if(typeof fbq !== 'undefined') {
    fbq('track', 'CompleteRegistration', {status: true, content_name: userId});
}

Jeśli nie ma tego requesta w tym warunku to na końcu warunku dodaj poniższy kod:

$.get('', {__collection: 'customer.UserId32'}, function (result) {
    var userId = result.collection;
    if(typeof fbq !== 'undefined') {
        fbq('track', 'CompleteRegistration', {status: true, content_name: userId});
    }
});

Dalej w tym samym pliku (js/layout.js) wyszukaj linijkę z frazą document.body.appendChild(formElement); i wklej nad nią poniższy kod:

var k,fbDLC=JSON.parse(result.collection['page.FbDL']);
for(k in fbDLC){
    if(fbDLC[k][1] != 'InitiateCheckout' || (fbDLC[k][1] == 'InitiateCheckout' && window.InitiateCheckout != true)){
        fbq.push(fbDLC[k]);
        if(fbDLC[k][1] == 'InitiateCheckout'){
            window.InitiateCheckout = true;
        }
    }
}

Następnie w tym samym pliku (js/layout.js) wyszukaj funkcję addToCart, a w niej linijkę z frazą if (result.action.Result) {. Na samym początku tego warunku wklej poniższy kod:

if(typeof fbq !== 'undefined') {
    fbq('track', 'AddToCart',
        {
            content_ids: $('[name=productId]').eq(0).val(),
            content_name: $('.js-product-details__name').text(),
            value: Number($('[name=price]').val().replace(',','.')),
            currency: __curr,
            quantity: $('.quantity__field-js').val(),
            content_type: 'product'
        }
    );
}

Cały czas w tym samym pliku (js/layout.js) wyszukaj funkcję addSetToCart, a w niej linijkę z frazą if (result.action.Result) {. Na początku tego warunku dodaj poniższy kod:

var setProducts = form.find('.js-product-set__item');
var setProductsForFBPixel = [];
setProducts.each(function () {
    var setProductFBP = {
        id: $(this).data('id').toString(),
        content_name: $(this).data('name'),
        value: Number($(this).data('price').replace(',','.')),
        currency: __curr,
        quantity: $(this).data('quantity')
    }
    setProductsForFBPixel.push(setProductFBP);
});
if(typeof fbq !== 'undefined') {
    fbq('track', 'AddToCart',
        {
            contents: setProductsForFBPixel,
            content_type: 'product'
        }
    );
}