TrackingPixel

• The TrackingPixel component is an essential tracking tool designed to capture and analyze user interactions within React Native applications. It is especially useful for analytics in e-commerce platforms or any application where understanding user behavior is crucial. This component uses visibility tracking to determine if certain UI elements are viewed by users, facilitating effective measurement of user engagement.

  Leveraging the IntersectionObserver, this component fires callbacks based on the visibility of its child content according to specified thresholds. It integrates with React Navigation to handle focus state changes, ensuring that visibility tracking is accurate and performance-optimized within navigation flows.

  Here is an example implementation of the TrackingPixel component:

• 
  

  <TrackingPixel
    id="product-view-123"
    eventData={{productId: 123}}
    onImpression={data => console.log('Product viewed:', data)}
  >
    <ProductCard product={productData} />
  </TrackingPixel>

Integration

Step 1: Importing the Component

Import the TrackingPixel component from @shopify/shop-minis-platform-sdk:

import {TrackingPixel} from '@shopify/shop-minis-platform-sdk'

Step 2: Using the TrackingPixel

Utilize the TrackingPixel in your application to monitor the visibility of important UI elements. Configure the component with an id, visibility threshold, and onImpression callback function to handle the impression data:

<TrackingPixel
  id="featured-article"
  threshold="half-visible"
  onImpression={() => console.log('Featured article was viewed.')}
>
  <Article title="How to Use TrackingPixel in React Native" />
</TrackingPixel>

Examples

Basic Usage:

<TrackingPixel
  id="promo-banner"
  onImpression={() => console.log('Promotional banner viewed')}
>
  <Banner content="Check out these deals!" />
</TrackingPixel>

With Custom Threshold:

<TrackingPixel
  id="checkout-button"
  threshold="fully-visible"
  onImpression={() => console.log('Checkout button is fully visible')}
>
  <Button label="Checkout Now" onPress={handleCheckout} />
</TrackingPixel>

Props

• id (string): Unique identifier for the tracking instance.
• eventData (T, optional): Custom data associated with the impression event.
• threshold (number | PixelPositionTrigger, optional): Defines the visibility threshold required to trigger an impression.
• minimumViewTime (number, optional): Minimum time in milliseconds that the content needs to be visible to count as an impression.
• onImpression ((eventData?: T) => void): Callback fired when the impression conditions are met.
• children (JSX.Element): The child content whose visibility is to be tracked.

For more details on the props, please refer to the TrackingPixel Props.