Visual Studio App Center

Send your event data from RudderStack to Visual Studio App Center.

7 minute read

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.

Connection compatibility

Destination info
Status: Generally Available Supported sources: Android, iOS , React Native , Cordova, Flutter Refer to it as APPCENTER in the Integrations object.

Destination info

Status: Generally Available
Supported sources: Android, iOS , React Native , Cordova, Flutter
Refer to it as APPCENTER in the Integrations object.

Connection modes
Source	Cloud mode	Device mode	Hybrid mode
AMP
Android
Cordova
Flutter
iOS
React Native
Shopify
Unity
Web

Supported message types
Source	Identify	Page	Track	Screen	Group	Alias
Cloud mode
Supported sources
Device mode
Android
Cordova
Flutter
iOS
React Native

Get started

Once you have confirmed that the platform supports sending events to App Center, perform the steps below:

From your RudderStack dashboard, add the source and select App Center from the list of destinations.
Name your destination, and click Next. You should be able to see the following screen:

Connection settings for App Center destination

Enter the relevant details and click 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.

Adding device mode integration

Once you add App Center as a destination in the RudderStack dashboard, follow these steps to add it to your mobile project depending on your integration platform:

Your Android project must be on version 5.0 (API level 21) or higher for RudderStack to be able to send events to App Center.

Once confirmed, follow these steps to add App Center to your Android project:

Add the following dependencies to your app/build.gradle file as shown:

implementation 'com.rudderstack.android.sdk:core:1.7+'
implementation 'com.rudderstack.android.integration:appcenter:1.+'
implementation 'com.google.code.gson:gson:2.8.6'

Also add the App Center analytics depedencies to your app/build.gradle as shown below:

def appCenterSdkVersion = '4.1.0'
implementation "com.microsoft.appcenter:appcenter-analytics:${appCenterSdkVersion}"

Make sure that the minSdkVersion in your app/build.gradle is atleast 21.

defaultConfig {
  minSdkVersion 21
}

Finally, change the initialization of your RudderClient in your Application class:

// initializing Rudder SDK
val rudderClient =
    RudderClient.getInstance(
        this,
        WRITE_KEY,
        RudderConfig.Builder()
            .withDataPlaneUrl(DATA_PLANE_URL)
            .withFactory(AppcenterIntegrationFactory.FACTORY)
            .build()
    )

Follow these steps to add App Center to your iOS project:

Go to your Podfile and add the Rudder-AppCenter extension

pod 'Rudder-AppCenter'

After adding the dependency followed by pod install , you can add the imports to your AppDelegate.m file:

#import <rudderappcenterfactory.h>

Finally, change the initialization of your RudderClient as shown:

RSConfigBuilder *builder = [[RSConfigBuilder alloc] init];
[builder withDataPlaneUrl:<your_data_plane_url>];
[builder withFactory:[RudderAppCenterFactory instance]];
[RSClient getInstance:<your_write_key> config:[builder build]];

To use App Center, your iOS project must be set up in Xcode 11 or later on macOS version 10.14.4 or later. Also, you must be targeting devices running on iOS 9.0 or later.

This device mode integration is supported for App Center v4.4.1 and above.

Follow these steps to add App Center to your iOS project:

Install RudderAppCenter (available through CocoaPods) by adding the following line to your Podfile:

pod 'RudderAppCenter', '~> 1.0.0'

Run the pod install command.
Next, import the SDK depending on your preferred platform:

@import RudderAppCenter;

import RudderAppCenter

Next, add the imports to your AppDelegate file under didFinishLaunchingWithOptions method:

RSConfig *config = [[RSConfig alloc] initWithWriteKey:WRITE_KEY];
[config dataPlaneURL:DATA_PLANE_URL];

[[RSClient sharedInstance] configureWith:config];
[[RSClient sharedInstance] addDestination:[[RudderAppCenterDestination alloc] init]];

let config: RSConfig = RSConfig(writeKey: WRITE_KEY)
            .dataPlaneURL(DATA_PLANE_URL)

RSClient.sharedInstance().configure(with: config)
RSClient.sharedInstance().addDestination(RudderAppCenterDestination())

To add AppCenter to your React Native project, follow these steps:

Add the RudderStack-App Center module to your app as shown:

npm install @rudderstack/rudder-integration-appcenter-react-native
## OR ##
yarn add @rudderstack/rudder-integration-appcenter-react-native

Make sure the minSdkVersion of your build.gradle in the root of android directory is atleast 21

