Store Locator: la mappa interattiva delle tue sedi sul tuo sito
A chi si rivolge: hai più sedi in una stessa Sphere (franchising, rete, catena) e vuoi mostrarle su una mappa interattiva integrata nel tuo sito, con ricerca, indicazioni stradali e orari.
Cosa vedrai: dove si trova lo Store Locator nelle Settings, come attivarlo, cosa configurano le sue quattro schede (Design, Features, SEO, Embed) e come inserirlo nel tuo sito.
Panoramica
Lo Store Locator è una mappa delle tue sedi che integri nel tuo sito. I tuoi visitatori ci trovano il punto vendita più vicino, i suoi orari e la strada per arrivarci.
Si configura una sola volta per tutta la Sphere: la pagina lo indica in alto, « These settings apply to the whole […] sphere, for each of its bubbles. » Poi scegli quali sedi compaiono sulla mappa.
Per mostrarlo sul tuo sito, due strade:
- WordPress: il plugin GMB Club Connect e uno shortcode da incollare. Il plugin crea anche una pagina SEO per ogni sede.
- Qualsiasi altro sito: un piccolo script da incollare nel tuo codice HTML.
Passaggio 1: attivare lo Store Locator
Clicca sull'ingranaggio in alto a destra nell'intestazione per aprire le Settings. Nel menu a sinistra, sotto Sphere, clicca su Store Locator.
URL: /dashboard/parametres/store-locator
La scheda Store Locator (« Configure the interactive map of your locations ») contiene l'interruttore Enable Store Locator. Finché è spento, sotto compare la dicitura « Store Locator disabled ».
Attiva l'interruttore. Compare il blocco Configuration (« Design, features, SEO and embed »), con le sue quattro schede: Design, Features, SEO ed Embed. Clicca su Configuration per chiudere o aprire il blocco.
Passaggio 2: il design
La scheda Design configura l'aspetto della mappa. È divisa in sezioni che apri una alla volta.
Colors: Primary color, Secondary color, Page background, Main text, Headings, Secondary text, Subtle text, Links, Card background, Card border e Separators. Ogni colore si sceglie dal selettore o si scrive in codice esadecimale (per esempio #1F3A5F).
Typography:
- Main font e Heading font, da scegliere in un elenco (per esempio Inter e Playfair Display);
- Base text size, H1 size e H2 size, regolate con il cursore;
- Text weight e Heading weight (per esempio
400, Regulare700, Bold).
Cards and shapes:
- Card style: Shadow, Border o Flat;
- Card shadow: None, Subtle, Medium o Strong;
- con il cursore: Card radius, Border radius, Section spacing, Max width (single page) e Map height.
Più in basso, la sezione Card layout (widget) configura la disposizione delle schede delle sedi. La scheda copre anche il logo e un campo CSS per andare oltre. Clicca su Save in fondo alla scheda.
Passaggio 3: le funzionalità
La scheda Features sceglie cosa può fare il visitatore. Ogni riga ha il suo interruttore:
| Interruttore | Cosa aggiunge alla mappa |
|---|---|
| Search bar | Un campo per cercare una sede. |
| Automatic geolocation | La posizione del visitatore, per mostrargli le sedi vicine. |
| Filter by city | Un filtro per città. |
| Filter by category | Un filtro per categoria di sede. |
| Click to call | Un pulsante per chiamare la sede. |
| Directions link | Un link per ottenere le indicazioni stradali. |
| Website link | Un link al sito della sede. |
| Show opening hours | Gli orari di apertura. |
| Show images/avatars | L'immagine di ogni sede. |
Scorrendo la scheda:
- Opening hours display mode: Collapsible (predefinito, il visitatore clicca per aprire), Today (sono visibili solo gli orari del giorno) o Full (la tabella è sempre visibile);
- Primary button: Directions, Website o Call. Questo pulsante è più grande e messo in evidenza rispetto agli altri;
- Locations to include: l'elenco delle Bubble della Sphere, con la loro città. È qui che scegli quelle che compaiono sulla mappa;
- Max results: per esempio
50; - Default zoom: il livello di zoom all'apertura, con il cursore;
- Default center: la Latitude e la Longitude del punto di partenza della mappa. Il link Center on France le compila per te.
Clicca su Save in fondo alla scheda.
Passaggio 4: la SEO
La scheda SEO serve solo se il tuo sito è su WordPress con il plugin GMB Club Connect: il riquadro in basso lo precisa, « These templates are used to generate SEO pages on your WordPress site. »
| Campo | A cosa serve |
|---|---|
| Index page title | Il titolo della pagina che elenca tutte le tue sedi, per esempio Trova il tuo ottico Optique Martin. |
| Page slug | La parte finale dell'indirizzo di questa pagina, per esempio le-nostre-sedi. Se lo lasci vuoto, viene generato per te. |
| Page title template | Il titolo della pagina di ogni sede, per esempio {bulle_name} - ottico a {city}. |
| Meta description template | Il testo che Google può mostrare sotto il titolo, per esempio {sphere_name} a {city}: esame della vista, occhiali e lenti a contatto. Orari e indicazioni stradali. |
Le variabili disponibili sono ricordate in fondo alla scheda: {bulle_name} (il nome della sede), {sphere_name} (il nome del brand) e {city} (la città). Ogni pagina riceve così un titolo proprio, senza che tu debba scriverlo sede per sede.
Clicca su Save.
Passaggio 5: integrare la mappa nel tuo sito
La scheda Embed fornisce il codice da inserire nel tuo sito. Il codice si basa su una chiave in sola lettura, che la scheda crea con un clic.
Su WordPress: il plugin GMB Club Connect
Il blocco WordPress (« Automatic installation via the plugin ») ti dice: « Install the GMB Club Connect plugin then add this shortcode on the page of your choice ».
[gmbclco_store_locator]
Copia lo shortcode con l'icona a destra del codice, poi incollalo nella pagina che preferisci, per esempio una pagina « I nostri negozi ». Il plugin genera anche pagine SEO per ogni sede (con il markup Schema.org), sincronizzate automaticamente. È a queste pagine che si applicano le impostazioni della scheda SEO.
È lo stesso plugin che serve a pubblicare i tuoi articoli del blog.
Su un altro sito: lo script
Apri Manual integration (script tag). Il testo indica: « For a custom integration, paste this code into your HTML ». Il codice somiglia a questo, con la tua chiave già inserita:
<script src="https://app.gmb-club.com/static/store-locator/widget.js" defer></script>
<div id="gmb-store-locator" data-api-key="gmb_live_…" data-lang="en"></div>
Copialo con l'icona a destra del blocco, poi incollalo nel punto della tua pagina in cui deve comparire la mappa.
Metodo consigliato
- Apri Settings › Store Locator e attiva l'interruttore.
- In Design, riprendi i colori e i caratteri del tuo sito, poi Save.
- In Features, scegli i pulsanti utili (indicazioni, chiamata, sito), il Primary button e le Locations to include, poi Save.
- Su WordPress, compila la scheda SEO, poi Save.
- In Embed, copia lo shortcode o lo script e incollalo in una pagina bozza del tuo sito.
- Verifica che compaiano tutte le tue sedi, che gli orari siano corretti e che i pulsanti funzionino, poi pubblica la pagina.
Problemi frequenti
Una sede non compare sulla mappa → Nella scheda Features, verifica che sia selezionata in Locations to include, e che Max results sia abbastanza alto.
Le mie modifiche non si vedono sul mio sito → Design, Features e SEO hanno ciascuna il suo pulsante Save. Salva la scheda modificata prima di passare alla successiva, poi ricarica la pagina del tuo sito.
I titoli delle pagine delle mie sedi non cambiano → I template della scheda SEO si applicano solo alle pagine create dal plugin WordPress GMB Club Connect. Con lo script non hanno effetto.
La mappa si apre troppo lontano o nel posto sbagliato → Regola il Default zoom e il Default center in Features. Center on France riporta il punto di partenza sulla Francia.
Voglio che i miei visitatori vedano tutti gli orari in una volta → In Features, scegli Full in Opening hours display mode.