ビジネス向けWEBサイトをつくる

WordPressなら簡単。資料ダウンロードをプラグインとJavaScriptで実装する。

本ページはプロモーションが含まれています

企業サイトでのコンテンツマーケティングの施策のひとつに「資料ダウンロード」があります。

ホワイトペーパーを用意し、顧客情報を入力させるマーケティング手法です。

最近の企業サイトでは資料ダウンロードがないサイトの方が少ないのではないかと思うほどに一般化しています。

この資料ダウンロードは、資料自体のアクセス制限とダウンロードフォームのアクセス制限をかける必要があります。

しかし、ダウンロードフォームは公開情報なので、ネット上で見えなくてはならないという条件があります。

WordPressサイトあれば、このようなアクセス制限実現する「資料ダウンロード」の定番のプラグインがあります。

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「SOLARIS」の詳細をTCDのページで見る

レスポンシブ対応
カスタム投稿タイプ「お知らせ」「企業情報」「サービス」「プロジェクト」
高速化設定(絵文字読み込み・コード最適化)
他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

資料ダウンロードで必要なプラグイン

資料ダウンロードをWordPressサイトに実装する場合、必要なプラグインは以下です。

プラグイン機能
Download Monitor●ホワイトペーパーにアクセス制限をかけアップロードします。
●ダウンロードページにおいて、ダウンロードボタンを提供します。
●ダウンロード状況をレポートします。
Contact Form 7●顧客情報の入力フォームを提供し、入力された場合にダウンロードページへ遷移させます。
※一部JavaScriptが必要
Redirection●ダウンロードページの直接アクセスを顧客情報入力フォームに転送します。
資料ダウンロードに必要なプラグイン

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「SOLARIS」の詳細をTCDのページで見る

レスポンシブ対応
カスタム投稿タイプ「お知らせ」「企業情報」「サービス」「プロジェクト」
高速化設定(絵文字読み込み・コード最適化)
他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

Download Monitorのインストールと設定

では、「Download Monitor」プラグインをインストールしましょう。

プラグイン追加
  1. 「新規追加」をクリック。
「Download Monitor」有効化
  1. キーワードに「Download Monitor」を入力。
  2. 「Download Monitor」が表示されるので有効化します。

「Contact Form 7」や「Redirection」も同様にして有効化します。

lin

ここからは専門的な内容になります。

以下から「Download Monitor」を設定していきます。

「Download Monitor」設定
  1. 「初めてのダウンロードを作成する」ボタンをクリック。
「Download Monitor」設定
  1. 「ボックス・ボックスサムネイル、タイトル、数、ファイル名とファイルサイズを示します。」を選択します。
    これがダウンロードページのダウンロードボタンの設定です。
「Download Monitor」設定
  1. ダウンロードエンドポイントには初期値で「download」と設定されています。
    ここでは「download-data」に変更します。
    資料ダウンロードのページに「download」というURLを使用したい場合、「download」のままだと資料ダウンロードはトップページにリダイレクトされてしまいます。

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「SOLARIS」の詳細をTCDのページで見る

レスポンシブ対応
カスタム投稿タイプ「お知らせ」「企業情報」「サービス」「プロジェクト」
高速化設定(絵文字読み込み・コード最適化)
他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

ダウンロードファイルをアップロード

では、実際に以下のホワイトペーパー(pdf)をアップロードしてみましょう。

ホワイトペーパー
ダウンロード資料をアップロード
  1. 「新規追加」をクリック。
  2. ホワイトペーパーの名称を設定します。ここでは「テーマファイル」
  3. アイキャッチ画像を設定します。
  4. アップロードボタンをクリックしてファイルをアップロードします。
    アップロードが完了するとアップロードデータのURLが表示されます。
  5. 「公開」ボタンをクリックします。
ダウンロード資料をアップロード
  1. 公開が完了するとダウンロード情報が表示されます。ショートコードをコピーしておきましょう。

ダウンロードページを作成

データがアップロードできたので、ダウンロードページを作ります。

ダウンロードページ
  • ダウンロードページに先ほどのショートコードを設置します。
ダウンロードページ
  • アップロードしたサムネール、ファイル名、データ名称、データの容量が表示されて、カード型のダウンロードボタンになりました。

ダウンロードカードボタンの調整

ダウンロードボタンはデフォルト表示だと、かなり情けない表示になります。

ダウンロードボタン
ダウンロードボタン

上記のボタンは、以下のCSSで形を整えています。

.download-box{
	border: none;
	width: calc( calc( 100% - 10px ) / 3 ) !important;
	margin-top: 2em !important;
	margin-right: 30px !important;
	margin-left: 30px !important;
	float: left;
	box-sizing: border-box;
}

.download-box-content h1{
	font-size:15px;
}

.download-button{
	font-size:13px !important;
}

.download-count{
	display:none;
}

.dlm-download-complete::after {
	content: '' !important;
}

ダウンロードフォームを作成

ダウンロードフォームを作るために「コンタクトフォーム(Contact Form 7)」を設定します。

ダウンロードフォーム
  1. 「新規追加」をクリック。
  2. フォームの名称です。名称は何でもOKです。
  3. フォームを設定します。
  4. メールのデータも設定してください。
  5. 「保存」ボタンをクリックします。
  6. ページ上部にショートコードが表示されているのでコピーしておきます。

