SwiftUI移行のためのインプレッショントラッキング基盤の構築

AbemaTV, Inc. All Rights Reserved  AbemaTV, Inc. All Rights Reserved 
1 SwiftUI 移行のためのインプレッショントラッキング基盤の構築 2025 March 3rd Koki Hirokawa

AbemaTV, Inc. All Rights Reserved  現状 2 • UIKit が支配的
UIKit SwiftUI

AbemaTV, Inc. All Rights Reserved  SwiftUI への移行 3 SwiftUI •
新規実装は SwiftUI 主体 • UIKit はスポット利用 UIKit

AbemaTV, Inc. All Rights Reserved  移行における課題 4 • キャッチアップ •
iOS 15.0 までのサポート • インプレッショントラッキングの仕組み

AbemaTV, Inc. All Rights Reserved  移行における課題 5 • キャッチアップ •
iOS 15.0 までのサポート • インプレッショントラッキングの仕組み ✔ ✔ ✔ ✔

AbemaTV, Inc. All Rights Reserved  目次 6 • 自己紹介 •
インプレッショントラッキングとは • SwiftUI での基盤構築 • 工夫した点 • まとめ

AbemaTV, Inc. All Rights Reserved  Koki Hirokawa • 2020年 AbemaTV新卒入社
  7 Profile @pihero13 KokiHirokawa

AbemaTV, Inc. All Rights Reserved  行動ログ 9 • ユーザの行動を分析し、ビジネス戦略の意思決定を行うためのログ ◦
どの画面に遷移した ◦ 何を視聴した ◦ 何を見た ◦ 何をクリックした

AbemaTV, Inc. All Rights Reserved  インプレッションログ 10 • 画面上に表示されるどの要素がユーザに見られたか ✔
✔ ✔ ✔

AbemaTV, Inc. All Rights Reserved  インプレッションログ 11 ✔ ✔ ✔
✔ .onAppear { sendImpressionLog(id: “mylist-\(id)”) } • シンプルな実装

✔ .onAppear { sendImpressionLog(id: “mylist-\(id)”) } • 「見た」の定義はもう少し複雑 ❌

• 例) 要素の80%以上の領域が画面内に2秒以上表示されたことを、ユーザが「見た」と定義する ✔

AbemaTV, Inc. All Rights Reserved  前提 15 • ABEMA では多くの画面がスクロール可能
• UIKit では TableView や CollectionView で表示するコンテンツのインプレッションをトラッキングするための基盤を用意

AbemaTV, Inc. All Rights Reserved  構成 16 ImpressionTrackingController Trackable ScrollView
Trackable View

AbemaTV, Inc. All Rights Reserved  利用イメージ 17 @StateObject var controller
= ImpressionTrackingController( configuration: .init( minimumAreaRatio: 0.8, minimumDuration: 2 ) )

AbemaTV, Inc. All Rights Reserved  利用イメージ 18 TrackableScrollView(showsIndicator: false) {
LazyVStack { ForEach(fruits) { fruit in FruitView(fruit) .trackable(id: fruit.id) { sendImpressionLog() } } } } .environment(\.trackingController, controller)

AbemaTV, Inc. All Rights Reserved  Trackable ScrollView - RootViewFrame のキャッシュ
19 ImpressionTrackingController Trackable ScrollView .onChange( geometry.frame(in: .global) ) { frame in controller.setRootViewFrame(frame) }

AbemaTV, Inc. All Rights Reserved  Trackable ScrollView - スクロールの検知 20
ImpressionTrackingController Trackable ScrollView .onChange( geometry.frame(in: .named(space)).origin ) { origin in if origin != prevOrigin { controller.sendScrollEvent() } }

AbemaTV, Inc. All Rights Reserved  21 Trackable View - インプレッションのロジック
Trackable View .onReceive(controller.didScroll) { let visibility = … if 0.8 <= visibility { // タイマーを設定 () } else { // タイマーを停止 () } } ImpressionTrackingController

◦ 表示内容の検証をしている間に指定したインプレッションの秒数を超える

◦ 表示内容の検証をしている間に指定したインプレッションの秒数を超える ▪ 1秒から3秒に変更

AbemaTV, Inc. All Rights Reserved  まとめ 36 • SwiftUI 主体の実装へ移行するにあたって、インプレッションログを送信するための基
盤を構築 • TrackableScrollView や trackable modifier を用意することで、実装コストを抑えてインプレッションログの送信ができるように • UI Test のメリットは大きいものの、実装・運用コストは少し高め

SwiftUI移行のためのインプレッショントラッキング基盤の構築

SwiftUI移行のためのインプレッショントラッキング基盤の構築

More Decks by Koki Hirokawa

Other Decks in Programming

Featured

Transcript