【WordPress】Cookieを使用し、特定のページを表示したユーザーのみ広告を表示させる
はじめに
WordPressで運用しているオウンドメディア経由で、「アプリのダウンロードをしていないユーザーにはダウンロードバナーを表示」し、「アプリをダウンロードしたユーザーには広告を表示させる」 実装を行なったので、簡単にまとめてみました。
行いたい実装
ログイン機能を持たないサイトで、アプリをダウンロードしたかどうかを判断する方法として、Cookieを使用し、アプリダウンロード後に表示されるページが表示されたタイミングで、ユーザーのブラウザにCookieを保存するという方法をとりました。
そして、特定のCookieが保存されているかをphp側で判定し、if文で表示を分けています。
使用技術
WordPress
PHP
JavaScript
コード
JavaScript
// Cookieを保存するページのパスを配列へ。ここでは、'~/thanks'ページを指定。
let targetPaths = ['/thanks/', '/en/thanks'];
if (targetPaths.includes(window.location.pathname)) {
// Cookieの有効期限を指定。
let date = new Date();
date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000));
document.cookie = "downloaded=true; expires=" + date.toGMTString() + "; path=/";
}
PHP
<?php if (isset($_COOKIE['downloaded']) && $_COOKIE['downloaded'] == 'true'): ?>
<!-- "downloaded=true"のCookieを持つユーザーに表示する内容 -->
<?php else: ?>
<!-- "downloaded=true"のCookieを持たないユーザーに表示する内容 -->
<?php endif; ?>
コードの詳細
JavaScript
let targetPaths = ['/thanks/', '/en/thanks'];
Cookieを保存するページのパスを配列で代入します。
if (targetPaths.includes(window.location.pathname)) {
}
includes
文字列の中に指定した文字が入っているかを確認します。
window.location.pathname
現在のページURLのパスを返します。なので、この場合は、targetPaths
に代入されている文字列が、現在のページのパスと一致するかを確認しています。
let date = new Date();
date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000));
document.cookie = "downloaded=true; expires=" + date.toGMTString() + "; path=/";
let date = new Date();
現在の時刻をdate
変数へ代入します。
date.getTime() + (7 * 24 * 60 * 60 * 1000)
Cookieを保存する期間を指定しています。この指定では、"7日間"となります。
date.setTime
dateを再設定します。ここでは、getTime()
で指定したものになります。
document.cookie = "downloaded=true; expires=" + date.toGMTString() + "; path=/";
"; path=/"
でCookieが送信させるパスを指定します。この指定は、すべてのパスをでCookieを利用可能になります。
expires=" + date.toGMTString()
は、Cookieの有効期限を指定しています。
downloaded=true;
は、新しく保存されるCookieを指定しています。
document.cookie
は、Cookieの読み書きが可能になります。
ようは、downloaded=true
というCookieを指定した保存期間で、すべてのページに送信する てきなコードになります。
まとめ
今回はCookieを使用しましたが、多分もっと良い方法があるのではないかと思うので、引き続き技術のキャッチアップを行っていきたいなと思います。
Discussion