Meta Pixel

Lanjutan

Tips untuk penerapan alternatif, menggunakan Pixel dengan aplikasi web satu halaman, dan melacak konversi dengan klik tombol dan pengguliran halaman.

Peraturan Perlindungan Data Umum

Jika Anda menjalankan bisnis di negara yang tunduk pada Peraturan Perlindungan Data Umum (GDPR), bacalah dokumen GDPR kami untuk mempelajari cara mematuhinya.

Instal Pixel menggunakan Tanda IMG

Meskipun Anda dapat menggunakan tanda IMG untuk menginstal Pixel, kami sarankan Anda merujuk ke Panduan penerapan kami untuk alternatif.

Jika Anda perlu menginstal Pixel menggunakan penerapan ringan, Anda dapat menginstalnya dengan tanda <img>. Untuk melakukan ini, tambahkan kode di bawah ini antara tanda <noscript> pembuka dan penutup dalam header atau badan situs web Anda, lalu ganti {pixel-id} dengan ID pixel Anda dan {standard-event} dengan Peristiwa Standar.

<img src="https://www.facebook.com/tr?id=&#123;pixel-id&#125;&amp;ev=&#123;standard-event&#125;" height="1" width="1" style="display:none"/>

Pixel yang diinstal menggunakan tanda <img> juga mendukung parameter, yang dapat Anda sertakan dalam string kueri. Contoh:

<img src="https://www.facebook.com/tr?id=12345
  &amp;ev=ViewContent
  &amp;cd[content_name]=ABC%20Leather%20Sandal
  &amp;cd[content_category]=Shoes
  &amp;cd[content_type]=product
  &amp;cd[content_ids]=1234
  &amp;cd[value]=0.50
  &amp;cd[currency]=USD" height="1" width="1" style="display:none"/>

Batasan

  • Tidak dapat diaktifkan beberapa kali pada setiap pemuatan halaman
  • Tidak dapat melacak peristiwa standar atau khusus yang dipicu oleh interaksi UI (misal: klik tombol)
  • Tunduk pada batasan HTTP GET dalam mengirim data khusus atau URL panjang
  • Tidak dapat dimuat secara asinkron

Contoh penginstalan tanda IMG

Berikut adalah contoh penginstalan tanda IMG Meta Pixel di seluruh halaman utama situs web fiktif menggunakan Pixel fiktif (12345) dan parameter khusus (misalnya: cd[currency]=USD).

Di halaman produk, satu Pixel untuk melacak peristiwa PageView dan Pixel lain untuk melacak peristiwa ViewContent:

<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345&ev=PageView"/> 
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345&ev=ViewContent"/>

Di halaman masukkan ke keranjang, satu Pixel untuk melacak peristiwa PageView dan Pixel lain untuk melacak peristiwa AddToCard, dengan data khusus:

<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345&ev=PageView"/> 
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345&ev=AddToCart&cd[currency]=USD&cd[value]=0.00"/>

Di halaman pembelian, satu Pixel untuk melacak peristiwa PageView dan Pixel lain untuk melacak peristiwa Purchase, dengan data tentang pembelian:

<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345&ev=PageView"/> 
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345&ev=Purchase&cd[currency]=USD&cd[value]=0.00"/>

Pengukuran Peristiwa Agregat Pixel IMG untuk iOS 14.5+

Pengukuran Peristiwa Agregat Meta adalah protokol yang memungkinkan pengukuran peristiwa web dan aplikasi dari pengguna perangkat iOS 14.5 atau yang lebih baru. Model statistik dapat digunakan dan dirancang untuk memberikan tampilan hasil yang lebih lengkap ketika data hilang atau parsial.

Kami sangat merekomendasikan untuk mengikuti bagian Instal Pixel menggunakan tanda IMG dari dokumen ini saat menggunakan tanda IMG Pixel IMG atau untuk melupakan penggunaan tanda IMG dan mengikuti Panduan penerapan kami.

Data Pixel IMG Hilang

Runtime JavaScript

