Obsługa Facebook Pixel w szablonach

Spis treści

Facebook Pixel w szablonach

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

Wskazówka

W tym artykule trzeba będzie wprowadzać zmiany w plikach js. Z tego artykułu dowiesz się jak je minifikować.

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' -%}
    <script>
        var fbDL={{ page.FbDL }};
        !function(){var e;while(e=fbDL.pop())fbq.push(e);}();
    </script>
{% endif -%}

{% if order.OrderStep != 'ThankYou' -%}

var fbDL={{ page.FbDL }};

!function(){var e;while(e=fbDL.pop())fbq.push(e);}();

</script>

{% endif -%}

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


<script>
    !function(){
        var fbDLC={{ page.FbDL }};
        fbDLC.forEach(function(z){fbq.push(z);});
    }();
</script>

!function(){

var fbDLC={{ page.FbDL }};

fbDLC.forEach(function(z){fbq.push(z);});

}();

</script>

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

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

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

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

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

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

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 -%}
    <script>
        var fbDL={{ page.FbDL }};
        !function(){var e;while(e=fbDL.pop())fbq.push(e);}();
    </script>
{% endif -%}

{% 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 -%}

var fbDL={{ page.FbDL }};

!function(){var e;while(e=fbDL.pop())fbq.push(e);}();

</script>

{% endif -%}

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


<script>
    !function(){
        var fbDLC={{ page.FbDL }};
        fbDLC.forEach(function(z){
            if(z[1] != 'InitiateCheckout' || (z[1] == 'InitiateCheckout' && window.InitiateCheckout != true)){
                fbq.push(z);
                if(z[1] == 'InitiateCheckout'){
                    window.InitiateCheckout = true;
                }
            } 
        });
    }();
</script>

!function(){

var fbDLC={{ page.FbDL }};

fbDLC.forEach(function(z){

if(z[1] != 'InitiateCheckout' || (z[1] == 'InitiateCheckout' && window.InitiateCheckout != true)){

fbq.push(z);

if(z[1] == 'InitiateCheckout'){

window.InitiateCheckout = true;

}

});

}();

</script>

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

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

$.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;
        }
    }
}

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

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

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'

}

);

}

Facebook Pixel w szablonach

Szafir

Topaz

Facebook Pixel w szablonach

Szafir

Topaz

Czy ten artykuł był pomocny?

Społeczność Comarch

Oferta e-Commerce

Przydatne linki

Kontakt