Intro.jsを使用した製品ツアーの紹介-SitePoint-jsチュートリアル-php.cn

Flexible Forms

ホームページ

ウェブフロントエンド

jsチュートリアル

Intro.jsを使用した製品ツアーの紹介-SitePoint

Feb 22, 2025 am 09:36 AM

オンライン製品の販売は、特にデジタル商品やサービスのために活況を呈しています。効果的なオンラインマーケティングは成功に不可欠であり、インタラクティブな製品デモンストレーションは顧客の注意を引くための鍵です。機能ツアーとも呼ばれる製品ツアーは、強力なソリューションです。このチュートリアルでは、それらの重要性を説明し、intro.js。

を使用して効果的なツアーを構築する方法を示します

An Introduction to Product Tours with Intro.js - SitePoint

製品ツアーの重要な利点：

製品ツアーインタラクティブな紹介機能を紹介し、Webベースの製品とサービスの販売を促進します。 Intro.jsのようなJavaScriptライブラリは、静的画像とアニメーションを超えるインタラクティブなデモを提供します。
Intro.jsは、ステップバイステップのWebサイトまたは製品ツアーを作成するための軽量のオープンソースライブラリです。カスタマイズ可能で、シングルページアプリケーション（SPA）でうまく機能し、複数の言語をサポートし、柔軟なナビゲーションコントロールを提供します。
製品ツアーの理解：

製品ツアーは、新規であろうと既存の主要な機能をユーザーにガイドします。フラッシュベースのプレゼンテーションはかつて一般的でしたが、JavaScriptライブラリはより魅力的でインタラクティブな体験を提供しました。

なぜ製品ツアーを使用するのか？ ウェブサイトはしばしばユーザーのガイドやドキュメントに依存していますが、これらには制限があります。

ユーザーは長いドキュメントを嫌います。

ドキュメントには、インタラクティブな機能のデモンストレーションがありません。新しい機能を反映するようにドキュメントを定期的に更新することは困難です

製品ツアーは、機能を強調し、新しいユーザーを引き付けることにより、これらの問題に対処します。特定の機能はライブラリによって異なりますが、コア機能は一貫しています。

スタートボタン：

ガイド付き手順：

ユーザーは一連の手順を進め、それぞれが機能を強調します。前/次のナビゲーションは有益ですスキップボタン：

必要に応じて、ユーザーがツアーをバイパスできるようにします。これはすべてのステップに存在する必要があります。

完了ボタン：最終ステップには、ツアーを終了するためのボタン（多くの場合、「購入」や「今すぐ試してみる」などの強力な行動を促す）が含まれています。
人気のある製品ツアーライブラリ：
いくつかのJavaScriptライブラリは、それぞれがユニークな機能を備えた製品ツアーの作成を促進します。人気のあるオプションには次のものがあります：
ブートストラップツアー

hopscotch pageguide.js

このチュートリアルは、包括的な機能セットのため、intro.jsに焦点を当てています。

Intro.jsを使用した製品ツアーの構築：

Intro.jsは、プロジェクトに簡単に統合された軽量のオープンソースライブラリです。次の手順では、プロセスの概要を説明します

ステップ1：intro.jsファイルを含める：プロジェクトにを追加し、intro.jsを追加します。 introjs.css

ステップ2：HTMLを作成します。

ステップ3：最初のステップを設計します：

最初のステップとスタートボタンは不可欠です。使用

&lt;!DOCTYPE html&gt;
<html lang="en">
<head>
  <link href="introjs.css" rel="stylesheet">
</head>
<body>
  <🎜>
  <🎜>
</body>
</html>

ログイン後にコピー

（数値）および

（説明）属性を使用してください： data-stepdata-intro（注：CSSスタイリングは簡潔に省略されています。完全なスタイリングについては、ソースコードを参照してください。）

<div class="main_container">
  <div class="flexi_form_title">
    <h1 id="Flexible-Forms">Flexible Forms</h1>
    <a id="flexi_form_start" href="https://www.php.cn/link/f0b875eb6cff6fd5f491e6b6521c7510">Start Tour</a>
  </div>
</div>
<🎜>

ログイン後にコピー

An Introduction to Product Tours with Intro.js - SitePoint ステップ4：隠された手順の設計：

後続の手順が最初に隠され、ツアー中に動的に明らかにされます。

および An Introduction to Product Tours with Intro.js - SitePoint （ツールチップ配置を制御する）属性を使用します。 JavaScriptは、現在のステップに基づいて要素を表示/非表示にするために使用されます。

（このステップの詳細なHTMLとJavaScriptは簡潔に省略されています。完全なソースコードを参照してください。） data-step data-position

ステップ5：完了機能を実装する：

を使用して、ユーザーをリダイレクトするか、ツアーの完了時にアクションをトリガーします。

ステップ6：スキップ機能を実装する： An Introduction to Product Tours with Intro.js - SitePoint 「スキップ」アクションを処理するために

を使用してください。

（注：完全なソースコードとデモは[ソースコードへのリンク]と[デモへのリンク]で利用できます。 oncomplete()

結論：

introJs().start().oncomplete(function() {
  window.location.href = "complete.html";
});

ログイン後にコピー

このチュートリアルは、製品ツアーの構築の基本的な側面を示しています。インタラクティブな製品ツアーは、ユーザーのエンゲージメントを大幅に向上させ、コンバージョンを促進します。さまざまなデバイスと画面サイズで徹底的にテストすることを忘れないでください。提供されたリソースは、完全な例とさらなるガイダンスを提供します。

以上がIntro.jsを使用した製品ツアーの紹介-SitePointの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。