@thealteroffice/react-native-adgeist 0.0.20 → 0.0.22

package/Adgeist.podspec

@@ -16,7 +16,7 @@ Pod::Spec.new do |s|
   s.source_files = "ios/**/*.{h,m,mm,cpp,swift}"
   s.private_header_files = "ios/**/*.h"
 
-  s.dependency "AdgeistKit", '= 0.0.9'
+  s.dependency "AdgeistKit", '= 1.0.1-qa'
 
   # Use install_modules_dependencies helper to install the dependencies if React Native version >=0.71.0.
   # See https://github.com/facebook/react-native/blob/febf6b7f33fdb4904669f99d795eba4c0f95d7bf/scripts/cocoapods/new_architecture.rb#L79.

package/README.md

@@ -4,23 +4,24 @@
 
 # @thealteroffice/react-native-adgeist
 
-A React Native SDK that enables publishers to seamlessly integrate their ad spaces with the AdGeist marketplace. Built with TypeScript, Kotlin, and Swift, supporting both Old and New React Native architectures with TurboModule support.
+Integrating Adgeist Mobile Ads SDK into an app is the first step toward displaying ads and earning revenue. Once you've integrated the SDK, you can choose an ad format (such as banner or display) and follow the steps to implement it.
 
-## 🚀 Features
+## Before you begin
 
-- ✅ **Cross-platform**: iOS and Android support
-- ✅ **Modern Architecture**: Support for both legacy and new React Native architectures
-- ✅ **TurboModule**: Enhanced performance with TurboModule implementation
-- ✅ **TypeScript**: Full TypeScript support with type definitions
-- ✅ **Expo Compatible**: Config plugin for seamless Expo integration
-- ✅ **Analytics**: Built-in impression and click tracking
-- ✅ **Customizable**: Flexible ad display options
-- ✅ **Consent Management**: Support for user consent collection for personalized ads
-- ✅ **User Data Platform**: Built-in CDP client for user data and event tracking
+To prepare your app, complete the steps in the following sections.
 
-## 📦 Installation
+### App prerequisites
 
-### React Native CLI
+Make sure that your app's build file uses the following values:
+
+- Minimum SDK version of 24 or higher
+- Compile SDK version of 35 or higher
+
+## Configure your app
+
+### STEP 1: Initiate the Installation Process for the SDK
+
+Install the Adgeist SDK in your React Native project using npm or yarn. This step sets up the necessary package for ad integration.
 
 ```bash
 npm install @thealteroffice/react-native-adgeist
@@ -28,549 +29,97 @@ npm install @thealteroffice/react-native-adgeist
 yarn add @thealteroffice/react-native-adgeist
 ```
 
-For iOS, run pod install:
+### Android Configuration
 
-```bash
-cd ios && pod install
-```
+Add your Adgeist publisher ID, api key and package id, as identified in the Adgeist web interface, to your app's `AndroidManifest.xml` file. To do so, add a `<meta-data>` tag with `android:name="com.adgeistkit.ads.ADGEIST_APP_ID"`, `android:name="com.adgeistkit.ads.ADGEIST_API_KEY"`, and `android:name="com.adgeistkit.ads.ADGEIST_CUSTOM_PACKAGE_OR_BUNDLE_ID"`.
 
-### Expo Managed Workflow
+You can find your app ID in the Adgeist web interface. For `android:value`, insert your own Adgeist publisher ID, surrounded by quotation marks.
 
-```bash
-npx expo install @thealteroffice/react-native-adgeist
-```
-
-Rebuild your app:
+```xml
+<manifest>
+  <application>
+    <!-- Sample Adgeist app ID: 69326f9fbb280f9241cabc94 -->
+    <!-- Sample Adgeist api key: b4e33bb73061d4e33670f229033f14bf770d35b15512dc1f106529e38946e49c -->
+    <!-- Sample Adgeist package id: https://adgeist-ad-integration.d49kd6luw1c4m.amplifyapp.com -->
 
-```bash
-npx expo prebuild --clean
-```
+    <meta-data
+        android:name="com.adgeistkit.ads.ADGEIST_APP_ID"
+        android:value="ADGEIST_APP_ID"/>
 
-> **Note**: Requires Expo SDK 50+ and Kotlin template support.
+    <meta-data
+        android:name="com.adgeistkit.ads.ADGEIST_API_KEY"
+        android:value="ADGEIST_API_KEY"/>
 
-## ⚙️ Peer Dependencies
+    <meta-data
+        android:name="com.adgeistkit.ads.ADGEIST_CUSTOM_PACKAGE_OR_BUNDLE_ID"
+        android:value="ADGEIST_CUSTOM_PACKAGE_OR_BUNDLE_ID"/>
+  </application>
+</manifest>
+```
 
