Objetivos de aprendizaje

Objetivos de aprendizaje

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

Las imágenes dinámicas son una forma estupenda de personalizar tu push de notificación. Por ejemplo, puedes mostrar a alguien el producto exacto que ha marcado como favorito, con el que ha iniciado una página de pago o que ha comprado.

Antes de empezar

Antes de empezar

Puedes utilizar imágenes dinámicas en:

  • flujo desencadenado métricamente, utilizando datos de eventos (por ejemplo, artículos de una página de pago o pedido realizado) o la etiqueta de catálogo de un evento. 
  • campañas y flujo desencadenado por listas y segmentos, pero sólo cuando la URL de la imagen existe como propiedad personalizada en el perfil del destinatario.

Además, ten en cuenta lo siguiente respecto a las imágenes dinámicas push de notificación: 

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

¿Quieres solicitar funciones/características para Klaviyo notificación push? ¡Rellena 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. Selecciona el mensaje en el que quieres incluir tu imagen dinámica.
  2. En la barra lateral izquierda, haz clic en Configurar contenido o en Editar.
  3. Añade o selecciona la notificación push en el flujo. 
  4. Pulsa el icono Ver detalles en la esquina superior derecha.

    Icono Ver detalles dentro de la ventana de previsualización del push de notificación

  5. Busca la fuente de datos de la imagen que quieres incluir.
  6. Haz 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, haz clic en el icono Insertar contenido multimedia en el cuadro Cuerpo.

    Añadir contenido multimedia a la notificación push.jpg

  8. Ve a la pestaña Imagen Dinámica.
  9. Pega la variable dinámica o URL dinámica de la imagen.

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

  10. Haz clic en Guardar.
  11. Comprueba que la imagen dinámica se ha añadido correctamente asegurándote de que aparece una en la pantalla de vista previa.
Ejemplo de uso del catálogo etiqueta 

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

  1. Ir a análisis > métrica
  2. Selecciona la métrica que deseas utilizar (por ejemplo, Producto pedido). 
  3. Haz clic en Detalles para un evento concreto.
  4. Busca la SKU o la etiqueta de identificación del producto.
  5. Copia la etiqueta de la etiqueta (excepto los paréntesis o los dos puntos) para que tengas la ortografía y las mayúsculas exactas.
    En el ejemplo siguiente, copiamos "ProductID."

    imagen5.png

  6. Pega esto en algún sitio donde no lo pierdas. 
  7. Navega hasta un flujo desencadenado por la misma métrica que acabas de seleccionar. 
  8. Selecciona la notificación push en la que quieres incluir tu imagen dinámica.
  9. En la barra lateral izquierda, haz clic en Configurar contenido o en Editar.
  10. A la izquierda, haz clic en el icono Insertar contenido multimedia en el cuadro Cuerpo.

    Añadir contenido multimedia a la notificación push.jpg

  11. Ve a la pestaña Imagen Dinámica.
  12. Pega la siguiente etiqueta de catálogo:
    {% catalog event.id %} {{catalog_item.featured_image.thumbnail.src}} {% endcatalog %}
  13. Sustituye id en {% catalog event.id %} por la etiqueta que copiaste anteriormente.
    Ejemplo: {% catalog event.ProductID %} {{catalog_item.featured_image.thumbnail.src}} {% endcatalog %}
  14. Haz clic en 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 sentencia if/else para decir que si hay una imagen variante, la muestres a los destinatarios; si no, utiliza 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 %}

Ten en cuenta que el formato exacto de estos extractos depende de tus integraciones, y no debes copiarlos de plantillas de correo electrónico.

Recursos adicionales

Recursos adicionales

¿Te resultó útil este artículo?
Usa este formulario solo para enviar comentarios sobre el artículo. Más información sobre cómo contactar al equipo de asistencia.

Descubre más sobre Klaviyo

Comunidad
Conecta con colegas, socios y expertos de Klaviyo para inspirarte, compartir ideas y resolver todas tus dudas.
Capacitación en vivo
Únete a una sesión en tiempo real con expertos de Klaviyo para conocer las mejores prácticas, cómo configurar funciones clave y mucho más.
Asistencia

Accede a la asistencia a través de tu cuenta.

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

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