Jika Anda menyiapkan Pixel IMG Anda dengan menggunakan runtime JavaScript untuk membuat kelas Gambar JavaScript tanpa menambahkan kelas Gambar itu ke pohon DOM situs web, contoh: menggunakan pustaka JavaScript pihak ketiga untuk mengirim Pixel IMG Anda, Anda harus menambahkan kode berikut atau Facebook tidak akan menerima data Pixel IMG Anda.

var nativeBridge = window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.receiveImgPixel;
if (nativeBridge) {
    const postObj = {
        id: {pixel-id},
        ev: {standard-event},
        cd: {stringified-custom-data},
        dpo: {data-processing-options},          // Optional CCPA param
        dpoco: {data-processing-option-country}, // Optional CCPA param
        dpost: {data-processing-option-state},   // Optional CCPA param
    };
    nativeBridge.postMessage(JSON.stringify(postObj));
}

Atribut Kotak Pasir

Jika Anda menempatkan IMG Pixel Anda dalam iframe yang memiliki atribut sandbox, Anda harus menambahkan nilai allow-scripts atau Facebook tidak akan menerima data Pixel IMG Anda.

Mengaktifkan AEM untuk skenario pengalihan otomatis

Kami telah memperluas fungsi AEM untuk mempertimbangkan konversi dari semua halaman web terkait pengiklan tempat peristiwa Pixel yang dioptimalkan pengiklan diaktifkan (seperti dalam skenario tertentu di mana pengiklan dapat mengandalkan penyingkat URL atau pengalihan berbasis geografis, mungkin memiliki beberapa lini bisnis atau mungkin bergantung pada agensi untuk menjalankan iklan mereka). Jika Anda termasuk dalam salah satu skenario ini dan ingin mengaktifkan AEM, kami rekomendasikan Anda melakukan hal berikut:

  • Gunakan Meta Pixel yang sama (yaitu, ID Pixel dan pasangan nama peristiwa Pixel yang sama) di seluruh domain relevan yang ingin didapatkan konversinya
  • Pastikan peristiwa AEM yang ingin didapatkan konversinya diprioritaskan di seluruh domain ini

Melacak klik Tombol

Setelah pengunjung menekan tombol, kode JavaScript Meta Pixel secara otomatis mendeteksi dan meneruskan kolom formulir yang relevan ke Meta.

Misalnya Anda memiliki sebuah situs web e-commerce dan tombol "Tambahkan ke Keranjang Belanja" Anda tidak membawa pengguna situs web tersebut ke halaman baru. Anda mungkin ingin mengaktifkan peristiwa saat tombol diklik.

Dalam contoh ini, kami akan mengaktifkan peristiwa standar ViewContent pada pemuatan halaman. Saat seseorang mengeklik tombol "Tambahkan ke Keranjang Belanja", kami akan mengaktifkan peristiwa standar AddToCart.

Untuk melakukan ini, pertama-tama muat kode Meta Pixel yang ingin Anda aktifkan pada pemuatan halaman:

<!-- Facebook Pixel Code --> <script> fbq('track', 'ViewContent', { content_name: 'Really Fast Running Shoes', content_category: 'Apparel & Accessories > Shoes', content_ids: ['1234'], content_type: 'product', value: 0.50, currency: 'USD' }); </script> <!-- End Facebook Pixel Code -->

Selanjutnya aktifkan AddToCart, baik saat halaman baru dimuat maupun saat tombol Tambahkan ke Keranjang Belanja diklik. Ada beberapa cara untuk menangani klik tombol. Berikut adalah contoh penambahan eventListener ke tombol.

<!-- Somewhere there is a button that performs Add to Cart --> <button id="addToCartButton">Add To Cart</button> <!-- Add Pixel Events to the button's click handler --> <script type="text/javascript"> var button = document.getElementById('addToCartButton'); button.addEventListener( 'click', function() { fbq('track', 'AddToCart', { content_name: 'Really Fast Running Shoes', content_category: 'Apparel & Accessories > Shoes', content_ids: ['1234'], content_type: 'product', value: 4.99, currency: 'USD' }); }, false ); </script>

