Visual Studio App Center
Step-by-step guide to send your event data from RudderStack to Visual Studio App Center
App Center is Microsoft's cross-platform build automation and management platform that lets you seamlessly manage your app's lifecycle. With App Center, you can easily manage and automate your builds, effectively test your apps in the cloud, and monitor their real-time usage with the help of crash data and analytics.
RudderStack lets you send your event data to App Center via its native web SDKs.

Getting Started

Before configuring your source and destination on the RudderStack, please check whether the platform you are sending the events from is supported by App Center. Please refer the following table to do so:
Connection Mode
Web
Mobile
Server
Device mode
-
Supported
-
Cloud mode
-
-
-
To know more about the difference between Cloud mode and Device mode in RudderStack, read the RudderStack connection modes guide.
Once you have confirmed that the platform supports sending events to App Center, perform the steps below:
Please follow our guide on How to Add a Source and Destination in RudderStack to add a source and destination in RudderStack.
    Name your destination, and click on Next. You should be able to see the following screen:
Connection settings for App Center destination
    Enter the relevant details and click on Next to complete the setup. The API Secret Key can be found as App Secret on the Getting Started page or Settings page on the App Center portal.
Android
iOS
React Native
Flutter
Follow these steps to add App Center to your Android project:
    Add the following dependencies to your app/build.gradle file as shown:
1
implementation 'com.rudderstack.android.sdk:core:1.+'
2
implementation 'com.rudderstack.android.integration:appcenter:1.0.0'
3
implementation 'com.google.code.gson:gson:2.8.6'
Copied!
    Also add the App Center analytics depedencies to your app/build.gradle as shown below:
1
def appCenterSdkVersion = '4.1.0'
2
implementation "com.microsoft.appcenter:appcenter-analytics:${appCenterSdkVersion}"
Copied!
    Make sure that the minSdkVersion in your app/build.gradle is atleast 21.
1
defaultConfig {
2
minSdkVersion 21
3
}
Copied!
    Finally, change the initialization of your RudderClient in your Application class, as shown:
1
val rudderClient = RudderClient.getInstance(
2
this,
3
<YOUR_WRITE_KEY>,
4
RudderConfig.Builder()
5
.withDataPlaneUrl(<YOUR_DATA_PLANE_URL>)
6
.withFactory(AppcenterIntegrationFactory.FACTORY)
7
.build()
8
)
Copied!
Follow these steps to add App Center to your iOS project:
    Go your Podfile and add the Rudder-AppCenter extension
1
pod 'Rudder-AppCenter'
Copied!
    After adding the dependency followed by pod install , you can add the imports to your AppDelegate.m file, as shown:
1
#import <RudderAppCenterFactory.h>
Copied!
    Finally, change the initialization of your RudderClient as shown:
1
RSConfigBuilder *builder = [[RSConfigBuilder alloc] init];
2
[builder withDataPlaneUrl:<YOUR_DATA_PLANE_URL>];
3
[builder withFactory:[RudderAppCenterFactory instance]];
4
[RSClient getInstance:<YOUR_WRITE_KEY> config:[builder build]];
Copied!
The following requirements must be met to use App Center: Your iOS project is set up in Xcode 11 or later on macOS version 10.14.4 or later. You're targeting devices running on iOS 9.0 or later.
To add AppCenter to your React Native project:
Add the RudderStack-App Center module to your app using :
1
npm install @rudderstack/rudder-integration-appcenter-react-native
2
## OR ##
3
yarn add @rudderstack/rudder-integration-appcenter-react-native
Copied!
Make sure the minSdkVersion of your build.gradle in the root of android directory is atleast 21
Run pod install inside the ios directory of your project adding @rudderstack/rudder-integration-appcenter-react-native to your project.
Import the module you added above and add it to your SDK initialization code as shown below:
1
import rudderClient from '@rudderstack/rudder-sdk-react-native';
2
import appcenter from "@rudderstack/rudder-integration-appcenter-react-native";
3
4
const config = {
5
dataPlaneUrl: DATA_PLANE_URL,
6
trackAppLifecycleEvents: true,
7
withFactories: [appcenter]
8
};
9
rudderClient.setup(WRITE_KEY, config);
Copied!
To add AppCenter to your Flutter project, add the RudderStack-App Center module to your app by following these steps:
    Open pubspec.yaml and add rudder_integration_appcenter_flutter under dependencies section:
1
dependencies:
2
rudder_integration_appcenter_flutter: ^1.0.0
Copied!
    Navigate to your application's root folder and install all the required dependencies as shown:
1
flutter pub get
Copied!
    Import the module you added above and add it to your SDK initialization code as shown:
