Kuinka asentaa Facebook pikseli Word Press-sivuillesi? – 2 tapaa

19.12.2020 | Facebook-markkinointi, Google Tag Manager

Aina markkinointia asiakkailleni suunnitellessani, kartoitan asiakkaani digimarkkinoinnin nykyisen tilan ja tulevaisuuden tavoitteet. Nykyistä tilaa kartoittaessani esitän aina jossain kohtaa saman kysymyksen: ”Onko teidän sivuilla Facebook pikseli käytössä?” Aina kun saan kieltävän vastauksen, tiedän tasan tarkkaan mikä korjataan ensimmäisenä.

Facebook pikselillä tarkoitetaan nettisivuille asennettavaa evästettä, joka välittää sivuston kävijätietoja Facebookin dashboardille. Pikseli lyhykäisyydessään auttaa siis jäljittämään somemainosten kautta sivuillesi tulleiden kävijöiden liikkeitä ja sielunelämää. Facebook pikselillä pystyt siis tarkasti seurata mitä mainostasi klikanneet ihmiset tekevät sivuillasi, sekä pystyt muodostamaan kohderyhmiä sivuillasi käyneistä ihmisistä oman mielesi mukaan.

Tässä artikkelissa näytän sinulle kaksi tapaa, kuinka yhdistät Facebook pikselin WordPress-sivuillesi, ja aloitat mainonnan tulosten mittaamisen markkinoinnin ammattilaisten tapaan.

Facebook pikselin asentaminen WordPress-kumppani integraatiota käyttäen

Aloitetaan tästä helpommasta ja yksinkertaisemmasta tavasta asentaa Facebook pikseli. Tässä tavassa sinun ei tarvitse kopioida tai syöttää koodia mihinkään. Jotta päästään alkuun, tarvitset tietysti oman Facebook Business Manager käyttäjän, jos sinulla ei vielä sellaista ole. Oman Facebook Business Manager tilisi luot helposti täältä. Kun olet luonut tilin itsellesi, pääset luomaan pikseliä navigoimalla Business Managerin valikossa seuraavasti:

  1. Valitse palloruudukko vasemmasta yläkulmasta, josta sinulle aukeaa uusi valikko oikealle.
  2. Klikkaa tapahtumien hallintaa, joka avaa vielä uuden valikon
  3. Tapahtumien hallinnasta valitse ”Tietolähteet”, jolloin sinulle aukeaa pikselinäkymä.
Facebook pikseli
  1. Lisätään uusi tietolähde, jonka lähteeksi valitaan verkkosivu
  2. Vahvistetaan valinta ja klikataan ”Aloita”

Tässä esimerkissä pikseli asennetaan vaivattomasti käyttäen kumppani integraatiota, joten valitaan oikeanpuolimmainen vaihtoehto ”Käytä kumppania”.

Tässä esimerkissä halutaan asentaa Facebook pikseli WordPress -pohjaiselle sivulle, joten scrollataan kumppanivalikossa ihan alas, josta löytyykin WordPress valinta hienon logon kanssa.

Facebook antaa seuraaviin vaiheisiin itsessään jo todella kattavat ohjeet askel askeleelta. Seuraavaksi luvassa olisi Facebook pikseli -lisäosan lataaminen Facebookin omasta linkistä, tai vaihtoehtoisesti sen voi käydä lataamassa WordPressin lisäosat välilehdeltä, josta sen löytää nimellä ”Official Facebook Pixel”.

Seuraavaksi aktivoidaan lisäosa käyttöön sivuille ja syötetään pikselin tunnus WordPressiin lisäosan asetuksissa olevaan kenttään. Pikselin tunnuksen löydät tietolähteidesi etusivulta. Kun tämä työvaihe on tehty, on aika testata pikseliä.

Pikselin tunnus on numerorimpsu jonka voi kopioida tietolähteiden näkymästä viemällä hiiren sen päälle ja klikkaamalla sitä, jolloin se automaattisesti kopioituu leikepöydälle.
Official Facebook pikselin asetukset ovat todella yksikertaiset. Kuvassa keltaisella merkattu kenttä on ainoa jota tarvitsee käpälöidä.

Pikselin testaamiseen on muutama keino, sen voi testata Business Managerin asetuksista ”Testaa tapahtumia” välilehdeltä. Itse käytän pikselin testaamiseen Google selaimen laajennusta nimeltä Pixel Helper.

Business Managerissa pikselin toimivuuden testaaminen ”Testaa tapahtumia” välilehdessä. Pikseli näyttää vasemmalla vihreää valoa ja tapahtuman vastaanottoaika, joka on tässä tapauksessa ”pageviewin” vastaanottoaika, täsmää testini kanssa.
Toinen keino on käyttää Chrome selaimen Pixel Helper-lisäosaa, joka vilkuttaa viherää valoa ylhäällä Toolbarissa kun se löytää sivulta toimivan pikselin.

