User-Agentスマートタグの作成と使用方法

はじめに

訪問者がどこから来ているかを知るために、ユーザーエージェントスマートタグを作成しますか？このデータは、将来のウェブサイトの意思決定を非常に簡単にすることができます。このチュートリアルでは、フォームに自動的に入力されて提出元をキャプチャするスマートタグを作成します。

ユーザーエージェントとは、ブラウザ、オペレーティングシステム、使用デバイス（デスクトップ/モバイル）などを確認するためにブラウザから取得できる情報です。

ユーザーエージェントスマートタグの作成

まず、ビルダーで使用できる新しいスマートタグを作成するコードスニペットを追加します。

コードスニペットの追加方法についてサポートが必要な場合は、こちらのチュートリアルをご覧ください。

/** 
 * 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 );

スニペットには、2つの異なる関数があることに気づくでしょう。それぞれにコメントが付いているので、何をしているのか理解できます。最初の関数はスマートタグを作成しますが、これは作成のみです。ただし、スマートタグが何であるかを定義するのは2番目の関数であり、この場合はHTTP_USER_AGENTを取得することです。

フォームの作成

次に、この新しいスマートタグを追加するための新しいフォームを作成します。新しいフォームの作成についてサポートが必要な場合は、こちらのドキュメントをご覧ください。

フォームには、名前とメールアドレスのフィールドがいくつかあるだけで、ユーザーエージェントスマートタグでキャプチャした情報を保持する非表示フィールドを追加します。

ユーザーエージェントスマートタグの使用

非表示フィールドを追加したら、スマートタグを表示リンクをクリックして、デフォルト値フィールドに追加できるスマートタグのリストを開きます。

ユーザーエージェントスマートタグを見つけて選択し、デフォルト値に挿入します。

ユーザーエージェントの表示

エントリを表示すると、非表示フィールド内にキャプチャされたすべてのユーザー情報が表示されます。

これで完了です！さらにカスタムスマートタグを作成しますか？カスタムスマートタグの作成方法に関する記事をご覧ください。

関連

フィルター参照:

• wpforms_smart_tags
• wpforms_smart_tag_process