Adressautovervollständigung (Google Maps)

Mit der Adressautovervollständigung zeigt Sami B2B Onboarding Adressvorschläge von Google an, sobald eine einkaufende Person ihre Straße zu tippen beginnt. Wählt sie einen Vorschlag aus, wird der Rest dieser Adresse für sie ausgefüllt. Einkaufende füllen das Formular schneller aus, und der Unternehmensstandort, den die App in Shopify erstellt, erhält eine saubere Adresse.

Sie fügen einen Google-Maps-Schlüssel für den Shop hinzu. Jedes Formular schaltet die Autovervollständigung ein oder aus.

Hinweis

Bevor Sie beginnen, brauchen Sie ein Google-Cloud-Konto mit eingerichteter Abrechnung. Google verlangt sie, bevor die Maps-APIs genutzt werden können.

Einen Browserschlüssel in Google Cloud erstellen

1. Ein Projekt wählen

   Öffnen Sie die Google Cloud Console und erstellen Sie ein Projekt oder wählen Sie das, das Sie verwenden möchten.

2. Die APIs einschalten

   Suchen Sie unter APIs & Services › Library nach Maps JavaScript API und aktivieren Sie sie, danach Places API. Die erste lädt die Vorschläge in Ihrem Onlineshop. Die zweite findet die Adressen.

3. Den Schlüssel erstellen

   Klicken Sie unter APIs & Services › Credentials auf Create credentials › API key. Kopieren Sie den Schlüssel. Er beginnt mit AIza.

4. Den Schlüssel auf Ihren Shop beschränken

   Öffnen Sie die Einstellungen des Schlüssels:

   1. Wählen Sie unter Application restrictions Websites und fügen Sie jede Domain hinzu, unter der Ihr Shop erreichbar ist, zum Beispiel https://example.com/* und https://your-store.myshopify.com/*.
   2. Wählen Sie unter API restrictions Restrict key und wählen Sie Maps JavaScript API und Places API aus.
   3. Klicken Sie auf Save.

Achtung

Der Schlüssel wird in die Seite Ihres Onlineshops geschrieben, sodass ihn dort alle lesen können. Die Website-Beschränkung verhindert, dass jemand anderes ihn nutzt und Ihre Google-Rechnung in die Höhe treibt. Das Panel der App erinnert Sie daran: This key is printed into the storefront page, so restrict it to your store’s domain in the Google console.

Den Schlüssel hinzufügen und einschalten

1. Das Panel Address autocomplete öffnen

   Gehen Sie zu Forms und klicken Sie neben dem Formular auf Edit. Klicken Sie in der Leiste links auf Integrations. Klicken Sie unter Connected apps in der Zeile Address autocomplete auf Set up.

   Das Panel Address autocomplete öffnet sich mit zwei Bereichen: Account und This form.

   

   Klicken Sie auf Set up, um Ihren Schlüssel hinzuzufügen; das Panel erklärt, welches Feld Vorschläge erhält, und erinnert Sie daran, den Schlüssel zu beschränken.

2. Den Schlüssel einfügen

   Klicken Sie unter Account auf Set up. Fügen Sie im Dialog Address autocomplete den Schlüssel in Maps API key ein und klicken Sie auf Save. Sie sehen Keys saved, und die Zeile Account zeigt den Schlüssel.

3. Aktivieren

   Klicken Sie unten im Panel auf Enable. Die Schaltfläche wechselt zu Disable, und die Zeile Address autocomplete unter Connected apps zeigt Active. Ist noch kein Schlüssel gespeichert, lautet ein Banner Add your Maps API key first.

4. Das Formular speichern

   Klicken Sie in der Speicherleiste auf Save. Sie sehen Form saved.

Welche Felder ausgefüllt werden

Vorschläge erscheinen in jedem Feld, das im Panel Shopify des Formulars Address line 1 zugeordnet ist. Wie das Panel sagt: 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.

Wählt die einkaufende Person einen Vorschlag, füllt die App die Felder derselben Adresse aus, die Folgendem zugeordnet sind:

Zugeordnet zu	Ausgefüllt mit
Address line 1	Hausnummer und Straßenname
City	Stadt oder Ort
State / province	Bundesland oder Provinz
ZIP / postal code	Postleitzahl
Country	Land

• Address line 2, Recipient und Phone bleiben der einkaufenden Person zum Ausfüllen überlassen.
• Liefer- und Rechnungsadresse werden getrennt behandelt. Das Auswählen einer Lieferadresse ändert nie die Felder der Rechnungsadresse.
• Die einkaufende Person kann jedes ausgefüllte Feld weiterhin ändern.
• Die Vorschläge erscheinen in der Sprache der Shopseite.

Das Formular Wholesale application, das die App erstellt, ordnet diese Felder für beide Adressen bereits zu. Wenn Sie eigene Adressfragen erstellen, ordnen Sie sie unter Company location zu. Siehe Antworten Shopify zuordnen.

In Ihrem Onlineshop prüfen

1. Das Formular öffnen

   Gehen Sie zu Forms und klicken Sie neben dem Formular auf Copy link. Öffnen Sie den Link in einem privaten Browserfenster.

2. Eine Adresse eingeben

   Beginnen Sie unter Shipping address in Address line 1 zu tippen, zum Beispiel 123 Main Street. Die Liste mit Googles Vorschlägen öffnet sich unter dem Feld.

3. Einen Vorschlag wählen

   Klicken Sie in der Liste auf eine Adresse. City, ZIP or postal code, Country und State or province werden für diese Adresse ausgefüllt.

Erscheinen keine Vorschläge:

Prüfen	Was zu tun ist
Die Zeile Address autocomplete zeigt Active, und das Formular ist gespeichert.	Klicken Sie im Panel auf Enable und dann auf Save.
Die Website-Beschränkung des Schlüssels enthält die Domain, auf der Sie testen.	Ihr Shop antwortet unter Ihrer eigenen Domain und unter seiner myshopify.com-Domain. Fügen Sie beide in Google Cloud hinzu.
Maps JavaScript API und Places API sind aktiviert, und für das Projekt ist die Abrechnung eingerichtet.	Schalten Sie sie unter APIs & Services › Library ein.
Das Feld ist Address line 1 zugeordnet.	Ordnen Sie es im Panel Shopify unter Company location zu.

Ausschalten

• Bei einem Formular: Öffnen Sie sein Panel Address autocomplete, klicken Sie auf Disable und dann auf Save.
• Bei jedem Formular: Klicken Sie unter Account auf Change und dann auf Remove keys. Der Dialog warnt Every form in this store stops using Address autocomplete until you add keys again. Klicken Sie zur Bestätigung auf Remove keys.

Nächste Schritte

• Antworten Shopify zuordnen — ordnen Sie Ihre Adressfragen zu, damit sie den Unternehmensstandort ausfüllen.
• Das Formular aufbauen — fügen Sie einem Formular Adressfelder hinzu.
• Captcha (reCAPTCHA, hCaptcha) — halten Sie Bots vom selben Formular fern.