2013-10-09 3 views
14

Ich bin noch ziemlich neu in Javascript, aber ich frage mich, was wäre der beste Weg, um die Facebook-Conversion-Pixel (unten) Feuer ohne eine "Bestätigung"/"Danke" -Seite laden?Feuern der Facebook Conversion Pixel

<script type="text/javascript"> 
var fb_param = {}; 
fb_param.pixel_id = 'XXXXXXXXXXX'; 
fb_param.value = '0.00'; 
fb_param.currency = 'USD'; 
(function(){ 
    var fpw = document.createElement('script'); 
    fpw.async = true; 
    fpw.src = '//connect.facebook.net/en_US/fp.js'; 
    var ref = document.getElementsByTagName('script')[0]; 
    ref.parentNode.insertBefore(fpw, ref); 
})(); 
</script> 
<noscript><img height="1" width="1" alt="" style="display:none" 
src="https://www.facebook.com/offsite_event.php?id=XXXXXXXXXX&amp;value=0&amp;currency=USD" /></noscript> 

Facebook sagt, dass wir dies in unseren stecken sollte „Danke Seiten“, dass die Besucher sehen, nachdem sie (ein Formular ausfüllen, einen Kauf tätigen, usw.) zu konvertieren. Einige unserer Formulare sind jedoch Popups oder Formulare in Seitenleisten neben Inhalten, von denen wir nicht möchten, dass Leser von einer Bestätigungsseite weggeleitet werden.

Mit Google Analytics kann ich eine "unsichtbare" Seitenansicht erstellen, indem ich _gaq.push (['_ trackPageview']); Code, der GA mitteilen kann, dass dieser unsichtbare Seitenaufruf als Zielabschluss gezählt werden soll.

Gibt es etwas Ähnliches, das allgemein genug ist, um meiner Website zu sagen, dass sie den FB-Pixel abfeuern soll?

Antwort

13

EDIT: Ich habe meinen Code aktualisiert, wie das, was ich zuvor erwähnt hatte, nicht funktioniert. Danke an @Flambino um darauf hinzuweisen.

Dies ist meine überarbeitete Antwort, bei der ein Pixel anstelle eines Skripts verwendet wird, um das Konvertierungspixel zu übergeben. Ich Referenz des How to track a Google Adwords conversion onclick? SO Beitrag:

<head> 
<script type="text/javascript"> 
function facebookConversionPixel(fb_pixel, fb_value){ 
    var image = new Image(1,1); 
    image.src = "//www.facebook.com/offsite_event.php?id=" + fb_pixel + "&amp;value=" + fb_value + "&amp;currency=USD"; 
} 
</script> 
</head> 

<body> 
<a href="#" onclick="facebookConversionPixel(123456,0.00);">FBCONV</a> 
</body> 
+0

Danke! Ist es richtig, anzunehmen, dass dieser Teil des ursprünglichen Pixels Entfernen ‚‘ bedeutet, dass, obwohl die Facebook Pixel Javascript jedem Seitenaufruf geladen wird, wenn der Abschnitt geladen ist, wird es nicht wirklich sein gefeuert, bis der Onclick-Code durch einen Klick aktiviert wird? – dataprointhemaking

+0

Das ist richtig. Ich habe '

+0

Danke, dass du alles klar gemacht hast! – dataprointhemaking

5

einfach den gesamten ursprünglichen Code in das Ereignis Ihrer Wahl verschieben. Dann ändern Sie einfach 1 Teil des Codes. Die Sache, die Sie tun müssen, ist die globale fb_param anstelle von lokalen machen.

Siehe unten im Kommentar

$('.button').click(function() { 
    window.fb_param = {}; // must be global by adding `window.` 
    fb_param.pixel_id = '123456789'; 
    fb_param.value = '0.00'; 
    fb_param.currency = 'USD'; 
    (function(){ 
     var fpw = document.createElement('script'); fpw.async = true; fpw.src = '//connect.facebook.net/en_US/fp.js'; 
     var ref = document.getElementsByTagName('script')[0]; 
     ref.parentNode.insertBefore(fpw, ref); 
    })(); 
}); 
8

