Back to docs

Links

Píxel de conversión en WordPress

Instala el píxel de conversión de Styrar en un sitio WordPress, con o sin plugin.

WordPress no necesita nada especial: el píxel de conversión de Styrar es solo una etiqueta <script>. No se requiere estrictamente ningún plugin, aunque uno facilita la gestión.

Opción A: editor de temas

  1. Ve a Apariencia → Editor de archivos de tema → header.php (o footer.php).

  2. Pega esto justo antes de </head> (o de </body> si usas el archivo de pie de página):

    HTML
    <script src="https://api.styrar.com/v1/pixel/styrar.jsx" async></script>
    
  3. Marca conversiones en cualquier parte de tus plantillas o contenido:

    HTML
    <button data-styrar-track="signup">Sign up</button>
    

Editar archivos de tema directamente hace que se sobrescriban con las actualizaciones del tema; usa un tema hijo, o la Opción B, si actualizas tu tema con frecuencia.

Opción B: un plugin de scripts de cabecera/pie de página (recomendado)

  1. Instala un plugin como WPCode o Insert Headers and Footers.
  2. Añade la misma etiqueta <script src="https://api.styrar.com/v1/pixel/styrar.jsx" async></script> al espacio de cabecera del plugin, en todo el sitio o limitada solo a la página de destino a la que redirige tu enlace corto.
  3. Usa atributos data-styrar-track en el bloque de HTML personalizado del editor de bloques, o llama a window.styrar.track(eventName, data) desde un <script> en línea dentro de un bloque de HTML personalizado.

Ejemplo con WooCommerce

HTML
<script>
  document.addEventListener('DOMContentLoaded', function () {
    if (typeof wc_checkout_params !== 'undefined' && window.location.href.includes('order-received')) {
      window.styrar && window.styrar.track('purchase', { value: <?php echo $order_total; ?> });
    }
  });
</script>

Coloca esto en tu plantilla de confirmación de pedido / página de "gracias", usando lo que tu tema exponga para el total del pedido.

Relacionado