<story-feed> se configura con atributos HTML, sin SDK ni código propio.
Esta es la lista completa: qué resuelve cada uno y por qué le sirve a tu medio.
| Atributo | Intención — qué resuelve | Beneficio para tu medio |
|---|---|---|
endpoint |
Conexión a tu feed (.../api/v1/feed; el detalle se deriva a
.../story/:slug).
|
Integración en 2 líneas, sin SDK ni plugins de tu CMS. |
client |
Identidad del medio/sección: segmenta contenido y atribuye métricas
(sfm_client). |
Un solo despliegue para todos tus sitios y secciones, cada uno con sus datos y analítica separados. |
detail="false" |
Modo solo carrusel: el CTA abre la nota original con UTMs en vez del lector interno. | Deriva tráfico directo a tu CMS cuando querés visitas clásicas en tu artículo. |
snap |
Avance magnético por tarjeta (snap="false" lo desactiva).
|
Se adapta a tu diseño (grillas, barras laterales, portadas) sin pelear con el desplazamiento de tu página. |
peek |
Pista de descubrimiento: desplazamiento corto de ida y vuelta a los 5s si el usuario todavía no se desplazó. | Más descubrimiento sin tutoriales: enseña que hay más contenido al scrollear. |
background-blur |
Fondo cinematográfico: desenfoque de la tarjeta activa detrás del widget
(solo escritorio y como
sección entera) + evento
background-change.
|
Estética premium tipo shorts sin código extra; o escuchá el evento y pintá tu propio fondo. |
gtm-id |
Puente a tu medición: reenvía las 7 métricas al dataLayer de
tu GTM, además del GA4
propio.
|
Medís en tus paneles sin instrumentar nada, sin doble conteo ni etiquetas duplicadas. |
url-sync |
Deep-links compartibles: sincroniza la URL
(?article=story/:slug), responde a los botones
atrás/adelante y emite sf-navigate. |
Cada story es un link: compartible por WhatsApp/redes, con botón atrás que funciona. Ideal cuando el feed es el contenido principal de la página. |
update-meta / update-title |
Con url-sync, sincroniza <title>,
og:* y
canonical con la story activa (activado por defecto).
|
Vistas previas correctas al
compartir y JSON-LD con nodo
WebPage solo cuando el feed ES la página.
|
initial-cursor |
Entrada a mitad del feed: arranca en el cursor indicado. | Campañas, notificaciones y boletines que aterrizan en la story exacta, no siempre al inicio. |
feedCss / detailCss |
Branding total vía <script class="gts-custom-css">:
CSS inyectado en el Shadow DOM
del feed y del lector. |
100% tu libro de marca — tipografías, colores, CTA y lector sin que tu CSS global rompa nada. Tip: tu agente IA puede generarlo con el skill de custom-css y lo pegás en el admin. |
preferred-source |
Fuente preferida en Google: suma un icono G en el lector que invita a
elegir tu dominio como fuente preferida (el dominio se detecta solo;
preferred-source-theme / preferred-source-lang opcionales). |
Volvé a aparecer en Google: tus lectores te eligen y tu contenido destaca en Top Stories y AI Overviews para ellos. |
Ejemplo mínimo con lo esencial:
<story-feed endpoint=".../api/v1/feed" client="tu-medio" url-sync peek background-blur gtm-id="GTM-XXXXXX">
— quitá lo que no necesites: todo lo demás es opcional.