-This package uses `react-native-video` internally for media rendering.
+Replace `ADGEIST_APP_ID`, `ADGEIST_API_KEY`, `ADGEIST_CUSTOM_PACKAGE_OR_BUNDLE_ID` with your Adgeist IDs.
 
-### Why Peer Dependency?
+### iOS Configuration
 
-React Native native modules like `react-native-video` should not be bundled inside libraries to prevent native build conflicts.
+#### CocoaPods
 
-We declare `react-native-video` as a peer dependency, so your app controls the version.
+Before you continue, review Using CocoaPods for information on creating and using Podfiles.
 
-### What You Need to Do
+To use CocoaPods, follow these steps:
 
-- **If your app already uses `react-native-video`**: No action needed.
-- **If your app does not have `react-native-video` installed**: Please install it manually:
+In a terminal, run:
 
 ```bash
-npm install react-native-video@^4.5.2
+cd ios && pod install --repo-update
 ```
 
-or
-
-```bash
-yarn add react-native-video@^4.5.2
-```
+#### Update your Info.plist
 
-### What Happens If You Skip This?
+Update your app's `Info.plist` file to add three keys:
 
-If `react-native-video` is not installed, your app will crash at runtime with:
+A `ADGEIST_APP_ID`, `ADGEIST_API_KEY`, `ADGEIST_CUSTOM_PACKAGE_OR_BUNDLE_ID` key with a string value of your Adgeist IDs found in the Adgeist UI.
 
-```javascript
-Error: Cannot find module 'react-native-video'
+```xml
+<key>ADGEIST_API_KEY</key>
+<string>e31edf10067897a3904b64b6a4b5f18b1260470183ae203cc521b0479166d597</string>
+<key>ADGEIST_APP_ID</key>
+<string>69326f9fbb280f9241cabc94</string>
+<key>ADGEIST_CUSTOM_PACKAGE_OR_BUNDLE_ID</key>
+<string>https://adgeist-ad-integration.d49kd6luw1c4m.amplifyapp.com/</string>
 ```
 
-### Why Not Include It in dependencies?
-
-Adding `react-native-video` to dependencies directly in this library would:
-
-- ❌ Cause duplicate native module linking
-- ❌ Lead to iOS/Android build failures
-- ❌ Break compatibility with apps already using `react-native-video`
+## Perform the Configuration of AdgeistProvider
 
-### Dependency Summary
-
-| Package              | Install It?           | Why?                                                               |
-| -------------------- | --------------------- | ------------------------------------------------------------------ |
-| `react-native-video` | ✅ **Yes (required)** | Your app must install this manually to satisfy the peer dependency |
-
-## 🔧 Setup & Configuration
-
-### Basic Setup
-
-Wrap your app with `AdgeistProvider` to configure global settings:
+Add an `AdgeistProvider` at the root level of your app.
 
 ```tsx
