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

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

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

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

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

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

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

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

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

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

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

1. 「新規追加」をクリック。

2. キーワードに「Download Monitor」を入力。
3. 「Download Monitor」が表示されるので有効化します。

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

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

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

4. 「初めてのダウンロードを作成する」ボタンをクリック。

5. 「ボックス・ボックスサムネイル、タイトル、数、ファイル名とファイルサイズを示します。」を選択します。
   これがダウンロードページのダウンロードボタンの設定です。

6. ダウンロードエンドポイントには初期値で「download」と設定されています。
   ここでは「download-data」に変更します。
   資料ダウンロードのページに「download」というURLを使用したい場合、「download」のままだと資料ダウンロードはトップページにリダイレクトされてしまいます。

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

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

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

6. 公開が完了するとダウンロード情報が表示されます。ショートコードをコピーしておきましょう。

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

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

• ダウンロードページに先ほどのショートコードを設置します。

• アップロードしたサムネール、ファイル名、データ名称、データの容量が表示されて、カード型のダウンロードボタンになりました。

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

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

上記のボタンは、以下の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）」のショートコードを固定ページに設置します。

• ダウンロード前のリード獲得のためのフォームが出来上がります。

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

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

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

ここでは「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」の代わりに「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にアクセスされた場合にダウンロードフォームにリダイレクトさせます。

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

1. 「Redirection」の設定はサイドバーの「ツール」にあります。

2. 設定の開始画面です。
3. 完了画面が出るまでページの青色のボタンを押していきます。

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

1. ダウンロードページの相対アドレスを入力します。
2. ダウンロードフォームの相対アドレスを入力します。
3. 「転送ルールを追加」をクリックします。

• ルールが設定されました。
  これで、ダウンロードページのURLはダウンロードフォームに転送されます。

まとめ

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

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

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

【PR】「Theme3」では、ブログ用のWordPressテーマに、人気と高機能を誇る「 SWELL 」をオススメしています。

「SWELL」の特徴を見る
「SWELL」の購入はこちら

・ブロックエディター完全対応
・高速化機能を標準搭載
・100%GPL
・企業サイトの制作も可能 他、機能多数。

プロモーション