From 7dc73205bd3ba7cd5a2b1ab97b81fe5772c5c011 Mon Sep 17 00:00:00 2001 From: Ioannis J Date: Mon, 9 Dec 2024 08:15:07 +0200 Subject: [PATCH 1/4] feat(docs): add documentation for autocapture custom labels for iOS --- .../libraries/ios/_snippets/autocapture.mdx | 49 +++++++++++++++++++ 1 file changed, 49 insertions(+) diff --git a/contents/docs/libraries/ios/_snippets/autocapture.mdx b/contents/docs/libraries/ios/_snippets/autocapture.mdx index 5e28b287016c..a0cc42ece41f 100644 --- a/contents/docs/libraries/ios/_snippets/autocapture.mdx +++ b/contents/docs/libraries/ios/_snippets/autocapture.mdx @@ -66,3 +66,52 @@ struct HomeView: View { ``` In SwiftUI, views can range from entire screens to small UI components. Unlike UIKit, SwiftUI doesn’t clearly distinguish between these levels, which makes automatic tracking of full-screen views harder. + +### Adding a custom label on autocaptured elements + +PostHog automatically captures interactions with various UI elements in your app, but these interactions are often identified by element type names (e.g., UIButton, UITextField, UILabel). + +While this provides basic tracking, it can be challenging to pinpoint specific interactions with particular elements in your analytics. To make your data more meaningful and actionable, you can assign custom labels to any autocaptured element. These labels act as descriptive identifiers, making it easier to identify, filter, and analyze events in your reports. + +** Adding a custom label in UIKit ** + +To assign a custom label to a UIView, use the `postHogLabel` property: + +```swift +let view = UIView() +view.postHogLabel = "usernameTextField" +``` + +In this example, interactions with the UITextField will be captured with an additional identifier "usernameTextField". + +** Adding a custom label in SwiftUI ** + +In SwiftUI, use the `.postHogLabel(_:)` modifier instead: + +```swift +var body: some View { + ... + TextField("username", text: $username) + .postHogLabel("usernameTextField") +} +``` + +In this example, interactions with the _underlying_ UITextField will be captured with an additional identifier "usernameTextField". + +**Example of generated analytics data** + +The generated analytics element in the examples above will have the following form: + +```html +text value +``` + +**Filtering for labeled autocaptured elements in reports** + +To locate and filter interactions with specific elements in PostHog reports, you can use Autocapture element filters, such as: + +- Tag Name (`UITextField` in this example) +- Text (`text value` in this example) +- CSS Selector (the generated `id` attribute in this example) + +In the examples above, we can filter for the specific text field using the CSS Selector `#usernameTextField` \ No newline at end of file From 6c5281a64d68786f58f36bcbdee128594b9c69ee Mon Sep 17 00:00:00 2001 From: Ioannis J Date: Mon, 9 Dec 2024 14:07:32 +0200 Subject: [PATCH 2/4] feat(docs): add iOS sdk in product analytics autocapture docs --- contents/docs/product-analytics/autocapture.mdx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/contents/docs/product-analytics/autocapture.mdx b/contents/docs/product-analytics/autocapture.mdx index 671546677970..d23cb8dd9649 100644 --- a/contents/docs/product-analytics/autocapture.mdx +++ b/contents/docs/product-analytics/autocapture.mdx @@ -16,7 +16,9 @@ PostHog can capture frontend events automatically using autocapture. This captur This means you don't need to manually add tracking for individual components, links, buttons, divs, spans, or other parts of your product. Autocapture also provides data for [heatmaps](/docs/toolbar/heatmaps). -Autocapture is available for our [JavaScript Web](/docs/libraries/js), [React](/docs/libraries/react), and [React Native](/docs/libraries/react-native) SDKs and is **enabled by default**. +Autocapture is available by for our [JavaScript Web](/docs/libraries/js), [React](/docs/libraries/react), and [React Native](/docs/libraries/react-native) SDKs and is **enabled by default**. + +Autocapture is also available for our [iOS SDK](/docs/libraries/ios), but it is **disabled by default** as an experimental feature. ## Configuring autocapture From 0c7431fb42166b58bed23af38b923f6979063d36 Mon Sep 17 00:00:00 2001 From: Ioannis J Date: Mon, 9 Dec 2024 14:32:10 +0200 Subject: [PATCH 3/4] fix(docs): product analytics autocapture --- contents/docs/product-analytics/autocapture.mdx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/contents/docs/product-analytics/autocapture.mdx b/contents/docs/product-analytics/autocapture.mdx index d23cb8dd9649..309b9887a951 100644 --- a/contents/docs/product-analytics/autocapture.mdx +++ b/contents/docs/product-analytics/autocapture.mdx @@ -16,9 +16,7 @@ PostHog can capture frontend events automatically using autocapture. This captur This means you don't need to manually add tracking for individual components, links, buttons, divs, spans, or other parts of your product. Autocapture also provides data for [heatmaps](/docs/toolbar/heatmaps). -Autocapture is available by for our [JavaScript Web](/docs/libraries/js), [React](/docs/libraries/react), and [React Native](/docs/libraries/react-native) SDKs and is **enabled by default**. - -Autocapture is also available for our [iOS SDK](/docs/libraries/ios), but it is **disabled by default** as an experimental feature. +Autocapture is available by for our [JavaScript Web](/docs/libraries/js), [React](/docs/libraries/react), [React Native](/docs/libraries/react-native) and [iOS](/docs/libraries/ios) SDKs and is **disabled by default**. ## Configuring autocapture From f782fbe95e6669c0b08335a9881764024c295481 Mon Sep 17 00:00:00 2001 From: Ioannis J Date: Mon, 9 Dec 2024 17:13:36 +0200 Subject: [PATCH 4/4] fix(docs): autocapture libs --- contents/docs/product-analytics/autocapture.mdx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/contents/docs/product-analytics/autocapture.mdx b/contents/docs/product-analytics/autocapture.mdx index 309b9887a951..2a4269082b62 100644 --- a/contents/docs/product-analytics/autocapture.mdx +++ b/contents/docs/product-analytics/autocapture.mdx @@ -16,7 +16,11 @@ PostHog can capture frontend events automatically using autocapture. This captur This means you don't need to manually add tracking for individual components, links, buttons, divs, spans, or other parts of your product. Autocapture also provides data for [heatmaps](/docs/toolbar/heatmaps). -Autocapture is available by for our [JavaScript Web](/docs/libraries/js), [React](/docs/libraries/react), [React Native](/docs/libraries/react-native) and [iOS](/docs/libraries/ios) SDKs and is **disabled by default**. +Autocapture is available in the following SDKs: +- [JavaScript Web](/docs/libraries/js) - enabled by default +- [React](/docs/libraries/react) - enabled by default +- [React Native](/docs/libraries/react-native) - disabled by default +- [iOS](/docs/libraries/ios) - disabled by default ## Configuring autocapture