Contact Form 7はWordPressのフォームを作る定番中の定番プラグインです。ここでは設定方法について省略します。

詳細は「Contact Form 7 – WordPress」 プラグインを参照してください。

ダウンロードフォーム
  • 「コンタクトフォーム(Contact Form 7)」のショートコードを固定ページに設置します。
ダウンロードフォーム
  • ダウンロード前のリード獲得のためのフォームが出来上がります。

このフォームはリード獲得の最終段階ですが、入力項目を多くしすぎないように注意が必要です。コンバージョンのハードルは、なるべく下げるべきです。

ダウンロードページへ遷移するためのスクリプト

ダウンロードフォームの送信が完了するとダウンロードページを表示します。

そのためには、以下のようなスクリプトが必要です。

ここでは「fuctions.php」で「wp_footer」にフックしました。

add_action( 'wp_footer', 'add_thanks_page' );
 
function add_thanks_page() {
?>
<script type="text/javascript">
addEventListener( 'wpcf7mailsent', function( event ) {
	if ('452' == event.detail.contactFormId) {
	const url = 'https://example.com/form/';
	//タイムスタンプを作成する
	const date = new Date();
	// UNIXタイムスタンプに変換する
	const a = date.getTime();
	const timestamp = Math.floor( a / 1000 ) ;
	//取得したURLにタイムスタンプをパラメータとして付与する
	const setParamUrl = url + '?tmstv=' + timestamp;
	location.replace(setParamUrl);
	}
}, false );
</script>
<?php
}
  • 「452」はコンタクトフォームのIDです。ショートコードに記載されています。
    このようにIDを判定すれば、複数のコンタクトフォームを作っていても対応できます。
  • 「https://example.com/form/」がダウンロードページのアドレスです。
  • ここでは、ダウンロードページをキャッシュさせないために、タイムスタンプを付けています。その他にもダウンロードページは「noindex」を設定する方がよいでしょう。
  • 実は「wp_footer」にフックすることはおすすめできません。ソースコードを見た場合、ダウンロードページのアドレスが簡単に見えてしまいます。スクリプトファイルの読み込み等を検討すべきです。

このスクリプトはコンタクトフォームのメール送信のイベントで起動されます。
このイベント発生はプラグイン「Invisible reCaptcha」によって阻害されますので、注意が必要です。

Invisible reCaptchaの代替プラグイン

「Invisible reCaptcha」の代わりに「ReCaptcha v2 for Contact Form 7」を使うのも手だと思います。

「ReCaptcha v2 for Contact Form 7」の場合、「reCaptchaのマーク」が右側に配置されます。

邪魔になる場合は以下のcssで左側に配置できます。

.grecaptcha-badge {
	left:6px !important;
	width:70px !important;
}
.grecaptcha-badge:hover {
	left:6px !important;
	width:256px !important;
}

リダイレクションの設定

プラグイン「Redirection」はダウンロードページのURLを守るために使用します。
必須ではありません。

機能的にはダウンロードページのURLにアクセスされた場合にダウンロードフォームにリダイレクトさせます。

では、プラグインを設定していきます。

「Redirection」設定
  1. 「Redirection」の設定はサイドバーの「ツール」にあります。
「Redirection」設定
「Redirection」設定
  1. 設定の開始画面です。
  2. 完了画面が出るまでページの青色のボタンを押していきます。

次の画面からが転送ルールの設定です。

転送ルールの設定
  1. ダウンロードページの相対アドレスを入力します。
  2. ダウンロードフォームの相対アドレスを入力します。
  3. 「転送ルールを追加」をクリックします。
転送ルールの設定
  • ルールが設定されました。
    これで、ダウンロードページのURLはダウンロードフォームに転送されます。

ダウンロードフォームが送信された場合は、タイムスタンプ付きのURLになるので、転送されません。(URLパラメーターが付いていれば転送されません)

まとめ

ここでは3つのプラグインを使用する方法を提示いたしました。

しかし、「Download Monitor」と「Contact Form 7」だけでも問題ありません。

最後に注意事項をまとめておきます。

注意事項

  • 資料ダウンロードを可能にするプラグインは「Download Monitor」と「Contact Form 7」
  • ダウンロードエンドポイントとダウンロードページのスラッグは違うものにします。
  • プラグイン「Invisible reCaptcha」とは併用できません。
  • ダウンロードページはキャッシュされないように対策しましょう。

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「SOLARIS」の詳細をTCDのページで見る

レスポンシブ対応
カスタム投稿タイプ「お知らせ」「企業情報」「サービス」「プロジェクト」
高速化設定(絵文字読み込み・コード最適化)
他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

プロモーション

戦略的WEBサイト構築方法

戦略的WEBサイト構築方法
WEB担当者にオススメ

WEBサイトをビジネス戦略のPDCAサイクルに組み込むための考え方と、サイトを内製化する方法を分かりやすく解説します。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

2 × three =

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

ABOUT US
lin記事を書いている人
はじめまして。「lin」です。クリエイティブディレクター兼グラフィックデザイナーとして活動しています。おかげさまで、キャリア25年以上になりました。「Theme3」は、私が企画デザイン事務所スラッシュディーの仕事で得たノウハウを公開します。
※以下は私が活動している企業情報にリンクしています。