Saisie automatique d'adresse (Google Maps)

Avec la saisie automatique d’adresse, Sami B2B Onboarding affiche les suggestions d’adresse de Google dès qu’une personne acheteuse commence à saisir sa rue. Choisir une suggestion remplit le reste de l’adresse. Le formulaire est terminé plus vite, et le site de l’entreprise que l’application crée dans Shopify reçoit une adresse propre.

Vous ajoutez une seule clé Google Maps pour la boutique. Chaque formulaire active ou désactive la saisie automatique.

Note

Avant de commencer, il vous faut un compte Google Cloud avec la facturation configurée. Google l’exige avant de permettre l’utilisation de ses API Maps.

Créer une clé de navigateur dans Google Cloud

1. Choisir un projet

   Ouvrez la console Google Cloud et créez un projet, ou choisissez celui que vous voulez utiliser.

2. Activer les API

   Dans APIs & Services › Library, recherchez et activez Maps JavaScript API, puis Places API. La première charge les suggestions sur votre boutique. La seconde trouve les adresses.

3. Créer la clé

   Dans APIs & Services › Credentials, cliquez sur Create credentials › API key. Copiez la clé. Elle commence par AIza.

4. Restreindre la clé à votre boutique

   Ouvrez les paramètres de la clé :

   1. Sous Application restrictions, choisissez Websites et ajoutez chaque domaine sur lequel votre boutique est accessible, par exemple https://example.com/* et https://your-store.myshopify.com/*.
   2. Sous API restrictions, choisissez Restrict key et sélectionnez Maps JavaScript API et Places API.
   3. Cliquez sur Save.

Attention

La clé est écrite dans la page de votre boutique, donc tout le monde peut la lire. C’est la restriction par site web qui empêche quelqu’un d’autre de l’utiliser et de faire grimper votre facture Google. Le panneau de l’application vous le rappelle : This key is printed into the storefront page, so restrict it to your store’s domain in the Google console.

Ajouter la clé et l’activer

1. Ouvrir le panneau Address autocomplete

   Allez dans Forms et cliquez sur Edit à côté du formulaire. Dans le rail à gauche, cliquez sur Integrations. Sous Connected apps, cliquez sur Set up sur la ligne Address autocomplete.

   Le panneau Address autocomplete s’ouvre avec deux sections : Account et This form.

   

   Cliquez sur Set up pour ajouter votre clé ; le panneau explique quel champ reçoit les suggestions et vous rappelle de restreindre la clé.

2. Coller la clé

   Sous Account, cliquez sur Set up. Dans la boîte de dialogue Address autocomplete, collez la clé dans Maps API key et cliquez sur Save. Keys saved s’affiche, et la ligne Account indique la clé.

3. L’activer

   En bas du panneau, cliquez sur Enable. Le bouton devient Disable, et la ligne Address autocomplete dans Connected apps affiche Active. Si aucune clé n’est encore enregistrée, un bandeau indique Add your Maps API key first.

4. Enregistrer le formulaire

   Cliquez sur Save dans la barre d’enregistrement. Form saved s’affiche.

Les champs qu’elle remplit

Les suggestions apparaissent dans chaque champ associé à Address line 1 dans le panneau Shopify du formulaire. Comme l’indique le panneau, 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.

Lorsque la personne acheteuse choisit une suggestion, l’application remplit les champs de la même adresse qui sont associés à :

Associé à	Rempli avec
Address line 1	Le numéro et le nom de la rue
City	La ville ou la commune
State / province	L’État ou la province
ZIP / postal code	Le code postal
Country	Le pays

• Address line 2, Recipient et Phone sont laissés à la personne acheteuse.
• Les adresses de livraison et de facturation sont séparées. Choisir une adresse de livraison ne modifie jamais les champs de facturation.
• La personne acheteuse peut toujours modifier chaque champ rempli.
• Les suggestions sont dans la langue de la page de la boutique.

Le formulaire Wholesale application créé par l’application associe déjà ces champs pour les deux adresses. Si vous créez vos propres questions d’adresse, associez-les dans Company location. Consultez Associer les réponses à Shopify.

Vérifier sur votre boutique

1. Ouvrir le formulaire

   Allez dans Forms et cliquez sur Copy link à côté du formulaire. Ouvrez le lien dans une fenêtre de navigation privée.

2. Saisir une adresse

   Sous Shipping address, commencez à saisir dans Address line 1, par exemple 123 Main Street. La liste de suggestions de Google s’ouvre sous le champ.

3. Choisir une suggestion

   Cliquez sur une adresse de la liste. City, ZIP or postal code, Country et State or province se remplissent pour cette adresse.

Si aucune suggestion n’apparaît :

Vérification	Que faire
La ligne Address autocomplete affiche Active, et le formulaire est enregistré.	Cliquez sur Enable dans le panneau, puis sur Save.
La restriction par site web de la clé inclut le domaine sur lequel vous testez.	Votre boutique répond sur votre propre domaine et sur son domaine myshopify.com. Ajoutez les deux dans Google Cloud.
Maps JavaScript API et Places API sont activées, et la facturation est configurée sur le projet.	Activez-les dans APIs & Services › Library.
Le champ est associé à Address line 1.	Associez-le dans le panneau Shopify, sous Company location.

La désactiver

• Sur un formulaire : ouvrez son panneau Address autocomplete, cliquez sur Disable, puis sur Save.
• Sur tous les formulaires : sous Account, cliquez sur Change, puis sur Remove keys. La boîte de dialogue avertit : Every form in this store stops using Address autocomplete until you add keys again. Cliquez sur Remove keys pour confirmer.

Étapes suivantes

• Associer les réponses à Shopify : associez vos questions d’adresse pour qu’elles remplissent le site de l’entreprise.
• Créer votre formulaire : ajoutez des champs d’adresse à un formulaire.
• Captcha (reCAPTCHA, hCaptcha) : tenez les robots à l’écart du même formulaire.