Comment créer et utiliser la balise intelligente User-Agent

Introduction

Souhaitez-vous créer une balise intelligente d'agent utilisateur pour savoir d'où viennent vos visiteurs ? Ces données peuvent faciliter grandement les décisions futures pour votre site web. Dans ce tutoriel, nous allons créer une balise intelligente qui remplira automatiquement un champ caché de votre formulaire pour capturer la provenance de vos soumissions.

Un agent utilisateur est une information que vous pouvez récupérer du navigateur pour voir quel navigateur, système d'exploitation, appareil utilisé (ordinateur/mobile), etc.

Création de la balise intelligente d'agent utilisateur

Tout d'abord, nous allons ajouter l'extrait de code qui créera une nouvelle balise intelligente dans WPForms que nous pourrons utiliser dans le constructeur.

Si vous avez besoin d'aide pour ajouter des extraits de code à votre site, veuillez consulter ce tutoriel.

/** 
 * Register the User-Agent Smart Tag so it will be available to select in the form builder.
 *
 * @link   https://wpforms.com/developers/how-to-create-and-use-the-user-agent-smart-tag/
 */
 
//Create the Smart Tag to be used
function wpf_dev_register_smarttag( $tags ) {
 
    $tags[ 'user_agent' ] = 'User Agent';
   
    return $tags;
}
add_filter( 'wpforms_smart_tags', 'wpf_dev_register_smarttag' );
 
//Define what the Smart Tag is
function wpf_dev_custom_smarttags( $content, $tag ) {
 
    $user_agent = ! empty( $_SERVER[ 'HTTP_USER_AGENT' ] ) ? substr( $_SERVER[ 'HTTP_USER_AGENT' ], 0, 256 ) : '';
 
   if ( $tag === 'user_agent' ) {
      $content = str_replace( '{' . $tag . '}', $user_agent, $content );
   }
   return $content;
};
add_filter( 'wpforms_smart_tag_process', 'wpf_dev_custom_smarttags', 10, 2 );

Dans l'extrait, vous remarquerez qu'il y a deux fonctions différentes. Chacune a été commentée afin que vous puissiez comprendre ce qu'elle fait. La première fonction créera la balise intelligente, c'est seulement la création, cependant, c'est seulement dans la seconde fonction que nous définissons ce qu'est la balise intelligente, qui dans ce cas est de récupérer le HTTP_USER_AGENT.

Création du formulaire

Ensuite, nous allons créer un nouveau formulaire afin de pouvoir ajouter cette nouvelle balise intelligente. Si vous avez besoin d'aide pour créer un nouveau formulaire, veuillez consulter cette documentation.

Notre formulaire n'aura que quelques champs pour le nom et l'adresse e-mail, puis nous ajouterons un champ caché qui contiendra les informations que nous capturons avec la balise intelligente d'agent utilisateur.

Utilisation de la balise intelligente d'agent utilisateur

Une fois que vous avez ajouté votre champ caché, cliquez sur le lien Afficher les balises intelligentes pour ouvrir une liste de balises intelligentes que vous pouvez ajouter dans le champ Valeur par défaut.

Recherchez la balise intelligente Agent utilisateur et sélectionnez-la pour l'insérer dans la Valeur par défaut.

Visualisation de l'agent utilisateur

Lorsque vous consultez vos entrées, vous verrez dans le champ caché toutes les informations utilisateur qui ont été capturées.

Et c'est tout ce dont vous avez besoin ! Souhaitez-vous créer d'autres balises intelligentes personnalisées ? Consultez notre article sur Comment créer une balise intelligente personnalisée.

Articles associés

Références de filtre :

• wpforms_smart_tags
• wpforms_smart_tag_process