Facebook Pixel og Event codes

Du har måske opdaget, at du nogle gange får vist annoncer på Facebook for de hjemmesider eller webshops, du har besøgt for nyligt? Det sker fordi ejeren af det websted, du har besøgt, har installeret en såkaldt Facebook Pixel på siden.

Facebook pixel er en lille stump kode, der bruges til at registrere de Facebook-brugere, som besøger siden og derefter sender informationer om dit besøg tilbage til Facebook. Når de så efterfølgende logger på deres Facebook-konto, dukker der annoncer op for den pågældende side.

Begivenheder/Events er handlinger, der finder sted på din webshop. Med en Event kode kan du spore disse handlinger.

Facebook har ni standard events, dog er indtil videre kun 3 af dem supporteret af vores webshop løsning; Add to Cart, View Content samt Purchase.

Integrering af pixels og event codes

Facebook pixels og event codes skal integreres i shoppen via ‘Integration’ -> ‘Øvrige integrationer’.

Det skal angives hvilke sider koden skal vises på, samt hvor placeringen på siden skal være. Derudover skal en stump kode skal sættes ind.

Der skal oprettes en ny integration for hver pixel/event code.

Facebook Pixel base code

Først skal der sættes en basis kode ind, på samtlige sider, som definerer hvilken shop det omhandler.

