Added custom dimension property in media tracking

kaushik-patel-us · kaushik-patel-us · commit 139158b7f915 · 2024-08-28T11:41:32.000+05:30
diff --git a/README.md b/README.md
@@ -286,14 +286,14 @@ trackMediaEvent function use to monitor user interactions with media content, su
 | 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.                             |
-
+| dimensions| Dimension contains a key and a value, and where the key is a custom dimension key created on the Matomo dashboard and the value should be a string, you'll need to ensure that the dimensions array is processed correctly. [create custom dimension](https://matomo.org/faq/reporting-tools/create-track-and-manage-custom-dimensions/)    
 
 
 #### 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"});
+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", dimensions:[{key:"dimension1",value:JSON.stringify({"email": "test.user@logicwind.com","instanceType": "VIDEO","videoId": "cf7fad2e-fae4-4c49-9924-ad9a2a7c50de",})}]});
 
 ```
 
@@ -369,7 +369,7 @@ trackCampaign("Home screen","https://example.com/?mtm_campaign=2020_august_promo
 | [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                                            |    ✅   |  ✅  |    ✅      |   ✅     |
+| [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, dimensions : [object]                                            |    ✅   |  ✅  |    ✅      |   ✅     |
 | [trackCampaign](#trackcampaign)      | title: String, campaignUrl: String                        |    ✅   |  ✅  |    ✅      |   ✅     |
 
 
diff --git a/android/src/main/java/com/logicwind/reactnativematomotracker/ReactNativeMatomoTrackerModule.kt b/android/src/main/java/com/logicwind/reactnativematomotracker/ReactNativeMatomoTrackerModule.kt
@@ -10,10 +10,12 @@ 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.ReadableArray
 import okhttp3.MediaType.Companion.toMediaType
 import okhttp3.OkHttpClient
 import okhttp3.Request
 import okhttp3.RequestBody.Companion.toRequestBody
+import org.json.JSONObject
 import org.matomo.sdk.Matomo
 import org.matomo.sdk.Tracker
 import org.matomo.sdk.TrackerBuilder
@@ -259,8 +261,8 @@ class ReactNativeMatomoTrackerModule(reactContext: ReactApplicationContext) :
     mediaWidth: String,
     mediaHeight: String,
     mediaSE: String,
-    mediaFullScreen:String
-
+    mediaFullScreen:String,
+    dimensions: ReadableArray
   ) {
 
     if(siteId.isNotEmpty() && tracker!=null){
@@ -272,6 +274,17 @@ class ReactNativeMatomoTrackerModule(reactContext: ReactApplicationContext) :
         TrackHelper.track().event(mediaType, "stop").name(mediaTitle).with(tracker)
         trackDispatch()
       }
+
+      fun convertJsonString(jsonString: String): JSONObject? {
+        return try {
+          JSONObject(jsonString)
+        } catch (e: Exception) {
+          e.printStackTrace()
+          null
+        }
+      }
+
+
       val baseUrl = tracker?.apiUrl
       val userAgent = getUserAgent(context)
       var query = "idsite=${encode(siteId)}" +
@@ -285,6 +298,26 @@ class ReactNativeMatomoTrackerModule(reactContext: ReactApplicationContext) :
         "&ma_st=${encode(mediaStatus)}"+
         "&_id=${encode(tracker?.visitorId.toString())}"
 
+      if (dimensions.size() > 0) {
+        for (i in 0 until dimensions.size()) {
+          val dimension = dimensions.getMap(i)
+          val key = dimension?.getString("key")
+          val value = dimension?.getString("value")
+
+          if (key != null && value != null) {
+            try {
+              val jsonObject = JSONObject(value)
+              val jsonValueString = jsonObject.toString()
+              TrackHelper.track().screen("/media").dimension(i+1,value).with(tracker)
+              trackDispatch()
+            } catch (e: Exception) {
+              TrackHelper.track().screen("/media").dimension(i+1,value).with(tracker)
+              trackDispatch()
+            }
+          }
+        }
+      }
+
       if(mediaLength.isNotEmpty()){
         query=query+ "&ma_le=${encode(mediaLength)}";
       }
@@ -330,6 +363,7 @@ class ReactNativeMatomoTrackerModule(reactContext: ReactApplicationContext) :
 
         client.newCall(request).execute().use { response ->
           val responseCode = response.code
+          println("responseCode : $responseCode")
         }
       }catch (e:Exception){
         Log.e(TAG, "error : ${e.message}")
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -185,7 +185,11 @@ export default function App() {
           <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" });
+              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",
+            dimensions:[{key:"dimension1",value:JSON.stringify({"email": "test.user@logicwind.com",
+            "instanceType": "VIDEO",
+            "videoId": "cf7fad2e-fae4-4c49-9924-ad9a2a7c50de",})}]
+            });
             }}
           >
             <Text style={styles.buttonText}>Video Play Stop</Text>
diff --git a/ios/ReactNativeMatomoTracker.mm b/ios/ReactNativeMatomoTracker.mm
@@ -41,7 +41,7 @@ @interface RCT_EXTERN_MODULE(ReactNativeMatomoTracker, NSObject)
 
 RCT_EXTERN_METHOD(trackCampaign:(NSString *)title withCampaignUrl:(NSString *)campaignUrl)
 
-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)
+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  withDimensions:(NSArray<NSDictionary *> *)dimensions)
 
 
 
diff --git a/ios/ReactNativeMatomoTracker.swift b/ios/ReactNativeMatomoTracker.swift
@@ -155,8 +155,9 @@ class ReactNativeMatomoTracker: NSObject {
         }
     
     }
+  
     
-    @objc(trackMedia:withMediaId:withMediaTitle:withPlayerName:withMediaType:withMediaResource:withMediaStatus:withMediaLength:withMediaProgress:withMediaTTP:withMediaWidth:withMediaHeight:withMediaSE:withMediaFullScreen:)
+    @objc(trackMedia:withMediaId:withMediaTitle:withPlayerName:withMediaType:withMediaResource:withMediaStatus:withMediaLength:withMediaProgress:withMediaTTP:withMediaWidth:withMediaHeight:withMediaSE:withMediaFullScreen:withDimensions:)
     func trackMediaEvent(
         siteId: String,
         mediaId: String,
@@ -171,7 +172,8 @@ class ReactNativeMatomoTracker: NSObject {
         mediaWidth: String,
         mediaHeight: String,
         mediaSE: String,
-        mediaFullScreen:String
+        mediaFullScreen:String,
+        dimensions:[NSDictionary]
     ) {
         if(!siteId.isEmpty && matomoTracker != nil)
         {
@@ -196,7 +198,7 @@ class ReactNativeMatomoTracker: NSObject {
                 uid = ""
             }
             
-            
+           
             let baseUrl = baseURL
             var query = "idsite=\(encodeParameter(value: siteId))" +
                         "&rec=1" +
@@ -210,8 +212,31 @@ class ReactNativeMatomoTracker: NSObject {
                         "&cid=\(encodeParameter(value: _id))" +
                         "&uid=\(encodeParameter(value: uid))"
             
+            if(!dimensions.isEmpty){
             
+              for dimension in dimensions {
+                if let key = dimension["key"] as? String, let value = dimension["value"] as? String {
+                    // Attempt to parse the JSON value
+                    if let data = value.data(using: .utf8),
+                       let jsonObject = try? JSONSerialization.jsonObject(with: data, options: []) as? [String: Any] {
+                        // Convert jsonObject to a string or handle as needed
+                        let jsonValueString = jsonObject.map { "\($0.key)=\($0.value)" }.joined(separator: ",")
+                        query += "&\(key)=\(encodeParameter(value: jsonValueString))"
+                    } else {
+                        query += "&\(key)=\(encodeParameter(value: value))"
+                    }
+                }
+              }
+                
+            }
             
+//            if(!customVariable.isEmpty){
+//             
+//                let encodedCustomVariable = encodeParameter(value: customVariable)
+//                print("customVariable \(encodedCustomVariable)")
+//                query=query+"&_cvar=\(encodedCustomVariable)";
+//            }
+//            
             if(!mediaLength.isEmpty){
                 query=query+"&ma_le=\(encodeParameter(value: mediaLength))";
             }
diff --git a/src/index.tsx b/src/index.tsx
@@ -83,7 +83,7 @@ export function trackCampaign(title:String,campaignUrl:String) {
 }
 
 export function trackMediaEvent(
-{siteId,mediaId,mediaTitle,playerName,mediaType,mediaResource,mediaStatus,mediaLength="",mediaProgress="",mediaTTP="",mediaWidth="",mediaHeight="",mediaSE="",mediaFullScreen=""}:{  
+{siteId,mediaId,mediaTitle,playerName,mediaType,mediaResource,mediaStatus,mediaLength="",mediaProgress="",mediaTTP="",mediaWidth="",mediaHeight="",mediaSE="",mediaFullScreen="",dimensions=[]}:{  
   siteId: String,
   mediaId: String,
   mediaTitle: String,
@@ -97,8 +97,11 @@ export function trackMediaEvent(
   mediaWidth?: String,
   mediaHeight?: String,
   mediaSE?: String,
-  mediaFullScreen?:String}): Promise<number> {
-  return ReactNativeMatomoTracker.trackMedia(siteId,mediaId,mediaTitle,playerName,mediaType,mediaResource,mediaStatus,mediaLength,mediaProgress,mediaTTP,mediaWidth,mediaHeight,mediaSE,mediaFullScreen);
+  mediaFullScreen?:String,
+  customVariable?:String,
+  dimensions?: Array<Object>
+}): Promise<number> {
+  return ReactNativeMatomoTracker.trackMedia(siteId,mediaId,mediaTitle,playerName,mediaType,mediaResource,mediaStatus,mediaLength,mediaProgress,mediaTTP,mediaWidth,mediaHeight,mediaSE,mediaFullScreen,dimensions);
 }
 
 export const MediaType = { VIDEO: 'video',AUDIO:"audio"};

Original file line number	Diff line number	Diff line change
`@@ -41,7 +41,7 @@ @interface RCT_EXTERN_MODULE(ReactNativeMatomoTracker, NSObject)`
`41`	`41`
`42`	`42`	`RCT_EXTERN_METHOD(trackCampaign:(NSString )title withCampaignUrl:(NSString )campaignUrl)`
`43`	`43`
`44`		-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)
	`44`	+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 withDimensions:(NSArray<NSDictionary > )dimensions)
`45`	`45`
`46`	`46`
`47`	`47`