Wtyczka Pixel Your Site to świetne narzędzie do integracji wydarzeń z Conversion API Facebooka. Jednak domyślne wyzwalacze zdarzeń mogą czasami nie odpowiadać specyficznym potrzebom Twojej strony (tak jak to było w moim przypadku). Dlatego w tym wpisie pokażę Ci, jak dodać własne wyzwalacze zdarzeń, które będą poprawnie współpracować z Conversion API.
Domyślnie Pixel Your Site pozwala na konfigurację standardowych zdarzeń takich jak „Zakup” czy „Dodanie do koszyka” lub też podpięcie zdarzeń na kliknięcie czy wyświetlenie strony. Co jednak w przypadku, gdy chcesz przesłać bardziej niestandardowe dane, np. wyzwolić zdarzenie na podstawie specyficznej interakcji użytkownika, której wtyczka nie obsługuje?
Rozwiązaniem jest dodanie własnego kodu JavaScript, który umożliwia pełną personalizację wyzwalania zdarzeń.
Krok 1 – funkcja integrująca
Na początek musimy umieścić odpowiedni kod na stronie, który będzie odpowiadał za połączenie pomiędzy Twoimi własnymi wyzwalaczami (wdrożonymi np. za pośrednictwem Google Tag Manager) a wtyczką Pixel Your Site
Poniżej znajdziesz miejsce na kod, który musisz dodać na swojej stronie (możesz umieścić w plikach szablonu, możesz dodać go przez GTM jeśli używać)
<script>
function sendFacebookEvent(eventName) {
try {
if (window.pys && window.pys.Facebook) {
var eventID = pys_generate_token();
var eventData = {
name: eventName,
params: {
event_source_url: window.location.href,
custom_event: true
},
e_id: 'custom_' + eventName.toLowerCase(),
type: 'static',
eventID: eventID,
pixelIds: pysOptions.facebook.pixelIds || [],
hasTimeWindow: false,
timeWindow: 0,
woo_order: null,
edd_order: null
};
// Send server-side event via AJAX
jQuery.ajax({
url: pysOptions.ajaxUrl,
type: 'POST',
data: {
action: 'pys_api_event',
pixel: 'facebook',
event: eventData.name,
data: eventData.params,
ids: eventData.pixelIds,
eventID: eventData.eventID,
url: window.location.href,
ajax_event: pysOptions.ajax_event
},
success: function(response) {
// Fire client-side event only after server event success
if (typeof fbq !== 'undefined') {
fbq('trackCustom', eventData.name, eventData.params, {
eventID: eventData.eventID
});
}
},
error: function(xhr, status, error) {
console.error('Server event failed:', error);
}
});
}
} catch (e) {
console.error('Event push failed:', e);
}
}
</script>Krok 2 – wywołanie
Gdy już umieścisz ogólny kod, kolejnym krokiem jest skonfigurowanie konkretnego wyzwalacza zdarzenia. Dzięki temu możesz dopasować zdarzenie do wybranej akcji użytkownika np. za pomocą Google Tag Managera.
sendFacebookEvent('EVENT NAME*');* pamiętaj, aby zmienić EVENT NAME na nazwę zdarzenia. Możesz skorzystać z listy standardowych zdarzeń (dostępna tutaj) lub podać własną nazwę zdarzenia.