Ada banyak cara untuk menangani peristiwa klik; pastikan untuk selalu memanggil fungsi fbq setelah klik.

Bergantung pada bagaimana Anda menerapkan Pixel, Bantuan Pixel mungkin menunjukkan kesalahan sebelum tombol diklik. Anda dapat memverifikasi bahwa pengaktifan Pixel Anda sudah benar dengan mengeklik tombol, yang menutup kesalahan bantuan.

Memicu peristiwa berdasarkan visibilitas

Untuk contoh ini, misalnya Anda memiliki sebuah blog dan ingin melacak pengguna yang membaca keseluruhan konten artikel. Pengguna tidak melakukan tindakan apa pun selain menggulir hingga akhir halaman.

Berikut adalah contoh HTML untuk halaman tempat Pixel dimuat:

<!DOCTYPE html> <html> <head> <!-- Facebook Pixel Code --> <script> !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n; n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window, document,'script','https://connect.facebook.net/en_US/fbevents.js'); fbq('init', '<FB_PIXEL_ID>'); fbq('track', "PageView"); </script> <noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=<FB_PIXEL_ID>&ev=PageView&noscript=1" /></noscript> <!-- End Facebook Pixel Code --> </head> <body> <h1>Scroll Page until the Lead event is fired</h1> <div style="height: 120vh; width: 100vw; background-color: #00f;"></div> <h1 id="fb-fire-pixel">Lead event will fire when this phrase enters the screen</h1> <div style="height: 120vh; width: 100vw; background-color: #000;"></div> </body> </html>

Saat elemen h1 dengan id=fb-fire-pixel muncul, kami akan mengaktifkan peristiwa standar Lead. Untuk memastikan apakah elemen terlihat di layar, kami menambahkan kode berikut ke halaman:

// This code should be loaded together with Meta Pixel

var executeWhenElementIsVisible = function(dom_element, callback) {

  if (!(dom_element instanceof HTMLElement)) {
    console.error('dom_element must be a valid HTMLElement');
  }

  if (typeof callback !== 'function') {
    console.error(
      'Second parameter must be a function, got',
      typeof callback,
      'instead',
    );
  }

  function isOnViewport(elem) {
    var rect = elem.getBoundingClientRect();
    var docElem = document.documentElement;
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || docElem.clientHeight) &&
      rect.right <= (window.innerWidth || docElem.clientWidth)
    );
  }

  var executeCallback = (function() {
    var wasExecuted = false;
    return function() {
      if (!wasExecuted && isOnViewport(dom_element)) {
        wasExecuted = true;
        callback();
      }
    };
  })();

  window.addEventListener('scroll', executeCallback, false);
};

Setelah itu, perlu ditentukan cara mengaktifkan Pixel tersebut saat elemen terlihat di layar:

// Get the element that should be visible to trigger the pixel fire
var element = document.getElementById('fb-fire-pixel');

// Then, set the event to be tracked when element is visible
// Note that second parameter is a function, not a function call
executeWhenElementIsVisible(element, function() {
  fbq('track', 'Lead');
});

Memicu peristiwa berdasarkan panjang atau persentase halaman

Untuk contoh ini, misalnya Anda ingin melacak pengguna yang membaca hingga panjang atau persentase halaman tertentu. Pengguna tidak melakukan tindakan apa pun selain menggulir hingga panjang atau persentase halaman yang diinginkan.

Contoh pertama ini adalah untuk melacak panjang halaman yang sudah dibaca oleh pengguna. Dalam contoh ini, kami mengaktifkan Pixel prospek saat pengguna sudah membaca hingga sepanjang 500px di halaman.

