Automatisk adressifyllning (Google Maps)

Med automatisk adressifyllning visar Sami B2B Onboarding Googles adressförslag så fort en köpare börjar skriva sin gatuadress. När köparen väljer ett förslag fylls resten av adressen i. Köpare blir klara med formuläret snabbare, och företagsplatsen som appen skapar i Shopify får en korrekt adress.

Du lägger till en Google Maps-nyckel för butiken. Varje formulär slår automatisk ifyllning på eller av.

Note

Innan du börjar behöver du ett Google Cloud-konto med fakturering inställd. Google kräver det innan dess Maps-API:er kan användas.

Skapa en webbläsarnyckel i Google Cloud

1. Välj ett projekt

   Öppna Google Cloud-konsolen och skapa ett projekt, eller välj det du vill använda.

2. Aktivera API:erna

   I APIs & Services › Library söker du efter och aktiverar Maps JavaScript API och sedan Places API. Det första laddar förslagen i din butik. Det andra hittar adresserna.

3. Skapa nyckeln

   I APIs & Services › Credentials klickar du på Create credentials › API key. Kopiera nyckeln. Den börjar med AIza.

4. Begränsa nyckeln till din butik

   Öppna nyckelns inställningar:

   1. Under Application restrictions väljer du Websites och lägger till varje domän som din butik nås på, till exempel https://example.com/* och https://your-store.myshopify.com/*.
   2. Under API restrictions väljer du Restrict key och markerar Maps JavaScript API och Places API.
   3. Klicka på Save.

Caution

Nyckeln skrivs in på din butikssida, så vem som helst kan läsa den där. Webbplatsbegränsningen är det som hindrar andra från att använda den och driva upp din Google-faktura. Appens panel påminner dig: This key is printed into the storefront page, so restrict it to your store’s domain in the Google console.

Lägg till nyckeln och slå på funktionen

1. Öppna panelen Address autocomplete

   Gå till Forms och klicka på Edit bredvid formuläret. Klicka på Integrations i listen till vänster. Under Connected apps klickar du på Set up på raden Address autocomplete.

   Panelen Address autocomplete öppnas med två avsnitt: Account och This form.

   

   Klicka på Set up för att lägga till din nyckel. Panelen förklarar vilket fält som får förslag och påminner dig om att begränsa nyckeln.

2. Klistra in nyckeln

   Under Account klickar du på Set up. I dialogrutan Address autocomplete klistrar du in nyckeln i Maps API key och klickar på Save. Du ser Keys saved, och raden Account visar nyckeln.

3. Aktivera

   Längst ned i panelen klickar du på Enable. Knappen ändras till Disable, och raden Address autocomplete i Connected apps visar Active. Om ingen nyckel har sparats ännu visas en banderoll med texten Add your Maps API key first.

4. Spara formuläret

   Klicka på Save i sparfältet. Du ser Form saved.

Vilka fält som fylls i

Förslag visas i varje fält som är kopplat till Address line 1 i formulärets panel Shopify. Som det står i panelen: When a buyer starts typing in a field mapped to Address line 1, Google suggests addresses. Picking one fills that block’s city, state, postal code and country.

När köparen väljer ett förslag fyller appen i fälten i samma adress som är kopplade till:

Kopplat till	Fylls i med
Address line 1	Gatunummer och gatunamn
City	Staden eller orten
State / province	Delstaten eller provinsen
ZIP / postal code	Postnumret
Country	Landet

• Address line 2, Recipient och Phone lämnas för köparen att fylla i.
• Leveransadressen och faktureringsadressen hålls isär. Att välja en leveransadress ändrar aldrig faktureringsfälten.
• Köparen kan fortfarande ändra alla rutor som har fyllts i.
• Förslagen visas på språket för butikssidan.

Formuläret Wholesale application som appen skapar har redan kopplat de här fälten för båda adresserna. Om du bygger egna adressfrågor kopplar du dem i Company location. Se Koppla svar till Shopify.

Testa i din butik

1. Öppna formuläret

   Gå till Forms och klicka på Copy link bredvid formuläret. Öppna länken i ett privat webbläsarfönster.

2. Skriv en adress

   Under Shipping address börjar du skriva i Address line 1, till exempel 123 Main Street. Googles lista med förslag öppnas under rutan.

3. Välj ett förslag

   Klicka på en adress i listan. City, ZIP or postal code, Country och State or province fylls i för den adressen.

Om inga förslag visas:

Kontrollera	Gör så här
Raden Address autocomplete visar Active, och formuläret är sparat.	Klicka på Enable i panelen och sedan på Save.
Nyckelns webbplatsbegränsning omfattar domänen du testar på.	Din butik svarar på din egen domän och på sin myshopify.com-domän. Lägg till båda i Google Cloud.
Maps JavaScript API och Places API är aktiverade, och fakturering är inställd för projektet.	Aktivera dem i APIs & Services › Library.
Fältet är kopplat till Address line 1.	Koppla det i panelen Shopify, under Company location.

Stäng av funktionen

• På ett formulär: öppna dess panel Address autocomplete, klicka på Disable och sedan på Save.
• På alla formulär: under Account klickar du på Change och sedan på Remove keys. Dialogrutan varnar: Every form in this store stops using Address autocomplete until you add keys again. Klicka på Remove keys för att bekräfta.

Nästa steg

• Koppla svar till Shopify — koppla dina adressfrågor så att de fyller i företagsplatsen.
• Bygg ditt formulär — lägg till adressfält i ett formulär.
• Captcha (reCAPTCHA, hCaptcha) — håll botar borta från samma formulär.