Aus der FB docs "How to track in-page events":

Nachdem der Basiscodeausschnitt installiert ist, können Sie in Seitiges Aktionen, wie Klicks auf einer Schaltfläche verfolgen, durch Machen Sie einen _fbq.push ('track') -Aufruf für das Conversion-Pixel, indem Sie verschiedene Event-Handler für ein HTML-DOM-Element registrieren. Zum Beispiel:

function trackConversionEvent(val, cny) { 
    var cd = {}; 
    cd.value = val; 
    cd.currency = cny; 
    _fbq.push(['track', '<pixel_id>', cd]); 
} 
<button onClick="trackConversionEvent('10.00','USD');" /> 
0

Ich hatte ähnliche Art von Problem und ich mag mehr laufen fügt ich nicht in der Lage war zu verfolgen Pixel-Codes und einen Grund zu verfolgen. Was ich getan habe, ist, dass auf der aktuellen Seite habe ich Pixel-Code in Fußzeile und Javascript-Funktion hinzugefügt, um anzurufen, wenn meine Ajax-Taste eingereicht werden.

siehe Erste Book-Dokumentationsseite

https://developers.facebook.com/docs/ads-for-websites/conversion-pixel-code-migration#multi-conv-events

Wie Multiple Conversion Ereignisse verfolgen

Nachdem der Basiscodeausschnitt installiert ist, können Sie, indem mehrere mehrere Konvertierungen innerhalb derselben Webseite verfolgen _fbq.push ('track') ruft für jedes Konvertierungspixel ids auf. Zum Beispiel:

_fbq.push(['track','<pixel_id1>',{'value':'10.00','currency':'USD'}]); 
_fbq.push(['track','<pixel_id2>']); 

Wie In-Page-Event verfolgen

Nachdem der Basiscodeausschnitt installiert ist, können Sie in Seitiges Aktionen, wie Klicks auf einer Schaltfläche verfolgen, durch eine _fbq.push machen ('track') ruft das Conversion-Pixel auf, indem verschiedene Event-Handler für ein HTML-DOM-Element registriert werden.Zum Beispiel:

function trackConversionEvent(val, cny) { 
    var cd = {}; 
    cd.value = val; 
    cd.currency = cny; 
_fbq.push(['track', '<pixel_id>', cd]); 
} 
<button onClick="trackConversionEvent('10.00','USD');" /> 

auch, fügen Sie das Chrom addon Tracking-Code facebook Pixel und die Facebook-Pixel-Helfer Seite verweisen: https://developers.facebook.com/docs/ads-for-websites/pixel-troubleshooting

Siehe meine unten Lösung/Antwort

Facebook-Tracking-Code auf der aktuellen Seite (function() {var _fbq = window._fbq || (window._fbq = []); if (_fbq.loaded) {var FBD = document.createElement ('script!'); fbds.async = wahr; fbds.src = '//connect.facebook.net/en_US/fbds.js'; var s = document.getElementsByTagName ('Skript') [0]; s.parentNode.insertBefore (fbds, s); _fbq.loaded = wahr; } })(); window._fbq = Fenster._fbq || []; window._fbq.push (['track', 'yourid', {'Wert': '1.00', 'Währung': 'USD'}]);

<!-- Facebook Conversion --> 
    <script>(function() { 
    var _fbq = window._fbq || (window._fbq = []); 
    if (!_fbq.loaded) { 
    var fbds = document.createElement('script'); 
    fbds.async = true; 
    fbds.src = '//connect.facebook.net/en_US/fbds.js'; 
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(fbds, s); 
    _fbq.loaded = true; 
    } 
    })(); 
    window._fbq = window._fbq || []; 
    window._fbq.push(['track', 'yourid', {'value':'1.00','currency':'USD'}]); 
    </script> 

Und der JavaScript-Code aufrufen, wenn Ajax-Form

<script> 
function trackConversionEvent(val, cny) { 
var cd = {}; 
cd.value = val; 
cd.currency = cny; 
_fbq.push(['track', 'yourid1', cd]); 
_fbq.push(['track', 'yourid1', cd]); 

} 
</script> 

