Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(docs): add documentation for autocapture custom labels for iOS #10085

Merged
merged 4 commits into from
Dec 10, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 49 additions & 0 deletions contents/docs/libraries/ios/_snippets/autocapture.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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
marandaneto marked this conversation as resolved.
Show resolved Hide resolved

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:
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Writing the documentation made me wonder if it would be clearer to rename this to postHogIdentifier instead

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no strong opinion... but i think label more clearly says "something human readable" than identifier does


```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
<UITextField id="usernameTextField">text value</UITextField>
```

**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`
6 changes: 5 additions & 1 deletion contents/docs/product-analytics/autocapture.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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 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 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

Expand Down
Loading