Fragmento de código para enviar el evento ViewContent del píxel de Facebook en productos de WooCommerce

Una forma segura y recomendada de agregar código PHP en WordPress sin tocar el archivo functions.php es usando el plugin gratuito Code Snippets. Este plugin te permite añadir fragmentos directamente desde el panel de administración, organizarlos por nombre, desactivarlos cuando quieras y evitar errores críticos que podrían bloquear tu sitio si el código está mal escrito. Es ideal para aplicar funciones personalizadas sin depender de temas hijo o acceso FTP, y compatible con la mayoría de fragmentos que comparten desarrolladores y comunidades como Drunel.

La forma más sencilla de agregar código JavaScript en WordPress es utilizando el widget HTML que viene con el editor por bloques o con Elementor. Solo tienes que arrastrar el widget a la zona donde quieras que se ejecute el script y pegar el código dentro de etiquetas <script>...</script>. Este método es útil para insertar pequeños fragmentos como eventos, funciones o scripts de terceros sin editar archivos del tema.

Para estilos globales que se apliquen en todo el sitio, es mejor agregarlos desde el personalizador de WordPress en “Apariencia > Personalizar > CSS adicional” o en la configuración de estilo global de Elementor.
Si usas Elementor y el estilo es específico para un solo widget o sección, insértalo directamente en ese bloque. 

Para agregar código CSS en el editor nativo de WordPress a una sección o bloque, puedes usar el widget HTML  colocando el CSS dentro de una etiqueta <style>...</style>.

Descripción
Fragmento de código para activar el evento “ViewContent” del píxel de Facebook en páginas de producto de WooCommerce. Este script se engancha al hook woocommerce_before_single_product y envía automáticamente la información del producto (ID, nombre, precio y moneda) a Meta cuando un usuario visita una ficha de producto individual. Para usarlo, simplemente añade el código a tu archivo functions.php o a un plugin personalizado. Debes tener el píxel base ya cargado en el sitio.
PHP
add_action(‘woocommerce_before_single_product’, ‘fb_pixel_viewcontent_event’);
function fb_pixel_viewcontent_event() {
if (!is_product()) return;
global $product;
?>
<script>
fbq(‘track’, ‘ViewContent’, {
content_ids: [‘<?php echo esc_js($product->get_id()); ?>’],
content_name: ‘<?php echo esc_js($product->get_name()); ?>’,
content_type: ‘product’,
value: <?php echo esc_js($product->get_price()); ?>,
currency: ‘<?php echo get_woocommerce_currency(); ?>’
});
</script>
<?php
}
            
Notas y recomendaciones
  • Asegúrate de tener el código base del píxel de Facebook instalado antes de usar este fragmento. Aquí está el código par añadir el pixel principal de Facebook.
  • No es necesario modificar el código si ya usas WooCommerce y tus productos están bien configurados.
  • Este evento mejora el rendimiento del seguimiento en campañas con objetivos de conversión o remarketing.
  • Evita duplicar eventos si ya tienes un plugin de integración con Meta Ads.
Scroll al inicio