var executeWhenReachedPageLength = function(length, callback) {
  if (typeof length !== 'number') {
    console.error(
      'First parameter must be a number, got',
      typeof length,
      'instead',
    );
  }

  if (typeof callback !== 'function') {
    console.error(
      'Second parameter must be a function, got',
      typeof callback,
      'instead',
    );
  }

  function getWindowLength() {
    return window.innerHeight || 
      (document.documentElement || document.body).clientHeight;
  }

  function getCurrentScrolledLengthPosition() {
   return window.pageYOffset || 
     (document.documentElement || document.body.parentNode || document.body).scrollTop;
  }

  var executeCallback = (function() {
    var wasExecuted = false;
    return function() {
      if (!wasExecuted && getCurrentScrolledLengthPosition() > length) {
        wasExecuted = true;
        callback();
      }
    };
  })();

  if (getWindowLength() >= length) {
    callback();
  } else {
    window.addEventListener('scroll', executeCallback, false);
  }
};

executeWhenReachedPageLength(10, function() {
  fbq('track', 'Lead');
});

Contoh kedua ini adalah untuk melacak persentase halaman yang sudah dibaca oleh pengguna. Dalam contoh ini, kami mengaktifkan Pixel prospek saat pengguna sudah membaca hingga 75% dari halaman.

var executeWhenReachedPagePercentage = function(percentage, callback) {
  if (typeof percentage !== 'number') {
    console.error(
      'First parameter must be a number, got',
      typeof percentage,
      'instead',
    );
  }

  if (typeof callback !== 'function') {
    console.error(
      'Second parameter must be a function, got',
      typeof callback,
      'instead',
    );
  }

  function getDocumentLength() {
    var D = document;
    return Math.max(
        D.body.scrollHeight, D.documentElement.scrollHeight,
        D.body.offsetHeight, D.documentElement.offsetHeight,
        D.body.clientHeight, D.documentElement.clientHeight
    )
  }

  function getWindowLength() {
    return window.innerHeight || 
      (document.documentElement || document.body).clientHeight;
  }

  function getScrollableLength() {
    if (getDocumentLength() > getWindowLength()) {
      return getDocumentLength() - getWindowLength();
    } else {
      return 0;
    }
  }

  var scrollableLength = getScrollableLength();

  window.addEventListener("resize", function(){
    scrollableLength = getScrollableLength();
  }, false)

  function getCurrentScrolledLengthPosition() {
   return window.pageYOffset || 
     (document.documentElement || document.body.parentNode || document.body).scrollTop;
  }

  function getPercentageScrolled() {
    if (scrollableLength == 0) {
      return 100;
    } else {
      return getCurrentScrolledLengthPosition() / scrollableLength * 100;
    }
  }

  var executeCallback = (function() {
    var wasExecuted = false;
    return function() {
      if (!wasExecuted && getPercentageScrolled() > percentage) {
        wasExecuted = true;
        callback();
      }
    };
  })();

  if (getDocumentLength() == 0 ||
    (getWindowLength()/getDocumentLength() * 100 >= percentage)) {
    callback();
  } else {
    window.addEventListener('scroll', executeCallback, false);
  }
};

executeWhenReachedPagePercentage(75, function() {
  fbq('track', 'Lead');
});

Pengaktifan Pixel Tertunda

Misalnya Anda ingin melacak pengguna yang berinteraksi dengan situs web Anda beberapa detik sebelum mengaktifkan peristiwa Pixel. Anda dapat melakukannya dengan fungsi setTimeout.

// Delay pixel fire by 3 seconds
var seconds = 3;
setTimeout(function() {
  fbq('track', 'Lead');
}, seconds * 1000);

Ini dapat digunakan untuk melacak kunjungan “berinteraksi” ke sebuah halaman, ketika orang tidak beralih terlalu cepat dan benar-benar membaca konten.

Memicu peristiwa berdasarkan artikel yang dilihat per sesi

Jika Anda ingin tahu siapa yang melihat sejumlah artikel tertentu dari situs Anda, Anda dapat menggunakan penghitung sesi dan memuat kode Meta Pixel ketika peristiwa ini terjadi.

