Added trackCustomDimension method for track custom dimension

Author: kaushik-patel-us

README.md

@@ -349,6 +349,22 @@ trackCampaign("Home screen","https://example.com/?mtm_campaign=2020_august_promo
 
 ```
 
+### trackCustomDimension()
+
+With Custom Dimensions you can assign any custom data to your visitors or actions (like pages, events, site search, ...) and then visualize the reports of how many visits, conversions, pageviews, etc. there were for each Custom Dimension.
+
+Dimension contains a key and a value, and where the key is a custom dimension id 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
+
+trackCustomDimension({ 
+  dimensions:[{key:"1",value: "cf7fad2e-fae4-4c49-9924-ad9a2a7c50de"},{key:"2",value: "cf7fad2e-fae4-4c49-9924-ad9a2a7c50de"}]
+});
+
+```
+
 ## Methods
 
 
@@ -371,6 +387,7 @@ trackCampaign("Home screen","https://example.com/?mtm_campaign=2020_august_promo
 | [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, dimensions : [object]                                            |    ✅   |  ✅  |    ✅      |   ✅     |
 | [trackCampaign](#trackcampaign)      | title: String, campaignUrl: String                        |    ✅   |  ✅  |    ✅      |   ✅     |
+| [trackCustomDimension](#trackcustomdimension)      | dimensions:[{key:string,value:string}]                        |    ✅   |  ✅  |    ✅      |   ✅     |
 
 
 <!-- ## Contributing

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

@@ -245,7 +245,28 @@ class ReactNativeMatomoTrackerModule(reactContext: ReactApplicationContext) :
     }
   }
 
-
+  @ReactMethod
+  fun trackCustomDimension(
+    dimensions: ReadableArray
+  ) {
+    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) {
+
+          val id = key.toIntOrNull()
+          if (id != null) {
+            TrackHelper.track().screen("/customDimension").dimension(id,value).with(tracker)
+            trackDispatch();
+          } else {
+            println("Key could not be converted to an Int")
+          }
+        }
+      }
+    }
+  }
   @ReactMethod
   fun trackMedia(
     siteId: String,

example/src/App.tsx

@@ -19,6 +19,7 @@ import {
   setVisitorId,
   startSession,
   trackCampaign,
+  trackCustomDimension,
   trackDispatch,
   trackDownload,
   trackEvent,
@@ -186,13 +187,24 @@ export default function App() {
             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",
-              dimensions:[{key:"dimension1",value: "cf7fad2e-fae4-4c49-9924-ad9a2a7c50de"}]
+              dimensions:[{key:"1",value: "cf7fad2e-fae4-4c49-9924-ad9a2a7c50de"}]
             });
             }}
           >
             <Text style={styles.buttonText}>Video Play Stop</Text>
           </Pressable>
 
+          <Pressable
+            style={styles.button}
+            onPress={() => {
+              trackCustomDimension({ 
+              dimensions:[{key:"1",value: "cf7fad2e-fae4-4c49-9924-ad9a2a7c50de"},{key:"2",value: "cf7fad2e-fae4-4c49-9924-ad9a2a7c50de"}]
+            });
+            }}
+          >
+            <Text style={styles.buttonText}>Track Custom Dimension</Text>
+          </Pressable>
+
           <Pressable
             style={styles.button}
             onPress={() => {

ios/ReactNativeMatomoTracker.mm

@@ -43,7 +43,7 @@ @interface RCT_EXTERN_MODULE(ReactNativeMatomoTracker, NSObject)
 
 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)
 
-
+RCT_EXTERN_METHOD(trackCustomDimension:(NSArray<NSDictionary *> *)dimensions)
 
 + (BOOL)requiresMainQueueSetup
 {

ios/ReactNativeMatomoTracker.swift

@@ -157,6 +157,25 @@ class ReactNativeMatomoTracker: NSObject {
     }
 
 
+    @objc(trackCustomDimension:)
+    func trackCustomDimension(
+        dimensions:[NSDictionary]
+    ) {
+        if(!dimensions.isEmpty){
+            matomoTracker?.track(view: ["customDimension"])
+          for dimension in dimensions {
+            if let key = dimension["key"] as? String, let value = dimension["value"] as? String {
+                if let id = Int(key) {
+                    matomoTracker?.setDimension(value, forIndex: id)
+                    matomoTracker?.dispatch()
+                } else {
+                    print("Key could not be converted to an Int")
+                }
+            }
+          }
+        }
+    }
+    
     @objc(trackMedia:withMediaId:withMediaTitle:withPlayerName:withMediaType:withMediaResource:withMediaStatus:withMediaLength:withMediaProgress:withMediaTTP:withMediaWidth:withMediaHeight:withMediaSE:withMediaFullScreen:withDimensions:)
     func trackMediaEvent(
         siteId: String,

src/index.tsx

@@ -104,6 +104,14 @@ export function trackMediaEvent(
   return ReactNativeMatomoTracker.trackMedia(siteId,mediaId,mediaTitle,playerName,mediaType,mediaResource,mediaStatus,mediaLength,mediaProgress,mediaTTP,mediaWidth,mediaHeight,mediaSE,mediaFullScreen,dimensions);
 }
 
+export function trackCustomDimension(
+  {dimensions=[]}:{  
+    dimensions?: Array<Object>
+  }): Promise<number> {
+    return ReactNativeMatomoTracker.trackCustomDimension(dimensions);
+  }
+
+
 export const MediaType = { VIDEO: 'video',AUDIO:"audio"};