-import React from 'react';
-import {
-  AdgeistProvider,
-  BannerAd,
-} from '@thealteroffice/react-native-adgeist';
+import { AdgeistProvider } from '@thealteroffice/react-native-adgeist';
 
 export default function App() {
   return (
-    <AdgeistProvider
-      publisherId="your-publisher-id"
-      apiKey="your-api-key"
-      domain="your-domain"
-      isTestEnvironment={false}
-    >
-      <YourAppContent />
+    <AdgeistProvider isTestEnvironment={false}>
+      {/* Your app content */}
     </AdgeistProvider>
   );
 }
 ```
 
-### Environment Configuration
-
-Set `isTestEnvironment` based on your app's environment:
-
-```tsx
-const isTestMode = __DEV__ || process.env.NODE_ENV === 'development';
-
-<AdgeistProvider
-  publisherId="your-publisher-id"
-  apiKey="your-api-key"
-  domain="your-domain"
-  isTestEnvironment={isTestMode}
->
-```
-
-## 🛡️ Consent Management for Personalized Ads
-
-To deliver personalized ads, user data and events must be collected and sent to the AdGeist CDP platform. This requires obtaining user consent. You can use your own Consent Management Platform (CMP) or the SDK's built-in CMP.
-
-### Using Your Own CMP
-
-If you use your own CMP, update the consent status in the SDK by calling `updateConsentStatus(boolean)`:
-
-```tsx
-import { updateConsentStatus } from '@thealteroffice/react-native-adgeist/src/cdpclient';
-
-const updateConsent = async (hasConsent: boolean) => {
-  updateConsentStatus(hasConsent);
-};
-```
-
-### Using SDK's Built-in CMP
-
-To use the SDK's Consent Management Platform, check the consent status with `getConsentStatus` and display the consent modal if needed:
-
-```tsx
-import React, { useEffect } from 'react';
-import { useAdgeistContext } from '@thealteroffice/react-native-adgeist';
-import { getConsentStatus } from '@thealteroffice/react-native-adgeist/src/cdpclient';
-
-function ConsentHandler() {
-  const { setAdgeistConsentModal } = useAdgeistContext();
-
-  useEffect(() => {
-    (async () => {
-      const consentStatus = await getConsentStatus();
-      if (consentStatus === 'DENIED') {
-        setAdgeistConsentModal(true);
-      }
-    })();
-  }, [setAdgeistConsentModal]);
-
-  return null;
-}
-```
-
-The SDK will display a popup to collect user consent when `setAdgeistConsentModal(true)` is called.
-
-### User Data and Event Tracking
-
-#### Log Events
-
-Use `logEvent` to store user interaction details for analytics:
-
-```tsx
-import { logEvent } from '@thealteroffice/react-native-adgeist/src/cdpclient';
-
-const logUserEvent = async (
-  eventType: string,
-  eventProperties: Record<string, any>
-) => {
-  await logEvent({
-    eventType,
-    eventProperties,
-  });
-};
-
-// Example usage
-await logUserEvent('product_view', {
-  productId: '12345',
-  category: 'electronics',
-  price: 299.99,
-});
-```
-
-#### Set User Details
-
-After user login, send user details using `setUserDetails` to associate the entire session lifecycle with the user. These details will be included with all events:
-
-```tsx
-import { setUserDetails } from '@thealteroffice/react-native-adgeist/src/cdpclient';
-
-const setUser = async (userDetails: UserDetails) => {
-  setUserDetails(userDetails);
-};
-
-// Example usage
-setUser({
-  userId: '12345',
-  userName: 'John Doe',
-  email: 'user@example.com',
-  phone: '+1234567890',
-});
-```
-
-## 📱 Components
-
-### AdgeistProvider
-
-The root provider component that configures the SDK globally.
-
-#### Props
-
-| Prop                | Type              | Required | Default | Description                                         |
-| ------------------- | ----------------- | -------- | ------- | --------------------------------------------------- |
-| `children`          | `React.ReactNode` | ✅       | -       | Child components                                    |
-| `publisherId`       | `string`          | ✅       | -       | Your publisher ID from AdGeist dashboard            |
-| `apiKey`            | `string`          | ✅       | -       | Your API key from AdGeist dashboard                 |
-| `domain`            | `string`          | ✅       | -       | Your registered domain (e.g., "https://adgeist.ai") |
-| `isTestEnvironment` | `boolean`         | ✅       | -       | Enable test mode for development                    |
-
-#### Example
-
-```tsx
-<AdgeistProvider
-  publisherId="67f8ad1350ff1e0870da3f5b"
-  apiKey="7f6b3361bd6d804edfb40cecf3f42e5ebc0b11bd88d96c8a6d64188b93447ad9"
-  domain="https://adgeist.ai"
-  isTestEnvironment={false}
->
-  <App />
-</AdgeistProvider>
-```
-
-### BannerAd
-
-Display banner or video advertisements in your app with responsive layout options.
-
-#### Props
-
-| Prop             | Type                               | Required | Default    | Description                                                 |
-| ---------------- | ---------------------------------- | -------- | ---------- | ----------------------------------------------------------- |
-| `dataAdSlot`     | `string`                           | ✅       | -          | Ad slot ID from your AdGeist dashboard                      |
-| `dataSlotType`   | `'banner' \| 'video'`              | ❌       | `'banner'` | Type of ad content to display                               |
-| `width`          | `number`                           | ❌       | `0`        | Width of the ad banner (ignored if `isResponsive` is true)  |
-| `height`         | `number`                           | ❌       | `0`        | Height of the ad banner (ignored if `isResponsive` is true) |
-| `isResponsive`   | `boolean`                          | ✅       | -          | Enable responsive layout that adapts to container           |
-| `responsiveType` | `'SQUARE' \| 'VERTICAL' \| 'WIDE'` | ❌       | `'SQUARE'` | Responsive layout type (used when `isResponsive` is true)   |
-
-#### Examples
-
-**Basic Banner Ad:**
-
-```tsx
-import { BannerAd } from '@thealteroffice/react-native-adgeist';
-
-function MyScreen() {
-  return (
-    <View>
-      <BannerAd
-        dataAdSlot="686149fac1fd09fff371e53c"
-        dataSlotType="banner"
-        width={350}
-        height={250}
-        isResponsive={false}
-      />
-    </View>
-  );
-}
-```
-
-**Video Ad:**
-
-```tsx
-function MyScreen() {
-  return (
-    <View>
-      <BannerAd
-        dataAdSlot="686149fac1fd09fff371e53c"
-        dataSlotType="video"
-        width={350}
-        height={200}
-        isResponsive={false}
-      />
-    </View>
-  );
-}
-```
-
-**Responsive Banner Ad:**
-
-```tsx
-function MyScreen() {
-  return (
-    <View style={{ padding: 16 }}>
-      <BannerAd
-        dataAdSlot="686149fac1fd09fff371e53c"
-        dataSlotType="banner"
-        isResponsive={true}
-        responsiveType="WIDE"
-      />
-    </View>
-  );
-}
-```
-
-**Responsive Square Ad:**
+## Implement the Embedding of Ad Slots
 
-```tsx
-function MyScreen() {
-  return (
-    <View style={{ width: 300, height: 300 }}>
-      <BannerAd
-        dataAdSlot="686149fac1fd09fff371e53c"
-        dataSlotType="banner"
-        isResponsive={true}
-        responsiveType="SQUARE"
-      />
-    </View>
-  );
-}
-```
-
-#### Responsive Types
-
-| Type       | Description                  | Best Use Case                             |
-| ---------- | ---------------------------- | ----------------------------------------- |
-| `SQUARE`   | Equal width and height ratio | Social media style ads, product showcases |
-| `VERTICAL` | Taller than wide (portrait)  | Sidebar ads, mobile story format          |
-| `WIDE`     | Wider than tall (landscape)  | Header/footer banners, horizontal layouts |
-
-#### Ad Slot Types
-
-| Type     | Description                 | Requirements                                  |
-| -------- | --------------------------- | --------------------------------------------- |
-| `banner` | Static image advertisements | Standard image formats (JPG, PNG, WebP)       |
-| `video`  | Video advertisements        | Requires `react-native-video` peer dependency |
-
-#### Layout Behavior
-
-- **Fixed Layout** (`isResponsive: false`): Uses exact `width` and `height` values
-- **Responsive Layout** (`isResponsive: true`): Adapts to parent container size based on `responsiveType`
-
-#### Video Ad Requirements
-
-For video ads (`dataSlotType: 'video'`), ensure you have installed the required peer dependency:
-
-```bash
-npm install react-native-video@^4.5.2
-```
-
-Video ads automatically loop and are muted by default for better user experience.
-
-## 🏢 CDP Client API
-
-The SDK includes a Customer Data Platform (CDP) client for easy data management:
-
-```tsx
-import {
-  setUserDetails,
-  logEvent,
-  getConsentStatus,
-  updateConsentStatus,
-} from '@thealteroffice/react-native-adgeist';
-```
-
-### CDP Client Methods
-
-#### `setUserDetails(userDetails: UserDetails)`
-
-Sets user details for the current session.
-
-```tsx
-setUserDetails({
-  userId: '12345',
-  userName: 'John Doe',
-  email: 'user@example.com',
-  phone: '+1234567890',
-});
-```
-
-#### `logEvent(event: Event)`
-
-Logs an event with custom properties.
-
-```tsx
-logEvent({
-  eventType: 'purchase',
-  eventProperties: {
-    productId: '12345',
-    amount: 99.99,
-    currency: 'USD',
-  },
-});
-```
-
-#### `getConsentStatus(): Promise<'ACCEPTED' | 'DENIED'>`
-
-Returns the current consent status.
-
-```tsx
-const status = await getConsentStatus();
-```
-
-#### `updateConsentStatus(consent: boolean)`
-
-Updates the user's consent status.
-
-```tsx
-updateConsentStatus(true); // User granted consent
-updateConsentStatus(false); // User denied consent
-```
-
-## 🎨 Customization
-
-### Custom Event Tracking
-
-```tsx
-import { logEvent } from '@thealteroffice/react-native-adgeist';
-
-// Track user interactions
-const trackButtonClick = (buttonName: string) => {
-  logEvent({
-    eventType: 'button_click',
-    eventProperties: {
-      buttonName,
-      timestamp: Date.now(),
-      screen: 'home',
-    },
-  });
-};
-
-// Track page views
-const trackPageView = (pageName: string) => {
-  logEvent({
-    eventType: 'page_view',
-    eventProperties: {
-      pageName,
-      timestamp: Date.now(),
-    },
-  });
-};
-```
-
-## 🚀 Advanced Features
-
-### Debug Mode
-
-Enable debug mode to see detailed logs:
-
-```tsx
-<AdgeistProvider
-  publisherId="your-publisher-id"
-  apiKey="your-api-key"
-  domain="your-domain"
-  isTestEnvironment={true} // Enable for debug logs
->
-```
-
-## 🔧 Troubleshooting
-
-### Common Issues
-
-#### Build Errors
-
-- **iOS**: Run `cd ios && pod install` after installation
-- **Android**: Clean and rebuild: `cd android && ./gradlew clean`
-
-#### No Ads Showing
-
-- Verify your `publisherId` and `apiKey` are correct
-- Check if `isTestEnvironment` is set appropriately
-- Ensure your ad slot ID (`dataAdSlot`) is valid
-- Make sure `initializeSdk` is called before fetching ads
-
-#### Video Not Working
-
-- Make sure you installed `react-native-video` as described in the peer dependencies section
-- For iOS: Run `cd ios && pod install` after installing `react-native-video`
-
-#### SDK Not Initialized Error
-
-- Ensure `AdgeistProvider` is wrapping your app
-- Call `initializeSdk` before using native methods
-- Check that the custom domain is correctly configured
-
-### Debug Mode
-
-Enable debug logging to troubleshoot issues:
+Use the `HTML5AdView` component to display banner ads anywhere in your app. Place this component where you want the ads to appear and the SDK will automatically load and render the ad content.
 
 ```tsx
