Volver al blog BIM e IFC
Herramientas y comparativas · 2026-10-31 · 5 min
Cómo insertar un mapa de seguimiento de envíos en tu web: WordPress, Shopify, SharePoint y Taobao
Proveedores y transitarios pueden enseñar a sus clientes dónde está la mercancía, en su propia web, sin clave de API de mapas ni backend. Esto es lo que entra en cada plataforma, lo que le cuesta a la página y dónde la respuesta honesta es no.
Cómo insertar un mapa de seguimiento de envíos en tu web: WordPress, Shopify, SharePoint y Taobao — IFC Viewer Online article cover
Quien espera un contenedor desde Shanghái suele recibir un PDF y un enlace de la naviera. Si eres el proveedor o el transitario, puedes mostrar lo mismo en tu web, en un globo y con tus colores. El Tracking Globe lo hace con un fragmento de código y sin clave de API de mapas, y encaja en la mayoría de las webs. No en todas, y esta guía dice en cuáles.
Lo esencial
- WordPress y Shopify admiten una etiqueta script. SharePoint Online admite un iframe, cuando un propietario del sitio permite el dominio.
- En Taobao y Tmall no hemos podido confirmar una forma de ejecutar un widget en vivo, así que allí la vía admitida es una imagen.
- Dibuja tus datos o una simulación que siempre se etiqueta como tal. No se conecta a transportistas.
- Unos 30 KB en dos pasos, sin cookies, sin peticiones a terceros.
Envíos simulados en el widget real. Las simulaciones siempre llevan una etiqueta visible.
Qué entra en cada plataforma
| Plataforma | Cómo se inserta | La pega | Qué hemos probado |
|---|
| Cualquier web HTML | Etiqueta script y elemento | Una Content-Security-Policy estricta debe incluir el host del script | Escritorio y móvil, con peso y saltos de diseño medidos |
| WordPress | Bloque HTML personalizado, o shortcode de nuestro pequeño plugin | Los roles sin unfiltered_html pierden el código; WordPress.com pide plan de pago | Marcado del bloque en navegador, plugin con PHP; no una instalación real |
| Shopify | Sección Liquid personalizado, o fichero de sección del tema | Los campos de texto enriquecido lo eliminan; las tiendas headless con política propia deben permitir el host | Una página con las cabeceras de seguridad de una tienda real; no dentro de una tienda |
| SharePoint Online | Elemento web Insertar, como iframe | Un propietario debe permitir el dominio; los scripts de la página no se ejecutan | Un iframe aislado con política estricta; no un tenant real |
| Taobao / Tmall | Una imagen en el espacio de imágenes de tu tienda | Ningún widget en vivo que podamos confirmar; los enlaces externos están limitados | Solo la exportación de imagen |
Añádelo en cuatro pasos
- Elige tus datos Una demo simulada, una hoja de cálculo o JSON pegados, o una URL tuya que devuelva JSON. Los datos pegados se leen en la fuente de la página, así que los envíos privados van detrás de una URL de datos o de una búsqueda por referencia.
- Adáptalo a tu marca Colores, logo, fuente, idioma y altura. Tu propia hoja de estilos también puede fijar las variables, para que el widget siga el tema de tu web.
- Decide qué controla el visitante Arrastrar, zoom, cambio de globo a mapa, lista, búsqueda, leyenda y pantalla completa se pueden desactivar uno a uno. La etiqueta de las simulaciones no.
- Copia el fragmento de tu plataforma El configurador escribe la versión adecuada para cada plataforma, incluido el dominio que debe permitir el propietario de SharePoint.
Datos reales, sin servidor nuestro
El navegador de cada visitante llama directamente a tu URL, así que los datos de tus envíos nunca pasan por nosotros. Esa URL debe permitir peticiones de otros orígenes y necesita sus propias reglas de acceso si los datos son privados. Las filas aceptan los nombres que suelen usar transportistas y hojas de cálculo, como tracking_number, origin, destination, eta, latitude y longitude. Una URL de búsqueda con {id} devuelve una referencia cada vez, así que el cliente ve su envío y no toda tu cartera.
Lo que le cuesta a la página
Un cargador de 3 KB reserva el hueco, así nada salta. El motor de 27 KB carga cuando el mapa está a 300 px de la pantalla, o al hacer clic si lo prefieres. En nuestras páginas de prueba, en escritorio y en un móvil emulado, los saltos de diseño fueron cero y el motor no cargó hasta desplazarnos hacia él. Fuera de pantalla deja de dibujar, la rueda sigue desplazando tu página salvo con Ctrl o ⌘, y el ajuste de movimiento reducido detiene el giro. El mapa del mundo va dentro del fichero, así que la IP del visitante no llega a ningún proveedor de mapas.
Dónde la respuesta es no, o todavía no
WordPress elimina iframes y scripts a los usuarios sin la capacidad unfiltered_html[wp], y WordPress.com solo los permite en planes de pago[wpcom]. SharePoint mantiene una lista de permitidos por sitio[sp], y no hemos creado un elemento web SPFx, que necesitaría el catálogo de aplicaciones de tu organización. Sobre Taobao, la fuente más oficial que hemos encontrado[taobao] es un borrador antiguo, así que consulta a la plataforma antes de confiar en nada. Para compradores en China, aloja los dos ficheros en un servidor de allí: no hemos medido cómo carga este sitio desde China.
Cómo insertar un mapa de seguimiento de envíos en tu web: WordPress, Shopify, SharePoint y Taobao