Add basic browser/device targeting to billboards

app/controllers/admin/billboards_controller.rb

@@ -59,7 +59,7 @@ def destroy
     def billboard_params
       params.permit(:organization_id, :body_markdown, :placement_area, :target_geolocations,
                     :published, :approved, :name, :display_to, :tag_list, :type_of,
-                    :exclude_article_ids, :audience_segment_id, :priority,
+                    :exclude_article_ids, :audience_segment_id, :priority, :browser_context,
                     :render_mode, :template, :custom_display_label, :requires_cookies)
     end
 

app/controllers/api/v1/billboards_controller.rb

@@ -48,7 +48,7 @@ def require_admin
 
       def permitted_params
         params.permit :approved, :body_markdown, :creator_id, :display_to,
-                      :name, :organization_id, :placement_area, :published,
+                      :name, :organization_id, :placement_area, :published, :browser_context,
                       :tag_list, :type_of, :exclude_article_ids, :weight, :requires_cookies,
                       :audience_segment_type, :audience_segment_id, :priority, :special_behavior,
                       :custom_display_label, :template, :render_mode, :preferred_article_ids,

app/controllers/billboards_controller.rb

@@ -33,6 +33,7 @@ def show
         user_tags: user_tags,
         cookies_allowed: cookies_allowed?,
         location: client_geolocation,
+        user_agent: request.user_agent,
       )
 
       if @billboard && !session_current_user_id

app/javascript/packs/admin/billboards.jsx

