Sending Geo-Targeted Live Ads with Laravel 5.8 and PushRadar

Download code (11.8MB, .zip)
PushRadar: Geo-Targeted Live Ads

This tutorial shows you how to dynamically send advertisements to your website users with Laravel 5.8 and PushRadar. We will be using PushRadar's geo-targeting functionality to only show the advert to users in the UK or USA, and PushRadar's action targeting functionality to ensure that users only see the advert once.

You can download the full source code of this solution as a zip file using the 'Download code' link at the top of this page.

Prerequisites

In order to follow along this guide or run the attached code, you will need the following:

  • PHP 7.2 or later
  • Composer - see getcomposer.org
  • A PushRadar account - you can sign up for free by clicking here

Live demo

If you would like to run a live demo of the finished product, download the attached code, and upload the files in the GeoTargetedLiveAds folder to your server.

  • Replace your-secret-key inside app/Console/Kernel.php with your actual PushRadar secret.
  • Replace your-api-key inside resources/views/welcome.php with your actual PushRadar API key.
  • Start a cron job to call php artisan schedule:run every minute.
  • Navigate to the root of your site (/), and you should see the advert pop up after a minute if you are in the UK or USA.
You can obtain your PushRadar API credentials from the API page of your dashboard (www.pushradar.com/app/api).

Getting started

First of all, let's start a new Laravel project called GeoTargetedLiveAds using Composer. Run the following command from your console inside your projects folder:

composer create-project --prefer-dist laravel/laravel GeoTargetedLiveAds

Change directory to the one you just created by running the following command from your console:

cd GeoTargetedLiveAds

We need to include PushRadar's PHP library to broadcast data. Run the following command to get the latest version of PushRadar's PHP server library:

composer require pushradar/pushradar-php

We are ready to start broadcasting data. Open app/Console/Kernel.php in a code editor and write the following code inside the schedule method:

  • PHP
$schedule->call(function() {
    $radar = new \PushRadar\PushRadar("your-secret-key");
    $radar->targetCountries(["US", "GB"])->targetNotAction("seen-live-ad-1")->broadcast("geo-targeted-ads", [
        "adNumber" => 1,
        "adHTML" => "<div class='light-popup'>You might like to purchase items 2 or 3<br /><br /><strong>This is an example advert</strong></div>"
    ]);
})->everyMinute();

The code above targets the advert to users in the USA and UK, who haven't seen the advert before (targetNotAction("seen-live-ad-1")). The data containing the advert number and HTML is broadcast on the geo-targeted-ads channel. Remember to replace your-secret-key with your actual PushRadar secret.

Receiving & displaying the advert

We're now ready to receive and display the advert using PushRadar's JavaScript client library. Open the resources/views/welcome.php file and replace its content with the following code:

  • HTML
<html>
<head>
    <title>Geo-Targeted Live Ads</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
    <style>
        .light-popup {
            position: relative;
            background: #FFF;
            padding: 40px;
            width: auto;
            max-width: 500px;
            margin: 20px auto;
            transition: 1s all;
        }
    </style>
</head>
<body>
<script
    src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
    crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<script src="https://www.pushradar.com/pushradar.js"></script>

<script>
    var radar = new PushRadar("your-api-key");
    radar.subscribe.to("geo-targeted-ads", function (data) {
        // Track that this user has seen the advert
        radar.track.action("seen-live-ad-" + data.adNumber);

        // Show the advert in a lightbox window
        $.magnificPopup.open({
            items: {
                src: data.adHTML,
                type: 'inline'
            }
        });
    });
</script>
</body>
</html>

Replace your-api-key with your actual PushRadar API key.

Running the application

Upload the code to your server and set up a cron job to call php artisan schedule:run every minute. Then navigate to the root of your website (/) and you should see the advert pop up after a minute if you are in the UK or USA.

PushRadar: Geo-Targeted Live Ads