Cómo añadir una imagen dinámica a una notificación push

Hola: 3 minutos de lectura
|
Actualizado 10 oct 2024, 12:22 EST
Qué aprenderás

Qué aprenderás

Aprenda a añadir una imagen dinámica a una notificación push. 

Las imágenes dinámicas son una excelente forma de personalizar sus notificaciones push. Por ejemplo, puede mostrar a alguien el producto exacto que ha marcado como favorito, con el que ha iniciado una compra o que ha comprado.

Antes de empezar

Antes de empezar

Puede utilizar imágenes dinámicas en:

  • Flujos desencadenados por métricas, que utilizan datos de eventos (por ejemplo, artículos de una caja o de un pedido realizado) o etiquetas de catálogo para un evento. 
  • Campañas y flujos activados por listas y segmentos, pero sólo cuando la URL de la imagen existe como propiedad personalizada en el perfil del destinatario.

Además, tenga en cuenta lo siguiente en relación con las imágenes dinámicas push: 

  • Sólo se permite 1 imagen dinámica por notificación push.
  • Las imágenes deben pesar menos de 1 MB.
  • Puede utilizar declaraciones condicionales con imágenes dinámicas.

¿Quiere solicitar una función para las notificaciones push de Klaviyo? ¡Rellene este formulario de Google para contárnoslo! 

Añadir una imagen dinámica a una notificación push

Añadir una imagen dinámica a una notificación push

  1. Seleccione el mensaje en el que desea incluir su imagen dinámica.
  2. En la barra lateral izquierda, pulse Configurar contenido o Editar.
  3. Añada o seleccione la notificación push en el flujo. 
  4. Pulse el icono Ver detalles en la esquina superior derecha.

    Icono Ver detalles dentro de la ventana de vista previa de empuje

  5. Busque la fuente de datos de la imagen que desea incluir.
  6. Haga clic en la fuente de datos de la primera variable de una imagen, que normalmente terminará en 0.

    Ejemplo del aspecto de la fuente de datos para una imagen

  7. A la izquierda, haga clic en el icono Insertar medio en el cuadro Cuerpo.

    Añadir medios a push.jpg

  8. Vaya a la pestaña Imagen dinámica.
  9. Pegue la variable dinámica o la URL dinámica de la imagen.

    Ficha Imagen dinámica después de pegar una variable de ejemplo

  10. Pulse Guardar.
  11. Compruebe que la imagen dinámica se ha añadido correctamente asegurándose de que aparece una en la pantalla de vista previa.
Ejemplo de uso de etiquetas de catálogo 

También puede utilizar etiquetas de catálogo para añadir imágenes dinámicas en una notificación push enriquecida. Para ello: 

  1. Vaya a Analytics > Metrics
  2. Seleccione la métrica que desea utilizar (por ejemplo, Producto pedido). 
  3. Haga clic en Detalles para un evento específico.
  4. Busque la SKU o la etiqueta de identificación del producto.
  5. Copie la etiqueta de la etiqueta (excepto los paréntesis o los dos puntos) para tener la ortografía y las mayúsculas exactas.
    En el ejemplo siguiente, copiamos "ProductID."

    imagen5.png

  6. Pegue esto en algún lugar donde no lo pierda. 
  7. Navegue hasta un flujo activado por la misma métrica que acaba de seleccionar. 
  8. Seleccione la notificación push en la que desea incluir su imagen dinámica.
  9. En la barra lateral izquierda, pulse Configurar contenido o Editar.
  10. A la izquierda, haga clic en el icono Insertar medio en el cuadro Cuerpo.

    Añadir medios a push.jpg

  11. Vaya a la pestaña Imagen dinámica.
  12. Pegue la siguiente etiqueta de catálogo:
    {% catalog event.id %} {{catalog_item.featured_image.thumbnail.src}} {% endcatalog %}
  13. Sustituya id en {% catalog event.id %} por la etiqueta que copió anteriormente.
    Ejemplo: {% catalog event.ProductID %} {{catalog_item.featured_image.thumbnail.src}} {% endcatalog %}
  14. Pulse Guardar
Ejemplo de uso de sentencias condicionales para imágenes dinámicas

Las imágenes dinámicas pueden utilizar sentencias condicionales. 

A continuación se muestra un ejemplo de una sentencia if/else para decir que si hay una imagen variante, muestre esa a los destinatarios; si no, utilice la imagen por defecto:

{% if event.extra.line_items.0.product.variant.images.0.src %}{{ event.extra.line_items.0.product.variant.images.0.src }}{% else %}{{ event.extra.line_items.0.product.images.0.src }}{% endif %}

Tenga en cuenta que el formato exacto de estas declaraciones depende de su integración y que no debe copiarlas de plantillas de correo electrónico.

Recursos adicionales

Recursos adicionales

¿Te ha resultado útil este artículo?
Utiliza este formulario solo para enviar comentarios sobre el artículo. Más información sobre cómo contactar con el servicio de asistencia.

Descubre más de Klaviyo

Comunidad
Conecta con compañeros, socios y expertos de Klaviyo para inspirarte, compartir ideas y resolver todas tus dudas.
Formación en directo
Únete a una sesión en directo con expertos de Klaviyo para conocer las prácticas recomendadas, cómo configurar funciones clave y mucho más.
Asistencia

Accede al servicio de asistencia a través de tu cuenta.

Asistencia por correo electrónico (prueba gratuita y cuentas de pago) Disponible 24/7

Asistencia por chat/virtual
La disponibilidad varía según la ubicación y el tipo de plan