Aller au contenu principal

NeighborhoodMatch

StableAnglais et françaisÉ.-U. 🇺🇸 et Canada 🇨🇦

NeighborhoodMatch retourne un ensemble de quartiers avoisinants les plus similaires au quartier actuel en fonction de qualités telles que les pointages de style de vie Local Logic, les données démographiques et la composition du logement.

Lors de la configuration, les clients fournissent une liste admissible de quartiers auxquels comparer. Cette liste doit inclure un lien vers une image et un lien vers une page de destination pour chaque quartier.

Seuls les quartiers de cette liste situés dans la même zone métropolitaine que le quartier actuel sont admissibles à la comparaison. Si le quartier actuel ne se trouve pas dans une zone métropolitaine, nous effectuerons alors la comparaison avec les quartiers admissibles situés dans un rayon de 100 kilomètres du quartier cible.

Pour en savoir plus sur le pointage de similarité et sur la façon dont les quartiers sont calculés, consultez la section "Calculating Neighborhood Similarity" de la documentation du point de terminaison d'API Similar Neighborhoods.

info

L'indice d'abordabilité (étiquette de comparaison de prix) est disponible uniquement aux États-Unis.

Installation​

Nos produits SDK sont servis à partir d'une source unique.

Les SDK sont conçus pour fonctionner avec React et d'autres cadriciels déclaratifs.

D'abord, installez le script d'entrée avec npm, yarn ou pnpm :

npm i --save @local-logic/sdks-js
yarn add @local-logic/sdks-js
pnpm add @local-logic/sdks-js

Exemple

import { useRef, useEffect } from "react";
import LLSDKsJS from "@local-logic/sdks-js";

const globalOptions = {
locale: "en", // Si disponible, changer pour anglais ou français
appearance: {
  // Ajoutez ici toute autre modification d'apparence
  // Consultez la section "Appearance" ci-dessous pour la liste des options disponibles.
  variables: {
    "--ll-color-primary": "#fd3958",
    "--ll-color-primary-variant1": "#d5405b",
    "--ll-font-family": "Avenir, sans-serif"
  }
}
};

const localLogicClient = LLSDKsJS("your-api-key-here", globalOptions);

function NeighborhoodMatchSDKComponent() {
const containerRef = useRef(null);

useEffect(() => {
  if (!containerRef.current) {
    return;
  }

  const sdkOptions = {
    geographyId: "g10_drt2yt86"

    // ...Autres options propres au SDK
  }

  const sdkInstance = localLogicClient.create(
    "neighborhood-match",
    containerRef.current,
    sdkOptions,
  );

  // Il est important de détruire l'instance du SDK lorsque le composant est démonté.
  return () => {
    sdkInstance.destroy();
  }
}, []);

return (
  <div
    ref={containerRef}
    style={{
      // La hauteur dépend du SDK que vous implémentez
      height: "100%",
      width: "100%",
    }}
  />
);
}

export default NeighborhoodMatchSDKComponent;

Configuration​

Clé API​

Votre clé API vous sera fournie par l'équipe Local Logic.

Quartiers​

Dans le cadre du SDK NeighborhoodMatch, vous avez la possibilité de personnaliser l'implémentation de trois façons :

  1. Restreindre les quartiers similaires retournés aux seuls quartiers pertinents pour vous.

    Ceci est important, car cela vous permet de garder le chercheur de logement dans votre entonnoir en ne recommandant pas de quartiers situés hors de votre territoire ou pour lesquels vous n'avez pas de page. Par défaut, lorsqu'aucune configuration n'est fournie, “tous” les quartiers avoisinants similaires sont retournés; le seul filtrage appliqué consiste à se limiter aux autres quartiers similaires situés dans la zone statistique métropolitaine (MSA) ou dans un rayon de 100 km, si le quartier ne se trouve pas dans une MSA.

  2. Personnaliser les images affichées pour chaque quartier.

    Cela vous permet d'éviter les images prescrites. Par défaut, aucune image ne sera affichée pour les quartiers sans images configurées.

  3. Associer chaque carte de quartier similaire à un lien.

    L'idée ici est que les quartiers similaires peuvent être utilisés pour “magasiner” entre les quartiers en liant directement les pages de quartier (qu'il s'agisse d'implémentations NeighborhoodWrap ou même d'un ajout à des pages de quartier n'utilisant pas NeighborhoodWrap). L'objectif de recommander des quartiers similaires est de permettre à un utilisateur de cliquer pour en savoir plus sur le quartier et voir les propriétés du secteur. Pour que cela fonctionne, des liens doivent être assignés pour le clic de l'utilisateur sur chaque carte. Par défaut, aucun lien n'est ajouté aux cartes sans lien configuré : elles peuvent être consultées, mais pas cliquées.