und den Aufruf der Funktion, wenn Ajax

jQuery(form).ajaxSubmit({ 

    type:"POST", 

    data: $(form).serialize(), 

    url:"process.php", 

    success: function() { 
    **trackConversionEvent**('1.00','USD'); 
    } 
    ...... 
0

Facebook ihre Pixel aktualisiert hat, genannt einreichen oder Schaltfläche klicken, um Ich habe meine eigene benutzerdefinierte Funktion erstellt, die die Parameter dynamisch zusammensetzt, um sie an Facebook zu senden.

Schritt 1. Auf jeder Seite sicherstellen, you've initialised your pixel in Kopf Element der Seite.

Schritt 2. Fügen Sie diese benutzerdefinierte Funktion hinzu, die ich erstellt habe (es ist ein bisschen ausführlich, da es der erste Entwurf ist, also bin ich sicher, dass es Möglichkeiten gibt, es zu Ihrem Vorteil zu optimieren).

triggerFacebookPixel: function(type, price, product_id, product_name, product_category, num_items) { 
    //See https://developers.facebook.com/docs/ads-for-websites/pixel-events/v2.8#events for documentation 
    //type = "ViewContent"|"AddToCart"|"Search"|"AddToWishlist"|"InitiateCheckout"|"AddPaymentInfo"|"Purchase"|"Lead"|"CompleteRegistration" 
    //product_id = Numeric Product ID. String or Integer accepted for single product events, or an array of integers for multiple products. 
    //price = Decimal/Float number of individual product's price or total price paid in conversion, or the user's status for 'CompleteRegistration' 
    //product_name = Optional. String of individual product's name or string of search query 
    //product_category = Optional. String of product category, hierarchy's accepted. E.g. "Clothing > Shirts > Men's > T-Shirts" 
    //num_items = Optional. Total number of products. 
    var data = { 
     value: typeof(price) == 'string' ? parseFloat(price) : price, 
     currency: 'USD' 
    } 
    switch (type) { 
     case 'Search': 
      data.content_ids = product_id; 
      data.search_string = product_name; 
      if (product_category !== undefined && product_category != '') { 
       data.content_category = product_category; 
      } 
      break; 
     case 'Lead': 
      data.content_name = product_name; 
      data.content_category = product_category; 
      break; 
     case 'CompleteRegistration': 
      data.status = product_id; 
      data.content_name = product_name; 
      break; 
     default: 
      //Product Specific Calls 
      //ViewContent|AddToCart|AddToWishlist|InitiateCheckout|AddPaymentInfo|Purchase 
      if (num_items == 1) { 
       data.content_ids = [typeof(product_id) == 'string' ? parseInt(product_id) : product_id]; 
       data.content_category = product_category; 
       data.content_name = product_name; 
      } else { 
       data.content_ids = product_id; 
      } 
      //"num_items" is only a parameter used in these two types 
      if (type == 'InitiateCheckout' || type == 'Purchase') { 
       data.num_items = num_items 
      } 
      //"content_type" is only a parameter used in these three types 
      if (type == 'Purchase' || type == 'AddToCart' || type == 'ViewContent') { 
       data.content_type = 'product'; 
      } 
      break; 
    } 
    fbq('track', type, data); 
} 

Schritt 3. Rufen Sie diese Funktion mit den entsprechenden Parametern auf.

Für Ihr Dankeschön-Popup nach einem Kauf wird das Pixel anders abgefeuert, wenn der Benutzer ein Element im Gegensatz zu mehreren Elementen kauft. Grundsätzlich akzeptiert Facebook Parameter für Produktnamen und -kategorien, wenn es sich nur um ein Produkt handelt, akzeptiert diese Parameter jedoch nicht, wenn es sich um mehrere Produkte handelt.

Für die folgenden Beispiele, hier einige Beispiele für Produktdaten eines Benutzers Kauf 1 Artikel:

  • Produktname: "My Super Awesome T-Shirt"
  • Produkt ID: 182
  • Produktkategorie: "Kleidung> Hemden> T-Shirts"
  • Gesamtbetrag Benutzer bezahlt (einschließlich Versandkosten/Handhabung & Steuer): $ 10.84

Und hier ist die Funktion, die Sie auf der Bestätigung rufen würden:

triggerFacebookPixel('Purchase', 10.84, 182, 'My Super Awesome T-Shirt', 'Clothing > Shirts > T-Shirts', 1); 

Wenn ein Benutzer Käufe mehr Artikel, das Pixel anders behandelt, ohne die Produktnamen und Kategorien und nur das Senden ihre IDs. Also lassen Sie uns so tun, als unsere Benutzer diese beiden Artikel gekauft:

  • Produkt-ID: 182 und 164 (das Hemd und etwas anderes)
  • Gesamtbetrag Benutzer bezahlt (inklusive Versand/Handhabung & Steuern): $ 24,75

Dies ist, wie Sie die Funktion verwenden würde:

triggerFacebookPixel('Purchase', 24.75, [182, 164], '', '', 2); 

für andere standard events as defined by Facebook in Bezug auf Produkte, können Sie diese gleiche Funktion für „Vie verwenden können wContent "," AddToCart "," AddToWishlist "," InitiateCheckout "und" AddPaymentInfo ". Ändern Sie einfach "Kauf" in eines dieser Schlüsselwörter in Ihrem Anruf.

Die anderen Ereignisse beziehen sich nicht unbedingt auf Produkte: "Lead", "Search" und "Complete Registration". Sie können diese Funktion immer noch für solche Schlüsselwörter verwenden.

Beispiel: Benutzer gesucht für „Blauhemden“:

triggerFacebookPixel('Search', 0, [], 'blue shirts'); 

Wenn Sie eine Produktkategorie in der Benutzer Suchfunktion übergeben wollen, können Sie das als String am Ende passieren. Ich kann mir kein Anwendungsszenario vorstellen, in dem Sie wissen würden, nach welcher Kategorie der Benutzer sucht. Es sei denn, Sie haben dies verwendet, wenn das Produkt in den Suchergebnissen angezeigt wird und der Benutzer auf der Suchseite darauf geklickt hat. Das könnte sein, wofür diese Funktion eigentlich ist, aber die Dokumentation ist nicht ganz klar. Wenn dies bei Ihnen der Fall ist, ändern Sie einfach das 0 und das leere Array in die tatsächlichen Werte (Preis bzw. Produkt-ID) des Produkts, auf das von der Suchergebnisseite geklickt wurde, und fügen Sie seine Kategorie als letzte Zeichenfolge hinzu Parameter nach dem Suchstring.

Beispiel: Benutzer vorgelegt ein Formular, das sie zu Ihrem Newsletter angemeldet:

triggerFacebookPixel('CompleteRegistration', 0, 'Signed Up', 'Newsletter'); 

Facebook-Dokumentation besagt, dass „CompleteRegistration“ verwendet werden soll, wenn ein Registrierungsformular ausgefüllt wird, beispielsweise vollständiges Abonnement/Anmeldung für einen Dienst Die Zeichenfolge "Signed Up" ist der Parameter "status" und die Zeichenfolge "Newsletter" ist der Parameter "content_name".

Beispiel: Benutzer reichte ein Formular ein, das sie für eine kostenlose 30-Tage-Testversion von einigen angebotenen Diensten unterzeichnete (sie sind jetzt führen), wo der Name des Dienstes lautet "Kostenlose 30-Tage-Testversion Service“und es ist in der Unterkategorie‚Testversionen‘unter der Rubrik‚My Service‘:

triggerFacebookPixel('Lead', 0, 'Free 30-Day Trial Service', 'My Services > Free Trials'); 

Dokumentation Facebook heißt es, dass‚Lead‘ist, wenn ein Zeichen nach oben abgeschlossen ist, zB Klicken Sie auf Preise, melden Sie sich für den Test an. Ich nahm an, dass der Name des Dienstes der Parameter "content_name" ist und die Kategorie des Dienstes der Parameter "content_category" ist.