-<AdgeistProvider
-  publisherId="your-publisher-id"
-  apiKey="your-api-key"
-  domain="your-domain"
-  isTestEnvironment={true}
->
-```
-
-## 📱 Migration Guide
-
-### From v0.0.x to v0.1.x
-
-1. Install required peer dependency: `npm install react-native-video@^4.5.2`
-2. Update your `AdgeistProvider` configuration
-3. Replace direct native module calls with CDP client calls:
-
-   ```tsx
-   // Before
-   import Adgeist from '@thealteroffice/react-native-adgeist/src/NativeAdgeist';
-   await Adgeist.setUserDetails(userDetails);
-
-   // After
-   import { setUserDetails } from '@thealteroffice/react-native-adgeist/src/cdpclient';
-   setUserDetails(userDetails);
-   ```
-
-4. Run `cd ios && pod install` for iOS projects
-
-## 🤝 Contributing
-
-We welcome contributions! Please read our [Contributing Guide](CONTRIBUTING.md) for details on our code of conduct and the process for submitting pull requests.
-
-### Development Setup
-
-```bash
-git clone https://github.com/the-alter-office/react-native-adgeist.git
-cd react-native-adgeist
-yarn install
-```
+import { HTML5AdView } from '@thealteroffice/react-native-adgeist';
 
-### Running the Example
+<HTML5AdView
+  adUnitID="6932a4c022f6786424ce3b84"
+  adSize={{ width: 320, height: 480 }}
+  onAdLoaded={}
+  onAdFailedToLoad={}
+  onAdOpened={}
+  onAdClosed={}
+  onAdClicked={}
+  adType="display"
+/>;
 
-```bash
-yarn example ios
-# or
-yarn example android
 ```
-
-## 📄 License
-
-This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
-
-## 🆘 Support
-
-- **Documentation**: [GitHub Wiki](https://github.com/the-alter-office/react-native-adgeist/wiki)
-- **Issues**: [GitHub Issues](https://github.com/the-alter-office/react-native-adgeist/issues)
-- **Discussions**: [GitHub Discussions](https://github.com/the-alter-office/react-native-adgeist/discussions)
-
----
-
-Made with ❤️ by [The Alter Office](https://github.com/the-alter-office)

package/android/build.gradle

@@ -82,8 +82,11 @@ android {
           "src/newarch",
 
           // This is needed to build Kotlin project with NewArch enabled
-          "${project.buildDir}/generated/source/codegen/java",
-          "${project.buildDir}/generated/source/codegen/jni"
+          // "${project.buildDir}/generated/source/codegen/java",
+          // "${project.buildDir}/generated/source/codegen/jni"
+
+          "generated/java",
+          "generated/jni"
         ]
       }else{
         java.srcDirs += ["src/oldarch"]
@@ -101,7 +104,7 @@ def kotlin_version = getExtOrDefault("kotlinVersion")
 
 dependencies {
   implementation "com.facebook.react:react-android"
-  implementation "ai.adgeist:adgeistkit:1.0.2"
+  implementation "ai.adgeist:adgeistkit:1.1.10-qa"
   implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
 }