Torna al blog BIM i IFC
Eines i comparatives · 2026-10-31 · 5 min
Com inserir un mapa de seguiment d’enviaments al teu web: WordPress, Shopify, SharePoint i Taobao
Proveïdors i transitaris poden mostrar als clients on és la mercaderia, al seu propi web, sense clau d’API de mapes ni backend. Això és el que hi cap a cada plataforma, el que costa a la pàgina i on la resposta honesta és no.
Com inserir un mapa de seguiment d’enviaments al teu web: WordPress, Shopify, SharePoint i Taobao — IFC Viewer Online article cover
Qui espera un contenidor de Xangai sol rebre un PDF i un enllaç de la naviliera. Si ets el proveïdor o el transitari, pots mostrar el mateix al teu web, en un globus i amb els teus colors. El Tracking Globe ho fa amb un fragment de codi i sense clau d’API de mapes, i encaixa a la majoria de webs. No a tots, i aquesta guia diu a quins.
L’essencial
- WordPress i Shopify admeten una etiqueta script. SharePoint Online admet un iframe, quan un propietari permet el domini.
- A Taobao i Tmall no hem pogut confirmar cap manera d’executar un widget en viu, així que la via admesa és una imatge.
- Dibuixa les teves dades, o una simulació sempre etiquetada com a tal. No es connecta a transportistes.
- Uns 30 KB en dos passos, sense galetes, sense peticions a tercers.
Enviaments simulats al widget real. Les simulacions sempre porten una etiqueta visible.
Què hi cap a cada plataforma
| Plataforma | Com s’insereix | La pega | Què hem provat |
|---|
| Qualsevol web HTML | Etiqueta script i element | Una Content-Security-Policy estricta ha d’incloure l’amfitrió de l’script | Escriptori i mòbil, amb pes i salts de disseny mesurats |
| WordPress | Bloc HTML personalitzat, o shortcode del nostre petit connector | Els rols sense unfiltered_html perden el codi; WordPress.com demana pla de pagament | Marcatge del bloc al navegador, connector amb PHP; no una instal·lació real |
| Shopify | Secció Liquid personalitzat, o fitxer de secció del tema | Els camps de text enriquit l’eliminen; les botigues headless amb política pròpia han de permetre l’amfitrió | Una pàgina amb les capçaleres de seguretat d’una botiga real; no dins d’una botiga |
| SharePoint Online | Element web Insereix, com a iframe | Un propietari ha de permetre el domini; els scripts de pàgina no s’executen | Un iframe aïllat amb política estricta; no un tenant real |
| Taobao / Tmall | Una imatge a l’espai d’imatges de la botiga | Cap widget en viu que puguem confirmar; els enllaços externs estan limitats | Només l’exportació d’imatge |
Afegeix-lo en quatre passos
- Tria les dades Una demo simulada, un full de càlcul o JSON enganxats, o una URL teva que retorni JSON. Les dades enganxades es llegeixen a la font de la pàgina, així que els enviaments privats van darrere d’una URL de dades o d’una cerca per referència.
- Adapta’l a la marca Colors, logo, tipografia, idioma i alçada. El teu full d’estils també pot fixar les variables, perquè el widget segueixi el tema del web.
- Decideix què controla el visitant Arrossegar, zoom, canvi de globus a mapa, llista, cerca, llegenda i pantalla completa es poden desactivar d’un en un. L’etiqueta de les simulacions no.
- Copia el fragment de la teva plataforma El configurador escriu la versió adequada per a cada plataforma, inclòs el domini que ha de permetre el propietari de SharePoint.
Dades reals, sense servidor nostre
El navegador de cada visitant crida directament la teva URL, així que les dades dels enviaments mai passen per nosaltres. Aquesta URL ha de permetre peticions d’altres orígens i necessita regles d’accés pròpies si les dades són privades. Les files accepten els noms que solen fer servir transportistes i fulls de càlcul, com tracking_number, origin, destination, eta, latitude i longitude. Una URL de cerca amb {id} retorna una referència cada vegada, així el client veu el seu enviament i no tota la cartera.
El que costa a la pàgina
Un carregador de 3 KB reserva l’espai, res no salta. El motor de 27 KB carrega quan el mapa és a 300 px de la pantalla, o en fer clic si ho prefereixes. A les pàgines de prova, en escriptori i mòbil emulat, els salts de disseny van ser zero i el motor no va carregar fins que ens hi vam desplaçar. Fora de pantalla deixa de dibuixar, la roda continua desplaçant la pàgina tret de Ctrl o ⌘, i l’ajust de moviment reduït atura el gir. El mapa del món va dins del fitxer, així que cap IP de visitant arriba a un proveïdor de mapes.
On la resposta és no, o encara no
WordPress elimina iframes i scripts als usuaris sense la capacitat unfiltered_html[wp], i WordPress.com només els permet en plans de pagament[wpcom]. SharePoint manté una llista de permesos per lloc[sp], i no hem creat cap element web SPFx, que necessitaria el catàleg d’aplicacions de la teva organització. Sobre Taobao, la font més oficial que hem trobat[taobao] és un esborrany antic, així que consulta la plataforma abans de refiar-te’n. Per a compradors a la Xina, allotja els dos fitxers en un servidor d’allà: no hem mesurat com carrega aquest lloc des de la Xina.
Com inserir un mapa de seguiment d’enviaments al teu web: WordPress, Shopify, SharePoint i Taobao