こんにちは❗フリーランス・コンサルタント＆エンジニアの九保すこひです。

X（Twitter）やってます！
📝 九保すこひ@フリーランスエンジニア｜累計300万PVのブログ運営中

さてさて、突然ですがマーケティングの超シンプルな
極意があります。

それは・・・・・・

欲しがってる人に売る

です。

つまり、魚にフライドチキンあげても食べないように
その商品を欲しがっている人にセールスをしていくべきですよね。

でも、多くのお客さんがいるのに「この人はバッグに興味がある」というように個別に情報管理するのは難しいものです。

でも大丈夫！
そう、ウェブならね（どっかのCMのオマージュです😂）

つまり、ウェブサイトの中に「ユーザーの行動履歴を保存する」
ようにすれば良いわけです。

例えば、バッグの商品ページにアクセスしたら「バッグ」というようにタグ付けをしていくわけですね。

こうすることで、バッグの割引セールがあるときは「バッグ」のタグ付けがある人だけにメルマガ送信したりできますし、範囲を広げて「服飾」というより大きなグループ分けをしてアプローチしたりもできます。

そこで❗

今回はLaravelを使って「別ドメインからでも行動履歴が保存できる」機能をつくってみることにします。

ぜひ何かの参考になりましたら嬉しいです。😊✨

「個人的に運営してるサービスに
みんなが写真を投稿してくれて
嬉しい限りです❗」

開発環境： Laravel 11.x（Blade版でログインインストール）

1 鍵になるのは「ウェブビーコン」
2 画像を用意する
3 DB まわりをつくる
4 ウェブビーコン用のコントローラーをつくる
5 ルートをつくる
6 テストしてみる
7 企業様へのご提案
8 おわりに

鍵になるのは「ウェブビーコン」

ウェブビーコンとは、簡単に言うと「データを他サイトへ通知する」
画像のことです。

例えば、過去によく使われたのがメールにウェブビーコン画像を仕込んでおき、そのメールが開封されたかどうかをチェックしていました。

ただし、G-Mailのように（初期状態で）メール内の画像を
表示しないようになったためこの手法は使いにくくなっています。

しかし、ウェブサイトなら<img>タグとしてウェブビーコンを仕込んでおくことは簡単です。

そのため、今回は別ドメインの姉妹サイトや、ブログに
ウェブビーコンをセットしておき、メインのサイトで
ユーザーの行動履歴を受け取って保存できるようにしてみます。

つまり、以下のような流れになります。

サイト A でユーザーがログインする（ここで Cookie に user_id を保存）
サイト B（別ドメイン）のサイトへ移動
ウェブビーコン画像が読み込まれる（行動履歴を送信）
サイト A の中で受信した行動履歴を保存

こうすることで、「サイトA」だけじゃなく「サイトB」までまるっと行動履歴を取得できるわけです。

となると、よりたくさんのユーザーデータが集まるのでマーケティングにも活用しやすいというわけですね❗

画像を用意する

通常、ウェブビーコンは訪問ユーザーに見せるものではありません。

そのため、多くのケースでは画像サイズが「1×1ピクセル」＆「透過 gif」となっているため目に見えないことがほとんどです。

しかし、それではちょっと検証がしにくいので今回は以下の画像を使ってウェブビーコンをつくることにします。

※ B’z 弾いてます😂✨

DB まわりをつくる

では、まずは以下のコマンドでDB周りのファイルを作成しましょう。

php artisan make:model UserAction -m

モデルとマイグレーションが作成されますが今回はマイグレーションのみです。