2. Run `pod install` inside the `ios` directory of your project adding `@rudderstack/rudder-integration-appcenter-react-native` to your project. 3. Finally, import the module you added above and add it to your SDK initialization code:

import rudderClient from "@rudderstack/rudder-sdk-react-native"
import appcenter from "@rudderstack/rudder-integration-appcenter-react-native"

const config = {
  dataPlaneUrl: DATA_PLANE_URL,
  trackAppLifecycleEvents: true,
  withFactories: [appcenter],
}
rudderClient.setup(WRITE_KEY, config)

Follow the below steps to add App Center to your Flutter Project:

Add the following dependency to the dependencies section of your pubspec.yaml file.

rudder_integration_appcenter_flutter: ^1.1.1

Run the below command to install the dependency added in the above step:

flutter pub get

Import the RudderIntegrationAppcenterFlutter in your application where you are initializing the SDK.

import 'package:rudder_integration_appcenter_flutter/rudder_integration_appcenter_flutter.dart';

Finally, change the initialization of your RudderClient as shown:

final RudderController rudderClient = RudderController.instance;
RudderConfigBuilder builder = RudderConfigBuilder();
builder.withFactory(RudderIntegrationAppcenterFlutter());
rudderClient.initialize(<write_key>, config: builder.build(), options: null);

For Android platform, make sure that the android.defaultConfig.minSdkVersion is set to atleast 21 by checking it in the android/app/build.gradle file.

For iOS platform, you can link App Center as a framework instead of a library with your application by linking it statically as shown below:
use_frameworks! :linkage=> :static

To add App Center to your Cordova project, follow these steps:

Navigate to the root folder of your application and run the following command::

cordova plugin add rudder-integration-appcenter-cordova

Add the platforms that you want to target for your app:

cordova platform add ios
cordova platform add android

Run the following command to build the project for all platforms:

cordova build

Add the following code in the onDeviceReady() function of your home page to initialize the SDK:

RudderClient.initialize(WRITE_KEY , {
  dataPlaneUrl: DATA_PLANE_URL,
  factories: [RudderAppCenterFactory]
})

Make sure to use the await keyword with the initialize call.

Track

A track call lets you track custom events as they occur in your web application.

A sample track call looks like the following:

[[RSClient sharedInstance] track:@"Product Clicked" properties:@{
    @"product_id" : @"pr01",
    @"name" : @"Cadbury"
}];

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:

{
  "colours": [
    "red",
    "black"
  ],
  "city": "New Orleans",
  "state": "Louisiana"
}

then RudderStack will send the data to App Center as:

{
  "city": "New Orleans",
  "state": "Louisiana"
}

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:

[[RSClient sharedInstance] screen:@"Home" properties:@{
    @"category" : @"launcher"
}];

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.

Opting in/out of sending user data to App Center

Any users visting your app can express their consent over sending data to App Center. Based on this consent you can either opt in or out of sending that user’s data to App Center.

Refer to the section below for more details on how to use this feature.

Firstly import Appcenter’s Analytics Module as shown below: groovy import com.microsoft.appcenter.analytics.Analytics;

Then add the below script just after the initialization of the Android SDK:

rudderClient.onIntegrationReady("App Center") {
    // have your own logic to get the user consent
    if (userConsent) {
        // enabling appcenter's analytics module
        Analytics.setEnabled(true)
    } else {
        // disabling appcenter's analytics module
        Analytics.setEnabled(false)
    }
}

Firstly import the Appcenter’s Analytics Module as shown below:

@import AppCenterAnalytics;

Then add the below script just after the initialization of the iOS SDK:

if(userConsent)
{
    // enabling appcenter's analytics module
    [MSACAnalytics setEnabled:true];
}
else
{
    // disabling appcenter's analytics module
    [MSACAnalytics setEnabled:false];
}

Firstly import the AppCenterIntegrationFactory as shown below:

import {
  enableAnalytics,
  disableAnalytics,
} from '@rudderstack/rudder-integration-appcenter-react-native';

Then add the below script just after the initalization of the React Native SDK:

To enable App Center Analytics:

await rudderClient.registerCallback("App Center", () => {
  enableAnalytics();
});

To disable App Center Analytics:

await rudderClient.registerCallback("App Center", () => {
  disableAnalytics();
});

FAQ

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).

Was this page helpful?

Glad to hear it! Please tell us how we can improve.

Sorry to hear that. Please tell us how we can improve.

Questions? Contact us by email or on Slack