Det kræver at du først opretter en Facebook Pixel på din annoncekonto i Facebook Ads Manager (https://www.facebook.com/ads/manager). Det gør du således:

1. Klikke på menuen med 3 streger – øverst i venstre hjørne.

2. Vælge Pixels (under Events ‘Manager).

3. Klikke på Create pixel-knappen og derefter navngive den.

4. Vælge hvordan du vil implementere koden på din shop – “Kopier og indsæt koden”

5. Kopiere hele koden (du må ikke rette/ændre i den!)

6. Åbne din webshop administration – og gå til ‘Integration’ -> ‘Øvrige integrationer’

7. Trykke på knappen “Tilføj ny Øvrige integrationer”

8. Angive en titel fx. Facebook Pixel Basis Kode

9. Vælge Sider: Alle Sider

10. Vælge Position:  “head”

11. Indsætte koden hele koden

12. Trykke Gem

Nu er selve Facebook Pixel koden integreret i din shop, og du er klar til Event Codes.

Vær opmærksom på, at der er forskel på den kode du skal angive, alt efter om du bruger varianter eller ej på din webshop!

Gå tilbage til Facebook Ads manager og SPRING OVER deres Event Code opsætning – og følg i stedet denne guide.

Facebook Pixel Event: Add to Cart

For at oprette en Facebook Pixel Event Code til Add to Cart, skal du gøre følgende:

1. Åbne din webshop administration – og gå til ‘Integration’ -> ‘Øvrige integrationer’

2. Trykke på knappen “Tilføj ny Øvrige integrationer”

3. Angive en titel fx. Facebook Pixel Event: Add to Cart

4. Vælge Sider: Alle Sider

5. Vælge Position:  Body slutning

6. Indsætte denne kode (ikke ændre i den)! og trykke Gem.

OBS. Har du en shop med varianter – skal du bruge kode nr. 2. 

<script>$(function() {

$(document).on('click', '.buy-button', function() {

var articleId;
var $articleBuy = $(this).closest('.property.buy'); // Product page

/**
* Temporarily getting id from .product
* until Product's Main Article ID is available in Category page as a .vid[d+] class on the .property.buy element
*/
var $product = $(this).closest('.product'); // Category page

if ($product.length) {
var vidMatch = $product.attr('class').match(/vid(d+)/);
articleId = (vidMatch || [])[1];
}

if (!articleId && $articleBuy.length) {
var vidMatch = $articleBuy.attr('class').match(/vid(d+)/);
var pidMatch = $articleBuy.attr('class').match(/id(d+)/);
articleId = (vidMatch || pidMatch || [])[1] || articleId;
}

fbq('track', 'AddToCart', {
content_ids: [articleId || '{{ product.id }}'],
content_type: 'product',
});
});

})</script>

OBS. Har du en shop med varianter – skal du bruge nedenstående kode!

<script>$(function() {

$(document).on('click', '.buy-button', function() {

var articleId;
var $articleBuy = $(this).closest('.property.buy'); // Product page

/**
* Temporarily getting id from .product
* until Product's Main Article ID is available in Category page as a .vid[d+] class on the .property.buy element
*/
var $product = $(this).closest('.product'); // Category page

if ($product.length) {
var vidMatch = $product.attr('class').match(/vid(d+)/);
articleId = (vidMatch || [])[1];
}

if (!articleId && $articleBuy.length) {
var vidMatch = $articleBuy.attr('class').match(/vid(d+)/);
var pidMatch = $articleBuy.attr('class').match(/id(d+)/);
articleId = (vidMatch || pidMatch || [])[1] || articleId;
}

fbq('track', 'AddToCart', {
content_ids: [articleId || '{{ product.id }}'],
content_type: 'product_group',
});
});

})</script>

Facebook Pixel Event: ViewContent

For at oprette en Facebook Pixel Event Code til View Content, skal du gøre følgende:

1. Åbne din webshop administration – og gå til ‘Integration’ -> ‘Øvrige integrationer’

2. Trykke på knappen “Tilføj ny Øvrige integrationer”

3. Angive en titel fx. Facebook Pixel Event: View Content

4. Vælge Sider: Produktsider

5. Vælge Position:  Body slutning

6. Indsætte denne kode (ikke ændre i den)! og trykke Gem.

OBS. Har du en shop med varianter – skal du bruge kode nr. 2!

<script>
fbq('track', 'ViewContent', {
content_type: 'product',
content_ids: '{{ product.id }}',
content_name: '{{ product.title }}',
value: '{{ product.price }}',
currency: "{{ get_setting('DEFAULT_CURRENCY') }}",
});
</script>

OBS. Har du en shop med varianter – skal du bruge nedenstående kode!

<script>
fbq('track', 'ViewContent', {
content_type: 'product_group',
content_ids: '{{ product.id }}',
content_name: '{{ product.title }}',
value: '{{ product.price }}',
currency: "{{ get_setting('DEFAULT_CURRENCY') }}"
});
</script>

Facebook Pixel Event: Purchase

For at oprette en Facebook Pixel Event Code til Purchase, skal du gøre følgende:

1. Åbne din webshop administration – og gå til ‘Integration’ -> ‘Øvrige integrationer’

2. Trykke på knappen “Tilføj ny Øvrige integrationer”

3. Angive en titel fx. Facebook Pixel Event: Purchase

4. Vælge Sider: Ordre gennemført

5. Vælge Position:  Body slutning

6. Indsætte denne kode (ikke ændre i den)!  og trykke Gem.

OBS. Har du en shop med varianter – skal du bruge kode nr. 2.

<script>
fbq('track', 'Purchase', {
content_ids: window.obbPurchasedProducts,
content_type: 'product',
value: '{{ order.total }}',
currency: "{{ get_setting('DEFAULT_CURRENCY') }}"
});
</script>

OBS. Har du en shop med varianter – skal du bruge nedenstående kode!

<script>
fbq('track', 'Purchase', {
content_ids: window.obbPurchasedProducts,
content_type: 'product_group',
value: '{{ order.total }}',
currency: "{{ get_setting('DEFAULT_CURRENCY') }}"
});
</script>

7. Gå til ‘Indhold og Layout’ -> ‘Kode editor’

8. Gå til ‘Kerne/Standardfiler’ -> ‘FECheckout’ -> “success.html.twig”

9. Indsæt denne kode næst nederst, lige før “% endblock %” – og tryk ‘Gem ændringer’ (siger den at der er en syntax fejl, så ignorer det).

<script>
window.obbPurchasedProducts = [];

{% for articleLine in order.articleLines %}
obbPurchasedProducts.push({{ articleLine.originalProductArticle.id }});
{% endfor %}
</script>

OBS.

Når du har ændret i Kode editor, så flytter den fil du har ændret til ‘Mine filer’

Produkt Katalog

Det er en god ide at tilknytte et produkt katalog. Du kan evt. selv oprette det manuelt via avecdo.com.
Kontakt evt. bsocial.dk for at få hjælp til at opsætte dynamisk remarketing på Facebook og Instagram.