Pikselin asentaminen Google Tag Manageria käyttäen

Jos haluaa alkujaan lähteä vähän laajemmalla valmitautumisella liikkelle, suosittelen suoraan pikselin asentamista Google Tag Managerin avulla. Tag Managerissa kaikki sivun seurantoja on helppo hallita yhden katon alta ja sen avulla sivuille voi myös asentaa Googlen analyticsin ja paljon myös vähän kustomoidumpia seurantaratkaisuja.

Alkuun pääsee hyvin omalla Google käyttäjällä, jolla tulee käydä luomassa oma Tag Manager käyttäjä, joka onnistuu tästä. Tag Manager ei vaadi paljoa tietoja käyttäjää tehdessä, se hyödyntää jo pitkälti aikaisempia Googlelle antamiasi tietoja. Uutta tietoa pääset syöttämään siinä vaiheessa kun määritetään uusi Container, eli tietolähde Tag Manageriin.

Käyttäjän luominen on melko yksinkertaista, täytyy vain muistaa nimetä käyttäjä ja container ja valita millaiseen lähteeseen se tulee. Tässä esimerkissä käytetään WordPress sivua, target platform on ”Web”.

Tag Manager tarjoaa heti alkuun asennuskoodia, joka pitäisi käydä syöttämässä sivun koodiin. Sitä me ei tässä esimerkissä käytetä, vaan kierretään se lisäosalla. Tag Managerin asentamiseen voi esimerkiksi käyttää Thomas Geiger kätevää Google Tag Manager lisäosaa.

Lisäosan löytää kuvasta löytyvillä tiedoilla. Sen kun käy lataamassa ja aktivoimassa niin on jo pitkällä.

Tag Managerin hallintapaneelista halutaan tällä hetkellä saada vain irti oman Tag Managerisi tunniste, jonka löytyy alla olevasta kuvasta keltaisen ympyrän sisältä. Kirjainsarja halutaan kopioida ja syöttää WordPressiin Tag Manager lisäosan asetuksiin.

Tag Manager lisäosa on siitä kätevä että sen kanssa ei voi mennä pieleen. Simppelissä asennuksessa kajotaan ainoastaan keltaisella merkittyyn kenttään, johon tulee Google Tag Manager-tunnus.

Seuraavaksi onkin sitten aika luoda ensimmäinen tägi Tag Managerin puolelle:

  1. Klikataan vasemmalta menusta Tags
  2. Klikataan oikealta näkymästä ”New”

Täginsä voi nimetä ihan miten tykkää, mutta suosittelen nimeämään selkeästi, sillä jatkossa näitä tägejä saattaa olla aika montakin saman katon alla. Tägin nimeämisen jälkeen jatketaan konfiguroimisella.

Tägin tyypiksi valitaan Custom HTML, sillä Google ei suoraan tue Facebookin työkaluja samalla tavalla kuten omiaan, esimerkiksi analyticisiä.

Seuraavaksi tarvitaan taas Facebook pikselin koodi, joka löytyy Business Managerista, kuten aiemmassa esimerkissä katsottiin. Riittää kun koodin kopioi sellaisenaan, ja syöttää Tag Managerin puolella uuden tägin HTML-kenttään.

Business Managerin puolelta voi avata vain pikselin asennusikkunan ja kopioida koodin leikepöydälle.
Koodin voi vaan liittää sille tarkoittettuun kenttään Tag Managerin puolella.

Lopuksi tägiä määrittäessä valitaan triggeriksi ”All pages”, joka tarkoittaa että kaikki sivut laukaisevat tägin.

Tämän jälkeen tägin voi tallentaa ja sen jälkeen on aika testata toimivuutta. Hyvä käytäntö on käyttää testaamiseen ”Preview modea” josta voi katsella muutokset ennen kuin niitä tallentelee. Tämä pikselin asennus on sen verran ysinkertainen homma, että voi melkeinpä suoraan tallentaa muutokset.

Preview modea on hyvä käyttää jos muutoksia tulee paljon kerralla, ja haluaa tarkistaa niiden toimivuuden ennen julkaisua.

Tag Managerin toimivuuden itse testasin tällä kertaa Facebook pixel Helperillä ja Google Tag assistantilla, jotka ovat molemmat Chromen selaimen lisäosia. Ylhäällä selaimen toolbarissa näkyy että lisäosat löysivät molemmat pikselin, sekä Tag Managerin sivuilta.

Toimivuuden merkkivalot

Tässä oli lyhykäisyydessään pikselin asentaminen WordPress sivuille. En kerennyt tässä tekstissä vielä kokonaan avata kuinka pikseliä sitten hyödynnetään esimerkiksi verkkokaupan kanssa, mutta siitä kirjoittelen todennäköisesti jossain vaiheessa.

Kysy mitä vaan digimarkkinointiin liittyen. Vastaan kaikille, eikä maksa mitään! 👇

Ota yhteyttä!

Vili Partanen
info@vilipartanen.fi