Descripción general

Klaviyo ya te permite enviar correos electrónicos de carrito abandonado cuando un cliente deja artículos en su carrito sin completar el pago. Al conectar las reseñas de Growave a Klaviyo a través de Web Feeds, puedes mostrar reseñas de clientes de 5 estrellas para los productos dejados en el carrito. Esta capa adicional de prueba social puede animar a los clientes a regresar y completar su compra.

Cómo utilizar Web Feeds con Klaviyo

Prepara tu Web Feed en Growave

Ve al panel de administración de Growave → Integraciones → Klaviyo.
Busca la opción Klaviyo Web Feed. Haz clic en Activar feed de reseñas de productos. Permite una hora para que el feed se rellene antes de usar su URL en Klaviyo.
Copia la URL del feed proporcionada para tu tienda. Este enlace extrae dinámicamente los datos de las reseñas de productos.

⚠️ Importante

Cada Web Feed está vinculado al dominio principal de tu tienda. Si utilizas varias monedas o subdominios, es posible que el feed solo muestre reseñas para la configuración de la tienda principal.

Configura los Web Feeds de Klaviyo

En tu panel de administración de Klaviyo, haz clic en el nombre de tu empresa en la esquina inferior izquierda.
Ve a Configuración → Otros → Web feeds.
Haz clic en Añadir feed web.
Completa los campos:
- Nombre del feed: usa GROWAVE_PRODUCT_REVIEWS
- URL del feed: pega la URL de Web Feed que copiaste de tu panel de administración de Growave → Integraciones → Klaviyo.
- Método de solicitud: selecciona GET.
- Tipo de contenido: selecciona JSON.

5. Haz clic en Add web feed. Klaviyo validará tu feed. Si tiene éxito, aparecerá en tu lista de Web feeds y podrás previsualizarlo.

Inserta reseñas en los correos electrónicos de carrito abandonado

Una vez que el Web Feed esté activo, puedes insertar reseñas directamente en tu flujo de carrito abandonado.

En el panel de administración de Klaviyo, abre tu flujo de carrito abandonado o crea uno nuevo.
Haz clic en Editar en la acción de correo electrónico existente o añade una nueva.
Añade un bloque de texto y ve a la sección Código fuente.
Reemplaza el código de ejemplo con el fragmento de HTML a continuación y haz clic en Aplicar. Guarda e inicia tu flujo.

Fragmento de HTML de reseñas de productos para correos electrónicos de carrito abandonado de Klaviyo


{% with max_product_count=5 max_review_count=3 %}
    {% for line_item in event.extra.line_items %}
        {% if forloop.counter <= max_product_count %}
            {% with line_item_product_id=line_item.product.id|slugify %}
                {% for product_id, reviews in feeds.GROWAVE_PRODUCT_REVIEWS.items %} 
                    {% if line_item_product_id == product_id %}
                        <div style="height:0px; margin:20px 0px; border-top:1px solid #eaedef;"></div>

                        <h4 style="text-align:center;">What customers are saying about <strong>{{ line_item.product.title }}</strong></h4>

                        {% for review in reviews %}
                            {% if forloop.counter <= max_review_count %}
                                <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:middle; margin:20px 0px;" width="100%">
                                    <tbody>
                                        <tr>
                                            <td align="center">
                                                <div>
                                                    <img width="28" height="28" src="https://growave-common-assets.s3.us-east-1.amazonaws.com/email-assets/review-star-f6c343.png" alt="1 Star" />
                                                    <img width="28" height="28" src="https://growave-common-assets.s3.us-east-1.amazonaws.com/email-assets/review-star-f6c343.png" alt="2 Stars" />
                                                    <img width="28" height="28" src="https://growave-common-assets.s3.us-east-1.amazonaws.com/email-assets/review-star-f6c343.png" alt="3 Stars" />
                                                    <img width="28" height="28" src="https://growave-common-assets.s3.us-east-1.amazonaws.com/email-assets/review-star-f6c343.png" alt="4 Stars" />
                                                    <img width="28" height="28" src="https://growave-common-assets.s3.us-east-1.amazonaws.com/email-assets/review-star-f6c343.png" alt="5 Stars" />
                                                </div>
                                            </td>
                                        </tr>

                                        {% if review.2 %}
                                            <!-- Title -->
                                            <tr>
                                                <td align="center" style="padding-bottom: 5px; word-break:break-word;" vertical-align="middle">
                                                    <strong style="font-size: 16px;">{{ review.2 }}</strong>
                                                </td>
                                            </tr>
                                        {% endif %} 

                                        <tr>
                                            <!-- Body -->
                                            <td align="center" style="padding-bottom:5px; word-break:break-word;" vertical-align="middle">
                                                <p style="font-size:16px;">{{ review.0 }}</p>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            {% endif %}
                        {% endfor %}
                    {% endif %}
                {% endfor %}    
            {% endwith %}
        {% endif %}
    {% endfor %}
    <div style="height: 0px; margin: 20px 0px 0px; border-top: 1px solid #eaedef;"></div>
{% endwith %}

✅ Consejo

Puedes controlar cuánto contenido se muestra en tus correos electrónicos ajustando los valores en la parte superior del bloque de código:

max_product_count=5 → número máximo de productos mostrados (el valor predeterminado es 5).
max_review_count=3 → número máximo de reseñas mostradas por producto (el valor predeterminado es 3).

Preguntas frecuentes

¿Qué nombre de feed debo utilizar en Klaviyo?

El nombre del feed debe establecerse en GROWAVE_PRODUCT_REVIEWS. Nuestro fragmento de HTML hace referencia a feeds.GROWAVE_PRODUCT_REVIEWS.items, por lo que utilizar cualquier otro nombre romperá la integración.

¿Necesito cambiar el método de solicitud o el tipo de contenido?

No. Mantén la configuración predeterminada de Klaviyo: Request method = GET and Content type = JSON. Cambiar estos valores evitará que el feed funcione.

¿Dónde debo pegar el código HTML en Klaviyo?

Usa un bloque de texto en modo de código fuente. Si pegas el fragmento en un bloque HTML, es posible que no se renderice correctamente.

¿Cuántos productos y reseñas se muestran por defecto?

El fragmento está configurado para mostrar hasta 5 productos y hasta 3 reseñas por producto. Puedes ajustar estos límites a la baja editando los valores de max_product_count y max_review_count en la parte superior del código.

¿Qué sucede si un producto no tiene reseñas de 5 estrellas?

El bloque de reseñas para ese producto se ocultará automáticamente, por lo que el diseño de tu correo electrónico se mantendrá limpio.

¿Necesito activar el seguimiento de carrito abandonado en Growave?

No. Si ya has configurado el flujo de Klaviyo correspondiente, rastreará los carritos abandonados automáticamente. Growave solo proporciona los datos de las reseñas de productos a través de Web Feed.

Para cualquier pregunta o solicitud relacionada con la integración con Klaviyo, ponte en contacto con nosotros en [email protected] o utiliza el icono de chat en la esquina inferior derecha de tu panel de administración de Growave. ¡Estamos aquí para ayudarte! 🤗

Añadir reseñas de productos a los correos electrónicos de carrito abandonado de Klaviyo a través de Web Feed