Kita tahu bahwa sesi adalah sekelompok interaksi pengguna dengan situs web Anda yang dapat berlangsung dalam kerangka waktu tertentu per permintaan situs. Anda dapat meningkatkan jumlah tayangan halaman jika Anda mendeteksi aktivitas pengguna memberikan kerangka waktu.

Anggaplah Anda memiliki variabel sessionCountViews per site_request, Anda dapat menambahkan kode Meta Pixel berdasarkan jumlah tayangan halaman yang Anda hitung.

Contoh menghitung hanya untuk artikel ke-6 yang dilihat

if (site_request.sessionCountViews == 6) {
  fbq('track', "ViewContent", {
    sessionCountViews: site_request.sessionCountViews,
  });
}

Pelacakan peristiwa pilihan dengan beberapa Pixel

Jika ada beberapa pixel di halaman yang sama dan Anda ingin mengaktifkan peristiwa secara selektif pada tiap Pixel unik, kemampuan trackSingle dan trackSingleCustom sebaiknya digunakan.

Menggunakan fungsi track di halaman dengan beberapa Pixel diinisialisasi (menggunakan beberapa kode dasar atau bahkan menggabungkannya dalam satu kode dasar) dapat menghasilkan pengaktifkan yang berlebihan atau perilaku tak terduga, dan sebaiknya hanya diterapkan dalam situasi tertentu.

Contoh mengaktifkan peristiwa PageView di Pixel yang diinisialisasi dan secara selektif mengaktifkan peristiwa Standar (Purchase) di satu Pixel dan Peristiwa Khusus di Pixel kedua.

fbq('init', '<PIXEL_A>');
fbq('init', '<PIXEL_B>');
fbq('track', 'PageView'); //fire PageView for both initialized pixels

// only fire the Purchase event for Pixel A
fbq('trackSingle', '<PIXEL_A>', 'Purchase', {
      value: 4,
      currency: 'GBP',
});

// only fire the custom event Step4 for Pixel B
fbq('trackSingleCustom', '<PIXEL_B>', 'Step4',{
  //optional parameters
});

Melacak peristiwa untuk Pixel individu

Dalam kasus yang tidak biasa, Anda mungkin ingin mengirim peristiwa hanya ke salah satu Pixel yang diinstal di situs web Anda; contoh: untuk membatasi data yang dikirim ke salah satu Pixel di situs web Anda. Metode ini melacak pengaktifan Pixel untuk satu Pixel. Pemanggilan dilakukan menggunakan:

fbq('trackSingle', 'FB_PIXEL_ID', 'Purchase', customData);
fbq('trackSingleCustom', 'FB_PIXEL_ID', 'CustomEvent', customData);

Konfigurasi Otomatis

Meta Pixel akan mengirim data klik tombol dan metadata halaman (seperti data yang terstruktur sesuai format Opengraph atau Schema.org) dari situs web Anda untuk memperbaiki penayangan dan pengukuran iklan serta mengotomatiskan pengaturan Pixel. Untuk mengonfigurasi Meta Pixel agar tidak mengirim informasi tambahan ini, di kode Dasar Meta Pixel, tambahkan fbq('set', 'autoConfig', 'false', 'FB_PIXEL_ID') di atas panggilan init.

<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s){
if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','https://connect.facebook.net/en_US/fbevents.js'); 
// Line to enable Manual Only mode.
fbq('set', 'autoConfig', false, 'FB_PIXEL_ID'); 
//Insert Your Facebook Pixel ID below. 
fbq('init', 'FB_PIXEL_ID'); 
fbq('track', 'PageView');
</script>
<noscript>
<img height="1" width="1" style="display:none"src="https://www.facebook.com/tr?id=FB_PIXEL_ID&amp;ev=PageView&amp;noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->

Kebijakan Keamanan Konten

Jika situs web Anda memiliki Kebijakan Keamanan Konten, Anda harus mengizinkan JavaScript dimuat dari https://connect.facebook.net. Catatan: Skrip pemuatan Pixel dari dua jalur: /en_US/fbevents.js dan /signals/config/{pixelID}?v={version}.