【WordPress】Cookieを使用し、特定のページを表示したユーザーのみ広告を表示させる

はじめに

WordPressで運用しているオウンドメディア経由で、「アプリのダウンロードをしていないユーザーにはダウンロードバナーを表示」し、「アプリをダウンロードしたユーザーには広告を表示させる」 実装を行なったので、簡単にまとめてみました。

行いたい実装

ログイン機能を持たないサイトで、アプリをダウンロードしたかどうかを判断する方法として、Cookieを使用し、アプリダウンロード後に表示されるページが表示されたタイミングで、ユーザーのブラウザにCookieを保存するという方法をとりました。
そして、特定のCookieが保存されているかをphp側で判定し、if文で表示を分けています。

使用技術

WordPress
PHP
JavaScript

コード

JavaScript

common.js

// 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

front-page.php

<?php if (isset($_COOKIE['downloaded']) && $_COOKIE['downloaded'] == 'true'): ?>
    <!-- "downloaded=true"のCookieを持つユーザーに表示する内容 -->
<?php else: ?>
    <!-- "downloaded=true"のCookieを持たないユーザーに表示する内容 -->
<?php endif; ?>

コードの詳細

JavaScript

common.js

let targetPaths = ['/thanks/', '/en/thanks'];

Cookieを保存するページのパスを配列で代入します。

common.js

if (targetPaths.includes(window.location.pathname)) {

}

includes
文字列の中に指定した文字が入っているかを確認します。

window.location.pathname
現在のページURLのパスを返します。なので、この場合は、targetPathsに代入されている文字列が、現在のページのパスと一致するかを確認しています。

common.js

    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を使用しましたが、多分もっと良い方法があるのではないかと思うので、引き続き技術のキャッチアップを行っていきたいなと思います。