Pour le SDK NeighborhoodMatch, un fichier de configuration est utilisé pour personnaliser la liste des quartiers utilisés et affichés à l'utilisateur, pour s'assurer qu'ils renvoient vers les pages disponibles du site d'implémentation, et pour personnaliser les images affichées pour chaque quartier.

attention

Lorsqu'aucun fichier de configuration n'est fourni, aucune image ne sera affichée pour chaque quartier, la liste des quartiers similaires ne sera pas filtrée, et les cartes du SDK ne s'afficheront pas comme des liens. Toutefois, le SDK peut tout de même être implémenté sans que la configuration soit appliquée et il sera mis à jour pour correspondre au quartier donné une fois le fichier de configuration appliqué.

Génération d'un fichier de configuration NeighborhoodMatch​

  1. Préparez un fichier CSV contenant les champs décrits ci-dessous.
  2. Envoyez le fichier CSV à Local Logic via un billet de soutien. L'équipe de Local Logic vous aidera à convertir les quartiers en geog_id pris en charge et à appliquer la configuration le jour ouvrable suivant.
Informations CSV​

Exemple de fichier de configuration - geog_id

Exemple de fichier de configuration - nom de quartier
ChampRequisDescription
geog_id OU neighborhoodtruegeog_id est l'ID externe Local Logic spécifique du quartier, s'il est connu et disponible. neighborhood est le nom du quartier permettant de l'identifier et de le faire correspondre à notre liste de quartiers Local Logic.
thumbnail_urltrueL'URL complète de l'image représentant le quartier lorsqu'il apparaît dans les SDK NeighborhoodMatch configurés.
redirect_urltrueL'URL complète qui doit servir de lien source lorsqu'un utilisateur clique sur le quartier. Il doit s'agir d'une URL sur votre site qui existe (ou existera) pour chaque quartier.
info

L'option "neighborhood" peut être utilisée si le geog_id Local Logic est inconnu pour le quartier souhaité. Dans ce cas, soyez aussi descriptif que possible : “Little Italy, San Diego, CA” est préférable à “Little Italy”, car il y a au moins 8 quartiers appelés Little Italy aux États-Unis.

info

Pour le "thumbnail_url", le serveur où l'URL de la miniature de l'image est hébergée doit, au minimum, avoir les adresses suivantes ajoutées comme origines autorisées dans l'en-tête CORS :

  • Requis pour l'implémentation du SDK : https://sdk.locallogic.co/

  • Fortement recommandé pour le soutien, les tests et le débogage : https://staging.locallogic.co/ http://localhost:3000 http://localhost:3001

L'image miniature pourrait également être accessible publiquement (si les en-têtes CORS ne sont pas utilisés).

Il est recommandé que vos images miniatures mesurent au minimum 144 px par 400 px et au maximum 500 px par 800 px pour obtenir les meilleurs résultats dans le SDK.

Capture d&#39;écran de la nouvelle configuration du SDK NeighborhoodMatch

Options globales​

const localLogicClient = localLogicSDK(apiKey, globalOptions)

Ces options sont disponibles pour tous les SDK. Vous pourrez également spécifier des options propres à chaque SDK, selon le SDK que vous implémentez. Ces options seront disponibles dans la documentation propre à chaque SDK

NomRequisTypeValeur par défautDescription
apiKeytruestringClé API requise pour effectuer des requêtes vers l'API Local Logic.
globalOptions.appearancefalseAppearanceL'option appearance permet d'utiliser des variables pour personnaliser l'apparence de vos widgets.
globalOptions.localefalse"en" ou "fr""en"L'option locale spécifie la langue des pointages et de l'interface utilisateur.
globalOptions.externalIdfalsestringPour les SDK connectés à l'application de gestion de quartier (Neighborhood Management App) du Local Logic Hub. Ce champ est requis pour que les SDK Neighborhood Showcase et Favorite Neighborhoods fonctionnent

