instalar - ¿Causará algún problema si uso varios píxeles de Facebook en una página?
pixel de facebook 2017 (6)
Me gustaría incluir mi ID de píxel de Facebook y la ID de píxel de Facebook del cliente en una sola página, para que ambos podamos tener una idea de los usuarios, y el cliente también puede crear anuncios para la página si así lo desea.
Ya probé el seguimiento y parece funcionar bien. Sin embargo, recibo advertencias de Pixel SDK sobre "Se detectaron varios píxeles diferentes en esta página".
Ya que no puedo encontrar información sobre este escenario, me gustaría saber si está bien hacerlo.
Gracias
Código de múltiples píxeles de Facebook
Para poder activar distintos eventos en diferentes píxeles de Facebook, sin haber llamado a todos los píxeles de Facebook inicializados previamente, puede sobrescribir la función fbq (copiando y pegando el fragmento de código siguiente a su base de código) y luego llamar a los eventos de seguimiento. como se explica en la sección de Uso a continuación.
<script type="text/javascript">
(function() {
var fbq = (function() {
function fbq()
{
if(arguments.length > 0) {
var action, pixel_id, type_track, content_obj;
if( typeof arguments[0] == "string") action = arguments[0];
if( typeof arguments[1] == "string") pixel_id = arguments[1];
if( typeof arguments[2] == "string") type_track = arguments[2];
if( typeof arguments[3] == "object") content_obj = arguments[3];
var params = [];
if(typeof action == "string" && action.replace(//s+/gi, "") != "" &&
typeof pixel_id == "string" && pixel_id.replace(//s+/gi, "") != "" &&
typeof type_track == "string" && type_track.replace(//s+/gi, "")) {
params.push("id=" + encodeURIComponent(pixel_id));
switch(type_track) {
case "PageView":
case "ViewContent":
case "Search":
case "AddToCart":
case "InitiateCheckout":
case "AddPaymentInfo":
case "Lead":
case "CompleteRegistration":
case "Purchase":
case "AddToWishlist":
params.push("ev=" + encodeURIComponent(type_track));
break;
default:
return;
}
params.push("dl=" + encodeURIComponent(document.location.href));
params.push("rl=" + encodeURIComponent(document.referrer));
params.push("if=false");
params.push("ts=" + new Date().getTime());
if(typeof content_obj == "object") {
for(var u in content_obj) {
if(typeof content_obj[u] == "object" && content_obj[u] instanceof Array) {
if(content_obj[u].length > 0) {
for(var y=0; y<content_obj[u].length; y++) { content_obj[u][y] = (content_obj[u][y]+"").replace(/^/s+|/s+$/gi, "").replace(//s+/gi," ").replace(/,/gi, "§"); }
params.push("cd[" + u + "]=" + encodeURIComponent(content_obj[u].join(",").replace(/^/gi, "[/"").replace(/$/gi, "/"]").replace(/,/gi, "/",/"").replace(/§/gi, "/,")));
}
}
else if(typeof content_obj[u] == "string")
params.push("cd[" + u + "]=" + encodeURIComponent(content_obj[u]));
}
}
params.push("v=" + encodeURIComponent("2.5.0"));
if(typeof window.jQuery == "function") {
var iframe_id = new Date().getTime();
jQuery("body").append("<img height=''1'' width=''1'' style=''display:none;width:1px;height:1px;'' id=''fb_" + iframe_id + "'' src=''https://www.facebook.com/tr/?" + params.join("&") + "'' />");
setTimeout(function() { jQuery("#fb_" + iframe_id).remove(); }, 1000);
}
}
}
}
return fbq;
});
window.fbq = new fbq();
})();
</script>
Uso
Ahora la función fbq toma 3 parámetros. El primer parámetro será solo "track". La segunda es nueva, allí es donde puede especificar el ID de píxel de Facebook que desea usar para rastrear este evento específico. En tercer lugar, como de costumbre, di el nombre del evento. Y, por último, puede pasar otras opciones como valor de compra, moneda, content_ids, etc.
<script>
fbq(''track'', ''<FIRST_PIXEL_ID>'', ''PageView'');
fbq(''track'', ''<FIRST_PIXEL_ID>'', ''Purchase'', {value: 79.9, currency: ''BRL''});
fbq(''track'', ''<SECOND_PIXEL_ID>'', ''Purchase'', {value: 89.9, currency: ''BRL''});
</script>
Tenga en cuenta que también puede usar valores de compra diferentes para píxeles diferentes, y solo se dispararán a ese píxel muy específico.
Manifestación
Puede encontrar los resultados en esta página del producto , aunque no utilicé datos diferentes en la página del producto. Pero lo uso para desencadenar eventos de compra con diferentes valores de compra en la caja. Además, si aún no lo tiene, descargue la extensión Facebook Pixel Helper para Google Chrome. Te ayudará a depurar el píxel de Facebook.
El código de conversión de Facebook se ha actualizado para permitir a los anunciantes rastrear varios píxeles dentro de la misma página web. Anteriormente, si tenía varias versiones del píxel de seguimiento de conversiones en la misma página, se producían colisiones y se producían pérdidas de datos. El nuevo código también facilita el seguimiento de las acciones en la página, como hacer clic en un botón.
Ver this
FWIW, Facebook ha agregado eventos trackSingle
y trackSingleCustom
(a partir de noviembre de 2017) para permitir eventos de disparo selectivo en píxeles específicos cuando se inicializan varios píxeles en una página.
Docs: https://developers.facebook.com/docs/facebook-pixel/events-advanced-use-cases/v2.12#multipixels .
Publicación en el blog: https://developers.facebook.com/ads/blog/post/2017/11/28/event-tracking-with-multiple-pixels-tracksingle/
Tenía el mismo requisito y descubrí que es posible y que no es necesario hackear el código de píxel de Facebook.
Incluso si no está documentado, el objeto fbq
admite varios identificadores de píxeles.
Simplemente llame varias veces a la función init
con diferentes identificaciones de píxeles. Luego, cuando hagas fbq(''track'', "PageView");
emitirá un evento por píxel. Puede llamar a fbq(''track'', ''{{your_event_name}}'')
tantas veces como desee y rastreará el evento para todos los píxeles inicializados previamente.
Entonces tu código final se vería así:
<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'',''//connect.facebook.net/en_US/fbevents.js'');
fbq(''init'', ''{{pixel_id_1}}'');
fbq(''init'', ''{{pixel_id_2}}'');
fbq(''track'', "PageView");
</script>
<noscript>
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id={{pixel_id_1}}&ev=PageView&noscript=1" />
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id={{pixel_id_2}}&ev=PageView&noscript=1" />
</noscript>
Tener múltiples píxeles en su sitio no debería crear ningún problema en su sitio (es decir, no habrá errores de JavaScript y todos los eventos se enviarán para todas las ID de píxeles inicializadas). Escribí una publicación de blog sobre este tema, así que siéntase libre de leer allí para una discusión más completa.
Después de incluir el fragmento completo de código de píxel de Facebook una vez en el sitio, puede agregar entradas de ID de píxel adicionales antes de llamar a cualquier evento de seguimiento. Por lo tanto, su fragmento de código de píxel completo en el sitio se vería así:
<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'',''//connect.facebook.net/en_US/fbevents.js'');
fbq(''init'', ''[first-pixel-id]'');
fbq(''init'', ''[second-pixel-id]'');
fbq(''track'', ''PageView'');
</script>
<noscript>
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=[first-pixel-id]&ev=PageView&noscript=1" />
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=[second-pixel-id]&ev=PageView&noscript=1" />
</noscript>
Una vez que haya inicializado todas las ID de píxeles en su sitio con fbq(''init'')
, puede confirmar que se han cargado ejecutando el siguiente código en la consola de JavaScript:
fbq.getState().pixels
También debe instalar el Facebook Pixel Helper . Ofrece información detallada sobre cada píxel y cada evento de seguimiento enviado a Facebook.
La siguiente pregunta natural es cómo rastrear los eventos a solo una de esas ID de píxeles. Si está manejando un catálogo de productos para Facebook Dynamic Ads, es posible que deba hacer un seguimiento de los eventos y pasar a Facebook su ID de producto único para el producto en el sitio.
A finales de 2017, Facebook finalmente anunció una funcionalidad para rastrear los eventos de píxeles a las ID de píxeles individuales. Simplemente use las acciones trackSingle
y trackSingleCustom
lugar de track
y trackCustom
, así:
fbq("trackSingle, "[your-pixel-id]", "ViewContent", { content_type: "product", content_ids: [''892185001003''] });
Pero sigue habiendo un problema con este paradigma: si incluso un desarrollador en un sitio con múltiples píxeles no usa las nuevas acciones, sus eventos rastrearán las identificaciones de píxeles de todos en el sitio. Por lo que he visto en los últimos meses, casi todos los desarrolladores todavía utilizan la acción de track
. Debo decir aquí que no es el fin del mundo si otros desarrolladores rastrean sus eventos hasta su píxel, pero me gusta la idea de no eliminar mis datos y posiblemente eliminar los análisis y / o la medición de conversión.
Entonces, el problema sigue siendo: ¿cómo rastrear los eventos de píxel solo a su píxel, y no deja que nadie más rastree sus eventos a su píxel también?
El método <noscript>
de rastrear un evento de <noscript>
de página a Facebook me dio una pista de que puedes hacer esto, pero no a través del objeto fbq
.
En una respuesta de Flavio Wuensche, implementó esta idea. Lo tomé, lo limpié y lo modifiqué.
Código
(function (window, document) {
if (window.myfbq) return;
window.myfbq = (function () {
if (arguments.length > 0) {
var pixelId, trackType, contentObj;
if (typeof arguments[0] == ''string'') pixelId = arguments[0];
if (typeof arguments[1] == ''string'') trackType = arguments[1];
if (typeof arguments[2] == ''object'') contentObj = arguments[2];
var params = [];
if (typeof pixelId === ''string'' && pixelId.replace(//s+/gi, '''') != '''' &&
typeof trackType === ''string'' && trackType.replace(//s+/gi, '''')) {
params.push(''id='' + encodeURIComponent(pixelId));
switch (trackType) {
case ''PageView'':
case ''ViewContent'':
case ''Search'':
case ''AddToCart'':
case ''InitiateCheckout'':
case ''AddPaymentInfo'':
case ''Lead'':
case ''CompleteRegistration'':
case ''Purchase'':
case ''AddToWishlist'':
params.push(''ev='' + encodeURIComponent(trackType));
break;
default:
return;
}
params.push(''dl='' + encodeURIComponent(document.location.href));
if (document.referrer) params.push(''rl='' + encodeURIComponent(document.referrer));
params.push(''if=false'');
params.push(''ts='' + new Date().getTime());
if (typeof contentObj == ''object'') {
for (var u in contentObj) {
if (typeof contentObj[u] == ''object'' && contentObj[u] instanceof Array) {
if (contentObj[u].length > 0) {
for (var y = 0; y < contentObj[u].length; y++) { contentObj[u][y] = (contentObj[u][y] + '''').replace(/^/s+|/s+$/gi, '''').replace(//s+/gi, '' '').replace(/,/gi, ''§''); }
params.push(''cd['' + u + '']='' + encodeURIComponent(contentObj[u].join('','').replace(/^/gi, ''[/''').replace(/$/gi, ''/']'').replace(/,/gi, ''/',/''').replace(/§/gi, ''/,'')));
}
}
else if (typeof contentObj[u] == ''string'')
params.push(''cd['' + u + '']='' + encodeURIComponent(contentObj[u]));
}
}
params.push(''v='' + encodeURIComponent(''2.7.19''));
var imgId = new Date().getTime();
var img = document.createElement(''img'');
img.id = ''fb_'' + imgId, img.src = ''https://www.facebook.com/tr/?'' + params.join(''&''), img.width = 1, img.height = 1, img.style = ''display:none;'';
document.body.appendChild(img);
window.setTimeout(function () { var t = document.getElementById(''fb_'' + imgId); t.parentElement.removeChild(t); }, 1000);
}
}
});
})(window, document);
Uso
myfbq("[your-pixel-id]", "PageView");
myfbq("[your-pixel-id]", "ViewContent");
myfbq("[your-pixel-id]", "ViewContent", { content_type: "product", content_ids: [''892185001003''] });
Más discusión
Tenga en cuenta que esta función myfbq
no tiene asociación ni vínculos con el objeto fbq
. Simplemente inserta dinámicamente etiquetas <img>
en el sitio que realizan llamadas a Facebook para rastrear eventos para píxeles individuales. Por lo tanto, puede hacer un seguimiento de los eventos a todos los píxeles inicializados en el sitio (o un solo píxel usando la nueva funcionalidad) a través del fragmento de código de píxeles de Facebook normal, o solo a su propia ID de píxel con la función myfbq
, ¡o puede hacer ambas cosas!
Si desea hacer ambas cosas, incluya la función myfbq
en el sitio, entonces su fragmento de código de píxel de Facebook podría verse así:
<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'',''//connect.facebook.net/en_US/fbevents.js'');
fbq(''init'', ''12345678'');
fbq(''init'', ''87654321'');
fbq(''track'', ''PageView''); //tracks a PageView event to all initialized pixels
myfbq("87654321", "ViewContent", { content_type: "product", content_ids: [''892185001003''] }); //tracks a ViewContent event to only one pixel, with your own unique ProductId
</script>
<noscript>
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345678&ev=PageView&noscript=1" />
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=87654321&ev=PageView&noscript=1" />
</noscript>
https://www.facebook.com/business/help/community/question/?id=10100525729830570
Según el equipo de ayuda de Facebook:
Aunque esto debería estar bien, no podemos garantizar la precisión de los resultados si se instalan varios píxeles en la misma página web y se han recibido informes de discrepancias de personas que lo han intentado anteriormente.