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

by Koki Hirokawa

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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() } }

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text