Merge pull request #5 from logicwind/dev

Added media tracking

Author: bhavesh-cappital

README.md

@@ -48,6 +48,7 @@ trackSearch,
 disableTracking,
 enableTracking, 
 startSession,
+trackMediaEvent
 } from '@logicwind/react-native-matomo-tracker';
 
 ```
@@ -193,19 +194,10 @@ setUserId("[email protected]")
 
 ### setVisitorId()
 
-By default matomo generate the unique visitor id but if you want custom vistor id then setVisitorId function allows you to manually set a custom visitor ID for tracking purposes within a React Native application . It will take `visitor-id`  parameter.
+By default matomo generate the unique visitor id but if you want custom vistor id then setVisitorId function allows you to manually set a custom visitor ID for tracking purposes within a React Native application . It will take `visitor-id`  parameter. It must be a 16 character long hex string
 
 #### Examples
 
-#### ios
-
-```js
-
-setVisitorId("123e4567-e89b-12d3-a456-426614174000")
-
-```
-#### Android
-
 ```js
 
 setVisitorId("2c534f55fba6cf6e")
@@ -260,12 +252,41 @@ setLogger()
 
 ```
 
+### trackMediaEvent()
+
+trackMediaEvent function use to monitor user interactions with media content, such as audio or video files. It allows you to track various events related to media playback, such as play, pause, stop, seek, and complete, providing insights into user engagement with your media assets.
+
+| Parameter      | Description                                               |
+|----------------|-----------------------------------------------------------|
+| mediaId        | (required) A unique id that is always the same while playing a media. As soon as the played media changes.                            |
+| mediaResource  | (required) The URL of the media resource.                            |
+| mediaType      | (required) video or audio depending on the type of the media. You can used MediaType.VIDEO or MediaType.AUDIO                         |
+| mediaTitle     | The name / title of the media.                           |
+| playerName     | The name of the media player, for example html5.                            |
+| mediaStatus    | The time in seconds for how long a user has been playing this media. This number should typically increase when you send a media tracking request. It should be 0 if the media was only visible/impressed but not played. Do not increase this number when a media is paused.                            |
+| mediaLength    | The duration (the length) of the media in seconds. For example if a video is 90 seconds long, the value should be 90.                           |
+| mediaProgress  | The progress / current position within the media. Defines basically at which position within the total length the user is currently playing.                            |
+| mediaTTP       | Defines after how many seconds the user has started playing this media. For example a user might have seen the poster of the video for 30 seconds before a user actually pressed the play button.                            |
+| mediaWidth     | The resolution width of the media in pixels. Only recommended being set for videos.                            |
+| mediaHeight    | The resolution height of the media in pixels. Only recommended being set for videos.                            |
+| mediaFullScreen| Should be 0 or 1 and defines whether the media is currently viewed in full screen. Only recommended being set for videos.                            |
+| mediaSE        | An optional comma separated list of which positions within a media a user has played. For example if the user has viewed position 5s, 10s, 15s and 35s, then you would need to send 5,10,15,35. We recommend to round to the next 5 seconds and not send a value for each second. Internally, Matomo may round to the next 15 or 30 seconds. For performance optimisation we recommend not sending the same position twice. Meaning if you have sent ma_se=10 there is no need to send later ma_se=10,20 but instead only ma_se=20.                             |
+
+
+
+#### Examples
+
+```js
+
+trackMediaEvent({siteId:"siteid",mediaId:"unique id",mediaTitle:"video media play track",playerName:"test 08",mediaType:MediaType.VIDEO,mediaResource:"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",mediaStatus:"100",mediaLength:"100",mediaFullScreen:"1",mediaHeight:"720",mediaWidth:"1080",mediaProgress:"100"});
+
+```
 
 
 ## Methods
 
 
-| Method                               | Require Paramter                                          | Android | ios | Android TV | Apple TV |
+| Method                               | Required Parameter                                          | Android | ios | Android TV | Apple TV |
 |--------------------------------------|-----------------------------------------------------------|:-------:|:---:|:----------:|:--------:|
 | [createTracker](#createtracker)      | uri: String, siteId: Number                               |    ✅   |  ✅  |    ✅      |   ✅     |
 | [startSession](#startsession)        | -                                                         |    ✅   |  ✅  |    ✅      |   ✅     |
@@ -282,6 +303,7 @@ setLogger()
 | [disableTracking](#disabletracking)  | -                                                         |    ✅   |  ✅  |    ✅      |   ✅     |
 | [enableTracking](#enabletracking)    | -                                                         |    ✅   |  ✅  |    ✅      |   ✅     |
 | [setLogger](#setlogger)              | -                                                         |    ✅   |  ✅  |    ✅      |   ✅     |
+| [trackMediaEvent](#trackmediaevent)  |  siteId: String, mediaId: String, mediaTitle: String, playerName: String, mediaType: String, mediaResource: String, mediaStatus: String,mediaLength?:String, mediaProgress?:String, mediaTTP?: String, mediaWidth?: String, mediaHeight?: String, mediaSE?: String, mediaFullScreen?:String                                            |    ✅   |  ✅  |    ✅      |   ✅     |
 
 
 <!-- ## Contributing

android/build.gradle

@@ -92,5 +92,6 @@ dependencies {
   implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
   implementation 'com.jakewharton.timber:timber:5.0.1'
   implementation 'com.github.matomo-org:matomo-sdk-android:4.2'
+  implementation 'com.squareup.okhttp3:okhttp:4.9.3'
 }
 

android/src/main/java/com/logicwind/reactnativematomotracker/ReactNativeMatomoTrackerModule.kt

@@ -1,22 +1,21 @@
 package com.logicwind.reactnativematomotracker
 
+import android.app.Application
+import android.content.ContentValues.TAG
+import android.util.Log
 import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.bridge.ReactContextBaseJavaModule
 import com.facebook.react.bridge.ReactMethod
-import com.facebook.react.bridge.Promise
-import com.facebook.react.bridge.ReadableArray
-import com.facebook.react.bridge.ReadableMap
-import com.facebook.react.bridge.ReadableMapKeySetIterator
-import timber.log.Timber
+import okhttp3.OkHttpClient
+import okhttp3.Request
 import org.matomo.sdk.Matomo
+import org.matomo.sdk.TrackMe
 import org.matomo.sdk.Tracker
 import org.matomo.sdk.TrackerBuilder
 import org.matomo.sdk.extra.TrackHelper
+import timber.log.Timber
 import java.net.URL
-import android.content.ContentValues.TAG
-import android.util.Log
-import android.app.Application
-import org.matomo.sdk.extra.DownloadTracker
+import java.net.URLEncoder
 
 
 class ReactNativeMatomoTrackerModule(reactContext: ReactApplicationContext) :
@@ -25,6 +24,7 @@ class ReactNativeMatomoTrackerModule(reactContext: ReactApplicationContext) :
   private val mMatomoTracker: Matomo? = Matomo.getInstance(reactContext)
 
   private var tracker: Tracker? = null
+  private val client = OkHttpClient()
 
   override fun getName(): String {
     return NAME
@@ -37,7 +37,7 @@ class ReactNativeMatomoTrackerModule(reactContext: ReactApplicationContext) :
 
         tracker = TrackerBuilder.createDefault(uri, siteId)
           .build(mMatomoTracker)
-          Log.e(TAG, "initialized successfully! ${tracker}")
+        Log.e(TAG, "initialized successfully! ${tracker}")
 
       } catch (e: Exception) {
         Log.e(TAG, "An error occurred: ${e.message}")
@@ -46,12 +46,6 @@ class ReactNativeMatomoTrackerModule(reactContext: ReactApplicationContext) :
     }
   }
 
-
-
-
-  // Example method
-  // See https://reactnative.dev/docs/native-modules-android
-
   @ReactMethod
   fun startSession() {
     tracker?.startNewSession()
@@ -181,8 +175,94 @@ class ReactNativeMatomoTrackerModule(reactContext: ReactApplicationContext) :
     }
   }
 
+  @ReactMethod
+  fun trackMedia(
+    siteId: String,
+    mediaId: String,
+    mediaTitle: String,
+    playerName: String,
+    mediaType: String,
+    mediaResource: String,
+    mediaStatus: String,
+    mediaLength:String,
+    mediaProgress:String,
+    mediaTTP: String,
+    mediaWidth: String,
+    mediaHeight: String,
+    mediaSE: String,
+    mediaFullScreen:String
+
+  ) {
+
+    if(mediaStatus=="0") {
+      TrackHelper.track().event(mediaType, "play").name(mediaTitle).with(tracker)
+      trackDispatch()
+    }
+    if(mediaStatus==mediaLength && mediaStatus==mediaProgress) {
+      TrackHelper.track().event(mediaType, "stop").name(mediaTitle).with(tracker)
+      trackDispatch()
+    }
+
+    val baseUrl = tracker?.apiUrl
+    var query = "idsite=${encode(siteId)}" +
+      "&rec=1" +
+      "&r=${generateRandomNumber()}" +
+      "&ma_id=${encode(mediaId)}" +
+      "&ma_ti=${encode(mediaTitle)}" +
+      "&ma_pn=${encode(playerName)}" +
+      "&ma_mt=${encode(mediaType)}" +
+      "&ma_re=${encode(mediaResource)}"+
+      "&ma_st=${encode(mediaStatus)}"+
+      "&_id=${encode(tracker?.visitorId.toString())}"
+
+    if(mediaLength.isNotEmpty()){
+      query=query+ "&ma_le=${encode(mediaLength)}";
+    }
+
+    if(mediaProgress.isNotEmpty()){
+      query=query+  "&ma_ps=${encode(mediaProgress)}";
+    }
 
+    if(mediaWidth.isNotEmpty()){
+      query=query+ "&ma_w=${encode(mediaWidth)}";
+    }
+
+    if(mediaHeight.isNotEmpty()){
+      query=query+  "&ma_h=${encode(mediaHeight)}";
+    }
+
+    if(mediaFullScreen.isNotEmpty()){
+      query=query+ "&ma_fs=${encode(mediaFullScreen)}";
+    }
+
+    if(mediaSE.isNotEmpty()){
+      query=query+  "&ma_se=${encode(mediaSE)}";
+    }
 
+    if(mediaTTP.isNotEmpty()){
+      query=query+ "&ma_ttp=${encode(mediaTTP)}";
+    }
+    try {
+      val urlString = "$baseUrl?$query"
+      val request = Request.Builder()
+        .url(urlString)
+        .build()
+
+      client.newCall(request).execute().use { response ->
+        val responseCode = response.code
+      }
+    }catch (e:Exception){
+      Log.e(TAG, "error : ${e.message}")
+    }
+  }
+
+  private fun generateRandomNumber(): Long {
+    return (Math.random() * Long.MAX_VALUE).toLong()
+  }
+
+  private fun encode(value: String): String {
+    return URLEncoder.encode(value, "UTF-8")
+  }
 
 
     companion object {

example/ios/Podfile.lock

@@ -7,7 +7,7 @@ PODS:
   - hermes-engine (0.74.1):
     - hermes-engine/Pre-built (= 0.74.1)
   - hermes-engine/Pre-built (0.74.1)
-  - logicwind-react-native-matomo-tracker (0.2.1):
+  - logicwind-react-native-matomo-tracker (0.3.0):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1376,7 +1376,7 @@ SPEC CHECKSUMS:
   fmt: 4c2741a687cc09f0634a2e2c72a838b99f1ff120
   glog: c5d68082e772fa1c511173d6b30a9de2c05a69a2
   hermes-engine: 16b8530de1b383cdada1476cf52d1b52f0692cbc
-  logicwind-react-native-matomo-tracker: cb7577a2f7dca6f646620a44c45f2aca91c3e65b
+  logicwind-react-native-matomo-tracker: a370c4497348c4d31730b3d09d474be3d813ef81
   MatomoTracker: 1f3772a41c27393067d0126071afe6ae1c7f739e
   RCT-Folly: 02617c592a293bd6d418e0a88ff4ee1f88329b47
   RCTDeprecation: efb313d8126259e9294dc4ee0002f44a6f676aba

example/src/App.tsx

@@ -7,10 +7,10 @@ import {
   Pressable,
   ScrollView,
   SafeAreaView,
-  Platform,
 } from 'react-native';
 
 import {
+  MediaType,
   createTracker,
   disableTracking,
   enableTracking,
@@ -23,6 +23,7 @@ import {
   trackEvent,
   trackImpression,
   trackInteraction,
+  trackMediaEvent,
   trackOutlink,
   trackScreen,
   trackSearch,
@@ -32,29 +33,30 @@ import {
 export default function App() {
   const [result] = React.useState<number | undefined>();
 
-
   React.useEffect(() => {
-    createTracker("your-matomo-url",1) //Replace 1 with your matomo site id
+    createTracker("https://your-matomo-url/matomo.php", 1) //Replace 1 with your matomo site id
+
   }, []);
 
   return (
     <SafeAreaView style={styles.main}>
       <ScrollView showsHorizontalScrollIndicator={false}>
         <View style={styles.container}>
           <Text>Matomo Tracking {result}</Text>
-           <Pressable
-                     style={styles.button}
-                      onPress={() => {
-                       startSession()
-                      }}
-                    >
-                      <Text style={styles.buttonText}>Start Session</Text>
-             </Pressable>
+
+          <Pressable
+            style={styles.button}
+            onPress={() => {
+              startSession()
+            }}
+          >
+            <Text style={styles.buttonText}>Start Session</Text>
+          </Pressable>
           <Pressable
             style={styles.button}
             onPress={() => {
               trackScreen('HomeScreen', 'This is test home screen');
-            
+
             }}
           >
             <Text style={styles.buttonText}>Track Screen</Text>
@@ -138,11 +140,7 @@ export default function App() {
           <Pressable
             style={styles.button}
             onPress={() => {
-              if (Platform.OS === 'ios') {
-                setVisitorId('123e4567-e89b-12d3-a456-426614174000');
-              } else {
-                setVisitorId('2c534f55fba6cf6e');
-              }
+              setVisitorId('0123456789abcdef');
             }}
           >
             <Text style={styles.buttonText}>Set Visistor Id</Text>
@@ -169,17 +167,26 @@ export default function App() {
           <Pressable
             style={styles.button}
             onPress={() => {
-             setLogger()
+              setLogger()
             }}
           >
             <Text style={styles.buttonText}>Set Logger</Text>
           </Pressable>
 
+          <Pressable
+            style={styles.button}
+            onPress={() => {
+              trackMediaEvent({ siteId: "siteId", mediaId: Date.now.toString(), mediaTitle: "video media play track", playerName: "test 08", mediaType: MediaType.VIDEO, mediaResource: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4", mediaStatus: "100", mediaLength: "100", mediaFullScreen: "1", mediaHeight: "720", mediaWidth: "1080", mediaProgress: "100" });
+            }}
+          >
+            <Text style={styles.buttonText}>Video Play Stop</Text>
+          </Pressable>
 
           <Pressable
             style={styles.button}
             onPress={() => {
-              trackDispatch();
+              trackDispatch()
+
             }}
           >
             <Text style={styles.buttonText}>Track Dispatch</Text>

ios/ReactNativeMatomoTracker.mm

@@ -39,6 +39,11 @@ @interface RCT_EXTERN_MODULE(ReactNativeMatomoTracker, NSObject)
 
 RCT_EXTERN_METHOD(enableTracking)
 
+RCT_EXTERN_METHOD(trackMedia:(NSString *)siteId withMediaId:(NSString *)mediaId withMediaTitle:(NSString *)mediaTitle withPlayerName:(NSString *)playerName withMediaType:(NSString *)mediaType withMediaResource:(NSString *)mediaResource withMediaStatus:(NSString *)mediaStatus withMediaLength:(NSString *)mediaLength withMediaProgress:(NSString *)mediaProgress withMediaTTP:(NSString *)mediaTTP withMediaWidth:(NSString *)mediaWidth withMediaHeight:(NSString *)mediaHeight withMediaSE:(NSString *)mediaSE withMediaFullScreen:(NSString *)mediaFullScreen)
+
+
+
+