Apparence​

Les SDK Local Logic prennent en charge la personnalisation visuelle grâce à l'API Appearance, qui vous permet d'adapter l'apparence du SDK à votre marque.

type Appearance = {
  variables?: {
    [key: string]: string;
  };
};

Variables couramment utilisées​

VariableDescription
--ll-color-primaryLa couleur principale de la marque.
--ll-color-primary-variant1Une version légèrement plus foncée de la couleur principale de la marque. Cette variable devrait toujours être modifiée en même temps que --ll-color-primary.
--ll-font-familyChange la famille de polices utilisée dans l'ensemble des SDK. Actuellement, les SDK ne prennent en charge que les polices système. Cette valeur devrait toujours inclure une famille de polices de repli, p. ex. Inter, sans-serif.

Fonctions​

Une fois que vous avez initialisé votre client SDK avec votre clé API et vos options globales, plusieurs fonctions sont disponibles.

Create​

const sdkInstance = localLogicClient.create("neighborhood-match", container, sdkOptions)

Cette fonction crée un nouveau widget SDK selon le nom spécifié.

Les sdkOptions sont spécifiques à chaque SDK créé.

NomRequisTypeValeur par défautDescription
sdkTypetruestringLe SDK que vous souhaitez créer. "neighborhood-match" dans ce cas.
containertrueHTMLElementL'élément dans lequel effectuer le rendu.
sdkOptionstrueSDKOptionsOptions requises pour le sdkType spécifié. Les options sont détaillées ci-dessous.

SDKOptions​

NameRequiredTypeDefaultDescription
sdkOptions.geographyId*stringL'ID de géographie Local Logic. Il s'agit de la méthode d'instanciation privilégiée.

* Ce champ est requis si vous n'utilisez pas lat/lng.
sdkOptions.lat*numberLatitude initiale de la fenêtre d'affichage.

* Ce champ est requis si vous n'utilisez pas geographyId. Si geographyId est défini, ce champ est ignoré.
sdkOptions.lng*numberLongitude initiale de la fenêtre d'affichage.

* Ce champ est requis si vous n'utilisez pas geographyId. Si geographyId est défini, ce champ est ignoré.
sdkOptions.titlefalseboolean | stringLe titre est activé par défaut et fourni sous forme de chaîne traduite. Vous avez la possibilité de supprimer le titre ou de fournir votre propre chaîne de titre.
sdkOptions.hideAffordabilityTagsfalsebooleanfalseIndique si l'étiquette de comparaison d'abordabilité sur chaque carte de quartier doit être masquée.
sdkOptions.hideThumbnailsfalsebooleanfalseIndique si l'image du quartier sur chaque carte de quartier doit être masquée. Aucune image ne sera affichée si ce paramètre est défini sur true.

Update​

sdkInstance.update(sdkOptions)

Cette fonction sert à mettre à jour le widget avec de nouvelles valeurs. Cela peut être utile, par exemple, si vous souhaitez changer l'emplacement du widget.

L'objet sdkOptions suit la même structure qu'à la création.

On​

sdkInstance.on(event, callback)

Cette fonction prend en argument une fonction de rappel (callback) qui est déclenchée lorsqu'un event survient. Actuellement, il n'existe qu'un seul événement.

NomRequisTypeValeur par défautDescription
eventtrue"change"Le nom de l'event.
callbacktrueCallbackFunctionLa fonction de rappel à déclencher lorsque l'event spécifié survient.
type CallbackFunction = ({ type: string, data: unknown }) => void;

Destroy​

sdkInstance.destroy()

Cette fonction sert à détruire le widget SDK créé.

Points de terminaison d'API pris en charge​

Les API Local Logic suivantes sont utilisées par le SDK pour afficher les données.

APIDescription
Similar NeighborhoodsUtilisé pour récupérer les quartiers spécifiques au client configurés ayant la plus grande similarité avec le quartier donné.