@@ -23,7 +23,7 @@ function saveTags(selectionString) {
 /**
  * Shows and Renders a Tags preact component for the Targeted Tag(s) field
  */
-function showTagsField() {
+function showPrecisionFields() {
   const billboardsTargetedTags = document.getElementById(
     'billboard-targeted-tags',
   );
@@ -35,17 +35,30 @@ function showTagsField() {
       billboardsTargetedTags,
     );
   }
+
+  const billboardPrecisionElements = document.querySelectorAll('.billboard-requires-precision-targeting');
+
+
+  billboardPrecisionElements.forEach((element) => {
+    element?.classList.remove('hidden');
+  });
 }
 
 /**
  * Hides the Targeted Tag(s) field
  */
-function hideTagsField() {
+function hidePrecisionFields() {
   const billboardsTargetedTags = document.getElementById(
     'billboard-targeted-tags',
   );
 
   billboardsTargetedTags?.classList.add('hidden');
+
+  const billboardPrecisionElements = document.querySelectorAll('.billboard-requires-precision-targeting');
+
+  billboardPrecisionElements.forEach((element) => {
+    element?.classList.add('hidden');
+  });
 }
 
 /**
@@ -154,14 +167,14 @@ document.ready.then(() => {
   ];
 
   if (targetedTagPlacements.includes(select.value)) {
-    showTagsField();
+    showPrecisionFields();
   }
 
   select.addEventListener('change', (event) => {
     if (targetedTagPlacements.includes(event.target.value)) {
-      showTagsField();
+      showPrecisionFields();
     } else {
-      hideTagsField();
+      hidePrecisionFields();
       clearTagList();
     }
   });

app/models/billboard.rb

@@ -46,6 +46,7 @@ class Billboard < ApplicationRecord
   enum render_mode: { forem_markdown: 0, raw: 1 }
   enum template: { authorship_box: 0, plain: 1 }
   enum :special_behavior, { nothing: 0, delayed: 1 }
+  enum :browser_context, { all_browsers: 0, desktop: 1, mobile_web: 2, mobile_in_app: 3 }
 
   belongs_to :organization, optional: true
   has_many :billboard_events, foreign_key: :display_ad_id, inverse_of: :billboard, dependent: :destroy
@@ -79,7 +80,7 @@ class Billboard < ApplicationRecord
 
   self.table_name = "display_ads"
 
-  def self.for_display(area:, user_signed_in:, user_id: nil, article: nil, user_tags: nil, location: nil, cookies_allowed: false)
+  def self.for_display(area:, user_signed_in:, user_id: nil, article: nil, user_tags: nil, location: nil, cookies_allowed: false, user_agent: nil)
     permit_adjacent = article ? article.permit_adjacent_sponsors? : true
 
     billboards_for_display = Billboards::FilteredAdsQuery.call(
@@ -94,6 +95,7 @@ def self.for_display(area:, user_signed_in:, user_id: nil, article: nil, user_ta
       user_tags: user_tags,
       location: location,
       cookies_allowed: cookies_allowed,
+      user_agent: user_agent,
     )
 
     case rand(99) # output integer from 0-99

app/queries/billboards/filtered_ads_query.rb

@@ -11,7 +11,7 @@ def self.call(...)
     # @param location [Geolocation|String] the visitor's geographic location
     def initialize(area:, user_signed_in:, organization_id: nil, article_tags: [],
                    permit_adjacent_sponsors: true, article_id: nil, billboards: Billboard,
-                   user_id: nil, user_tags: nil, location: nil, cookies_allowed: false)
+                   user_id: nil, user_tags: nil, location: nil, cookies_allowed: false, user_agent: nil)
       @filtered_billboards = billboards.includes([:organization])
       @area = area
       @user_signed_in = user_signed_in
@@ -21,13 +21,15 @@ def initialize(area:, user_signed_in:, organization_id: nil, article_tags: [],
       @article_id = article_id
       @permit_adjacent_sponsors = permit_adjacent_sponsors
       @user_tags = user_tags
+      @user_agent = user_agent
       @location = Geolocation.from_iso3166(location)
       @cookies_allowed = cookies_allowed
     end
 
     def call
       @filtered_billboards = approved_and_published_ads
       @filtered_billboards = placement_area_ads
+      @filtered_billboards = browser_context_ads if @user_agent
       @filtered_billboards = cookies_allowed_ads unless @cookies_allowed
 
       if @article_id.present?
@@ -121,6 +123,19 @@ def location_targeted_ads
       @filtered_billboards.where(geo_query)
     end
 
+    def browser_context_ads
+      case @user_agent
+      when /DEV-Native-ios|DEV-Native-android|ForemWebView/
+        @filtered_billboards.where(browser_context: %i[all_browsers mobile_in_app])
+      when /Mobile|iPhone|Android/
+        @filtered_billboards.where(browser_context: %i[all_browsers mobile_web])
+      when /Windows|Macintosh|Mac OS X|Linux/
+        @filtered_billboards.where(browser_context: %i[all_browsers desktop])
+      else
+        @filtered_billboards
+      end
+    end
+
     def type_of_ads
       # If this is an organization article and community-type ads exist, show them
       if @organization_id.present?

app/views/admin/billboards/_form.html.erb

@@ -42,12 +42,17 @@
       <%= select_tag :placement_area, options_for_select(billboards_placement_area_options_array, selected: @billboard.placement_area), include_blank: "Select...", class: "crayons-select js-placement-area" %>
     </div>
 
+    <div class="crayons-field billboard-requires-precision-targeting hidden">
+      <%= label_tag :browser_context, "Browser context:", class: "crayons-field__label" %>
+      <%= select_tag :browser_context, options_for_select([["All browsers", "all_browsers"], ["Desktop", "desktop"], ["Mobile web", "mobile_web"], ["Mobile in-app", "mobile_in_app"]], selected: @billboard.browser_context), class: "crayons-select js-placement-area" %>
+    </div>
+
     <div class="crayons-field">
       <div id="billboard-targeted-tags"></div>
     </div>
 
     <% if FeatureFlag.enabled?(Geolocation::FEATURE_FLAG) %>
-      <div class="crayons-field">
+      <div class="crayons-field billboard-requires-precision-targeting hidden">
         <%= label_tag :target_geolocations, "Target Geolocations:", class: "crayons-field__label" %>
         <%= text_field_tag :target_geolocations, @billboard.target_geolocations.map(&:to_iso3166).join(", "), class: "crayons-textfield", placeholder: "US-NY, CA-ON", autocomplete: "off" %>
       </div>

db/migrate/20240226173118_add_browser_targeting_to_billboards.rb

@@ -0,0 +1,5 @@
+class AddBrowserTargetingToBillboards < ActiveRecord::Migration[7.0]
+  def change
+    add_column :display_ads, :browser_context, :integer, default: 0, null: false
+  end
+end

db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema[7.0].define(version: 2024_02_12_142953) do
+ActiveRecord::Schema[7.0].define(version: 2024_02_26_173118) do
   # These are extensions that must be enabled in order to support this database
   enable_extension "citext"
   enable_extension "ltree"
@@ -473,6 +473,7 @@
     t.boolean "approved", default: false
     t.integer "audience_segment_id"
     t.text "body_markdown"
+    t.integer "browser_context", default: 0, null: false
     t.string "cached_tag_list"
     t.integer "clicks_count", default: 0
     t.datetime "created_at", precision: nil, null: false
@@ -1388,6 +1389,7 @@
 
   create_table "users_settings", force: :cascade do |t|
     t.string "brand_color1", default: "#000000"
+    t.integer "config_feed_style", default: 0, null: false
     t.integer "config_font", default: 0, null: false
     t.integer "config_homepage_feed", default: 0, null: false
     t.integer "config_navbar", default: 0, null: false

spec/queries/billboards/filtered_ads_query_spec.rb

@@ -339,4 +339,38 @@ def filter_billboards(**options)
       end
     end
   end
+
+  context "when considering browser context" do
+    let!(:all_browsers_ad) { create_billboard browser_context: :all_browsers }
+    let!(:mobile_in_app_ad) { create_billboard browser_context: :mobile_in_app }
+    let!(:mobile_web_ad) { create_billboard browser_context: :mobile_web }
+    let!(:desktop_ad) { create_billboard browser_context: :desktop }
+
+    it "filters ads based on user_agent string for mobile in-app context" do
+      filtered = filter_billboards(user_agent: "DEV-Native-ios")
+      expect(filtered).to include(all_browsers_ad, mobile_in_app_ad)
+      expect(filtered).not_to include(mobile_web_ad, desktop_ad)
+
+      filtered = filter_billboards(user_agent: "DEV-Native-android")
+      expect(filtered).to include(all_browsers_ad, mobile_in_app_ad)
+      expect(filtered).not_to include(mobile_web_ad, desktop_ad)
+    end
+
+    it "filters ads based on user_agent string for mobile web context" do
+      filtered = filter_billboards(user_agent: "Mobile Safari")
+      expect(filtered).to include(all_browsers_ad, mobile_web_ad)
+      expect(filtered).not_to include(mobile_in_app_ad, desktop_ad)
+    end
+
+    it "filters ads based on user_agent string for desktop context" do
+      filtered = filter_billboards(user_agent: "Windows NT 10.0; Win64; x64")
+      expect(filtered).to include(all_browsers_ad, desktop_ad)
+      expect(filtered).not_to include(mobile_in_app_ad, mobile_web_ad)
+    end
+
+    it "includes all ads for unknown user_agent contexts" do
+      filtered = filter_billboards(user_agent: "SomeUnknownBrowser/1.0")
+      expect(filtered).to include(all_browsers_ad, mobile_in_app_ad, mobile_web_ad, desktop_ad)
+    end
+  end
 end

spec/requests/api/v1/billboards_spec.rb

@@ -14,6 +14,7 @@
       type_of: "community",
       published: true,
       approved: true,
+      browser_context: "all_browsers",
       requires_cookies: false,
       target_geolocations: "US-WA, CA-BC"
     }
@@ -51,7 +52,7 @@
                           "impressions_count", "name", "organization_id",
                           "placement_area", "processed_html", "published",
                           "success_rate", "tag_list", "type_of", "updated_at",
-                          "creator_id", "exclude_article_ids",
+                          "creator_id", "exclude_article_ids", "browser_context",
                           "audience_segment_type", "audience_segment_id",
                           "custom_display_label", "template", "render_mode", "preferred_article_ids",
                           "priority", "weight", "target_geolocations", "requires_cookies", "special_behavior")
@@ -71,7 +72,7 @@
                           "impressions_count", "name", "organization_id",
                           "placement_area", "processed_html", "published",
                           "success_rate", "tag_list", "type_of", "updated_at",
-                          "creator_id", "exclude_article_ids",
+                          "creator_id", "exclude_article_ids", "browser_context",
                           "audience_segment_type", "audience_segment_id",
                           "custom_display_label", "template", "render_mode", "preferred_article_ids",
                           "priority", "weight", "target_geolocations", "requires_cookies", "special_behavior")
@@ -135,7 +136,7 @@
           contain_exactly("approved", "body_markdown", "cached_tag_list",
                           "clicks_count", "created_at", "display_to", "id",
                           "impressions_count", "name", "organization_id",
-                          "placement_area", "processed_html", "published",
+                          "placement_area", "processed_html", "published", "browser_context",
                           "success_rate", "tag_list", "type_of", "updated_at",
                           "creator_id", "exclude_article_ids", "requires_cookies",
                           "audience_segment_type", "audience_segment_id", "special_behavior",