database/migrations/****_**_**_******_create_user_actions_table.php

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('user_actions', function (Blueprint $table) {
            $table->id();
            $table->unsignedBigInteger('user_id')->comment('ユーザーID');
            $table->string('action')->comment('アクション');
            $table->timestamps();

            $table->foreign('user_id')->references('id')->on('users');
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('user_actions');
    }
};

では、この状態でDBを初期化してみましょう。
以下のコマンドを実行して下さい。

php artisan migrate:fresh --seed

実際のテーブルはこうなりました。

ウェブビーコン用のコントローラーをつくる

次にコントローラーです。
以下のコマンドを実行して下さい。

php artisan make:controller WebBeaconController

そして、作成されたファイルを以下のように変更します。

app/Http/Controllers/WebBeaconController.php

<?php

namespace App\Http\Controllers;

use App\Models\User;
use App\Models\UserAction;
use Illuminate\Http\Request;

class WebBeaconController extends Controller
{
    public function image(Request $request)
    {
        $user_id = (int) $request->cookie('user_id');

        if($user_id > 0) {

            $user = User::find($user_id);
            $actions = $request->input('actions', []);

            foreach ($actions as $action) {

                $user_action = new UserAction();
                $user_action->user_id = $user->id;
                $user_action->action = $action;
                $user_action->save(); // ユーザーの行動履歴を保存

                logger($user->name .'さんの行動履歴「'. $action . '」 が登録されました！');

            }

        }

        $image_path = public_path('images/profile.png');

        return response()->file($image_path);
    }

    public function test(Request $request) // テスト用に Cookie をセットする
    {
        // ログインしたときを想定

        $user = User::first();
        $user_id = $user->id;
        $minutes = 60 * 24 * 365 * 10; // 10年間
        $same_site = 'None'; // ここがポイント
        $cookie = cookie(
            name: 'user_id',
            value: $user_id,
            minutes: $minutes,
            sameSite: $same_site,
        );

        return response('Cookie がセットされました！')->cookie($cookie);
    }
}

このコントローラーの中にはテスト用のtest()メソッドが入っています。

これは、ログインするコードがめんどうなので、ここにアクセスしたら自動でCookie「user_id」をセットするようにしています。

そして、ここが重要なのですが、セットするクッキーのステータス「sameSite」が「None」になるようにしてください。

こうすることで、別ドメインからのアクセスでも Cookie データを受け取ることができるようになります。

また、ウェブビーコンは画像なので検証するのがめんどうですよね。

そのため、logger()を使ってログにコードの実行結果がどうなるかを出力しています。

ルートをつくる

では最後にルートです。

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\WebBeaconController;

Route::get('profile_image', [WebBeaconController::class, 'image']);
Route::get('profile_image/test', [WebBeaconController::class, 'test']);

これで作業は全て完了です。
お疲れ様でした😊✨

テストしてみる

では、実際にテストしてみましょう❗

まず前提として、以下のような構成になっています。

サイト A：今回作ったコードが実行されるサイト
サイト B：サイト A のウェブビーコン画像を表示するサイト

つまり、サイト B で画像を表示したときに、サイト A でユーザー行動履歴が保存されたら成功ということになります。

では、まずはテスト用のルート「https://******/profile_image/test」へアクセスします。

すると・・・・・・

はい❗
表示が返ってきました。

では、ブラウザの開発ツールを使ってCookieが
ちゃんとセットされているかチェックしておきましょう。

ちゃんとセットされていますね。

では、次にドメインが違う「サイトB」で以下のHTMLを実行してみましょう。

<img src="https://******/profile_image?actions[]=marketing&actions[]=management">

※ なお、この中のactions[]=*****という部分が実際に保存される値になります

どうなるでしょうか・・・・・・

はい❗
画像が表示されました。

では、データベースに行動履歴が残っているか確認しておきましょう。

はい❗

ユーザーIDが1の人に「marketing」と「management」の行動履歴が保存されています。

もちろんこれは、ウェブビーコンを呼び出すURLのパラメータを変更すれば「bag」や「coffee」「investment」などなんでも値を変更でき、結果そのユーザーがどんなことに興味があるのかが分かるようになっています。

すべて成功です😊✨

企業様へのご提案

通常、ユーザー行動履歴は特定のサイトだけで管理している場合が多いかと思いますが、今回の技術を使えば、（たとえドメインが違ったとしても）姉妹サイトやブログ、協力会社のウェブサイトからでもユーザー行動履歴を取得することができます。

そして、より多くのデータが集まるということは特定のユーザーだけでなく、顧客の傾向をより正確につかめるということにつながります。

もしそういった「より精度の高い顧客理解」をお求めでしたら、ぜひお気軽にお問い合わせからご相談ください。

お待ちしております。😊✨

開発のご依頼お待ちしております

開発のご依頼はこちらから: お問い合わせ

どうぞよろしくお願いいたします！ by 九保すこひ

おわりに

ということで、今回はウェブビーコンをつかってユーザー行動履歴を保存し、それをマーケティングに活用するシステムをつくってみました。

しかし、こう考えるとやはり我々の行動データはすでに多くのサイトで取られていると考えた方がいいかもしれませんね。

実際に以前、別サイトでメールアドレスを送信したあと、そことは別のブログを見に行った時に、そのブログ記事に関連する商品の「割引クーポン」がメールで届いたことがあり驚きましたが、こういう仕組みだったのかもしれません。

マーケターって賢い人が多いですね。

ぜひ皆さんも「プログラム x マーケティング」で「稼ぐコード」をつくってみてください。

ではでは〜❗

「神戸のデザインマンホール
24種類
コンプリートしました😊✨」

Laravel：別ドメインからでも行動履歴を保存するマーケティング戦略