1
import 'package:rudder_sdk_flutter/RudderClient.dart';
2
import 'package:rudder_sdk_flutter/RudderConfig.dart';
3
import 'package:rudder_integration_appcenter_flutter/Appcenter.dart';
4
5
RudderConfigBuilder builder = RudderConfigBuilder();
6
builder.withDataPlaneUrl(DATA_PLANE_URL);
7
builder.withTrackLifecycleEvents(true);
8
builder.withFactory(Appcenter());
9
RudderClient.getInstance(WRITE_KEY,
10
config: builder.build());
Copied!
Make sure the minSdkVersion of your build.gradle in the root of android directory is atleast 21.

Track

A track call lets you track custom events as they occur in your web application. For more information on the track call, please refer to the RudderStack API Specification documentation.
A sample track call looks like the following:
1
[[RSClient sharedInstance] track:@"Product Clicked" properties:@{
2
@"product_id" : @"pr01",
3
@"name" : @"Cadbury"
4
}];
Copied!
The above track call is directly passed on to App Center via its trackEvent api in both the RudderStack Android & iOS SDKs.
The eventProperties object should only contain the values of type String and Number- the other property types will be simply ignored, if sent.
For example, if eventProperties is set as:
1
{
2
"colours": [
3
"red",
4
"black"
5
],
6
"city": "varkala",
7
"state": "kerala"
8
}
Copied!
then it will be sent to App Center as:
1
{
2
"city": "varkala",
3
"state": "kerala"
4
}
Copied!

Screen

The screen method allows you to record whenever a user sees the mobile screen, along with any associated optional properties. This call is similar to the page call, but is exclusive to your mobile device.
A sample screen call using the RudderStack Android SDK looks like the following code snippet:
1
[[RSClient sharedInstance] screen:@"Home" properties:@{
2
@"category" : @"launcher"
3
}];
Copied!
In the above snippet, RudderStack captures the information related to the screen being viewed, such as screen's name and category.
The above screen call is directly passed on to App Center as a track event via its trackEvent API, with event name as Viewed {screen name} screen along with the its properties. The above example will be sent as a track event with name Viewed MainActivity screen along with its properties.

Opt-in & Opt-out

Any users visting your app can express his consent over sending data to App Center and based on his consent you can either Opt in or Opt out that user's data from sending to App Center.
Please refer to the below section for more details on how to use this feature
Android
iOS
React Native
Firstly import Appcenter's Analytics Module as shown below: ``groovy import com.microsoft.appcenter.analytics.Analytics;
1
Then add the below script just after the initialization of the Android SDK:
2
```kotlin
3
rudderClient.onIntegrationReady("App Center") {
4
// have your own logic to get the user consent
5
if (userConsent) {
6
// enabling appcenter's analytics module
7
Analytics.setEnabled(true);
8
} else {
9
// disabling appcenter's analytics module
10
Analytics.setEnabled(false);
11
}
12
}
Copied!
Firstly import the Appcenter's Analytics Module as shown below:
1
@import AppCenterAnalytics;
Copied!
Then add the below script just after the initialization of the iOS SDK:
1
if(userConsent)
2
{
3
// enabling appcenter's analytics module
4
[MSACAnalytics setEnabled:true];
5
}
6
else
7
{
8
// disabling appcenter's analytics module
9
[MSACAnalytics setEnabled:false];
10
}
Copied!
Firstly import the AppCenterIntegrationFactory as shown below:
1
import AppcenterIntegrationFactory from '@rudderstack/rudder-integration-appcenter-react-native/src/bridge';
Copied!
Then add the below script just after the initalization of the React Native SDK:
1
await rudderClient.registerCallback('App Center', () => {
2
if (userconsent) {
3
// enabling appcenter's analytics module
4
AppcenterIntegrationFactory.enableAnalytics()
5
} else {
6
// disabling appcenter's analytics module
7
AppcenterIntegrationFactory.disableAnalytics()
8
}
9
})
Copied!

FAQs

How do I get the App Center API secret?

The API Secret Key can be found as App Secret on the Getting Started page or Settings page on your App Center portal.

What is transmission interval?

The App Center SDK uploads logs in a batch of 50. If the SDK doesn't have 50 logs to send, it will still send logs after 3 seconds (set by default). There can be a maximum of 3 batches sent in parallel. In this case, this interval of 3 seconds is the transmission interval. Note that the value of this transmission interval must always be between 3 seconds and 86400 seconds (one day).

Contact Us

If you come across any issues while configuring App Center with RudderStack, please feel free to contact us. You can also start a conversation on our Slack channel; we will be happy to talk to you!
Last modified 4mo ago