Capacitor instructions

[rashad]

Hello there,

I'm trying to integrate Adjust SDK into my Capacitor (React) app. I can't find proper documentation on how to do this. Sure Cordova plugin is compatible but I've never used Cordova, only Capacitor. Any chance you guys have some doc around to help me with this please ?

Cheers

[uerceg]

Hi @rashad

We did add example Capacitor Ionic app, but I guess that doesn't really help in this case?

Here's how we tested out Cordova SDK with the Capacitor app (instructions are for verifying iOS app, should work for Android as well):

Step 1: Followed this guide (https://capacitorjs.com/docs/getting-started/with-ionic) to make the app. Step 2: (added ios and android platforms) Step 3: ionic build && npx cap open ios (&& run from Xcode to see that app is running) Step 4: (app runs well, yay) Step 5: ionic cordova plugin add com.adjust.sdk Step 6: npm install @ionic-native/adjust Step 7: Went to app.module.ts and added:

import { Adjust, AdjustConfig, AdjustEnvironment, AdjustLogLevel } from '@ionic-native/adjust/ngx';

Added Adjust to list of providers:

  providers: [
    StatusBar,
    SplashScreen,
    Adjust,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],

Step 8: Went to app.component.ts and added:

import { Adjust, AdjustConfig, AdjustEnvironment, AdjustLogLevel } from '@ionic-native/adjust/ngx';

Added Adjust initialisation code:

export class AppComponent {
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private adjust: Adjust,   // <----- added this
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
      // and added this part below
      const config = new AdjustConfig('2fm9gkqubvpc', AdjustEnvironment.Sandbox);
      config.setLogLevel(AdjustLogLevel.Verbose);
      this.adjust.create(config);
    });
  }
}

Steo 9: ionic build && npx cap sync && npx cap open ios Step 10: In Xcode, go to Pods project settings and for Pods project, add -ObjC flag to Other Linker Flags. Step 11: Run the app on iOS device/simulator and it should work.

It's been some time since this app was built, hopefully all instructions and code is still valid with current Capacitor app templates. Let us know if that worked for you and was it helpful.

[rashad]

Hey @uerceg thanks a lot for this info imma look into this ! One question that popped out yesterday is about the platform.ready method that only exists for Angluar according to ionic doc and can't be found on the React counterpart 😢 Any chance you could give me a hand for this as well please ?

[uerceg]

In all the honesty, I am not really sure what React counterpart might be in here. I can try to create React version of an app and try to see what might be the suitable place for initialisation. But rule of thumb when it comes to SDK initialisation says: try to initialize it as soon as your app starts. And that's pretty much it. We are not really tied to this method in Angular for any reason, we just saw it as a code piece which seems to be getting executed as soon as app starts. So I'd say that if you are aware of what might conceptually be React counterpart for what I just mentioned - feel free to initialize SDK in there.

[uerceg]

Hi @rashad

Just a follow up in here to check if the instructions from above helped you or not?

[rashad]

Hi @uerceg

Thanks for checking in. I’m still struggling and I’ll try something new. Here are 2 feedbacks

1. you never specify how to import the classes used. Would be nice to include import statements in your examples
2. do you guys provide any way for me to verify if the SDK has been correctly initialised ? Like with a dashboard ping answer or something? because for now I'm just running stuff blindly not being sure that it actually works
3. install
4. the 2 lines of instruction contain incorrect info (see below). After looking around I found that it should be AdjustEnvironment.Sandbox
5. ionic cordova plugin add com.adjust.sdk is not needed for capacitor according to their doc since you're using Ionic Native
6. whenever I try to build the app after having installed the plugin here's the error I get 😁
   

In a nutshell I can't even get to the point where I test the SDK initialization because of the in-between steps :(

[uerceg]

Hi @rashad

Thanks for the feedback.

1: Thanks for the suggestion, we will look into expanding instructions for other platforms as well. We did put example Ionic Capacitor app in the repo since it was requested in the past. We can look into expanding instructions for other platforms as well.

2: Yes, there is a way. In theory, once signed up with Adjust, you have ability to create new app in Adjust dashboard and use its app token in your app to track stuff for that app. Once successfully integrated, you can start SDK in sandbox mode in your app's debug build, track an install and see that install being counted in dashboard. But in theory you don't even need to look at the dashboard because you can also figure out if things are working well just by checking SDK logs which are being outputted during test runs you make with your app.

4: When you say that instructions are wrong, are you referring to our README? Because in custom instructions comment from above proper syntax is being used from what I can see.

5: Right, my bad. They are advising npm install in their docs. 👍

6: That's weird. Can you tell me what type of Ionic app are you having? Is it Ionic Capacitor app or rather some other type? If I was about to create new empty app like yours, how am I supposed to do that with ionic start API? Once you let me know, I will try to create example Ionic project of that type and add Adjust SDK to it.

[rashad]

Hi @uerceg,

Thanks for you answer!

1. The instructions you gave are for Angular, and since I'm using React as stated I guessed the imported would not work since it's not the same package.

2. I'll try that once the build passes (cf pt 6)

3. Yes I'm referring to the readme which should be the primary source of truth 😢

4. I'm not using ionic at all. Just a simple Capacitor on a nextjs app :)

[uerceg]

Hi @rashad

Thanks for the comments. I never tried building such an app, but would be willing to give it a shot to see if I can make SDK work inside of it. Is this how one can create type of app you're having? If not, can you maybe point me to some tutorial in how to create simple NextJS + Capacitor application?

[rashad]

yep that should do the trick :)

[uerceg]

Great. Will give this a shot and let you know how did my attempt go.

[rashad]

Great ! Keep me posted if you have any question this is my # 1 priority

[rashad]

Hey any news ?

[uerceg]

Hey @rashad,

I'm trying to make this work, but still not managing to. I also never really developed Next.js apps, so doesn't go super smoothly since I'm also learning about the platform in parallel. I'll ping you tomorrow with all the findings I managed to gather.

[uerceg]

One thing to check - is your Next.js app made with TypeScript (npx create-next-app@latest --ts)?

[rashad]

Ok cool can't wait ! Indeed we're using Typescript !

On Thu, Dec 9, 2021 at 2:35 PM Uglješa Erceg @.***> wrote:

One thing to check - is your Next.js app made with TypeScript (npx @.*** --ts)?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/adjust/cordova_sdk/issues/150#issuecomment-989858390, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACYP37VY33GKDXNL5FFOLDLUQCWDHANCNFSM5I3BAWYQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

-- Rashad Karanouh

Product Manager - Freelance @.*** rashad.pm [image: linkedin] https://www.linkedin.com/in/rashadkaranouh/

[uerceg]

Hi @rashad,

Unfortunately, no luck in making Cordova plugin of ours to run in Next.js app which added Capacitor (for now). Now that I dived into this topic a bit more, I do see that even though Capacitor is being added to this type of app, it's not really the same as Ionic Capacitor type of app where things seem to be working just fine (for which I initially wrote those instructions from above).

We will continue to check on this topic, but for now unfortunately, not really sure how to make Adjust Cordova SDK to run in this type of app.

[rashad]

Hi,

No worries, thanks for trying tho !

Happy new year !

[riderx]

Can we have a real Capacitor version? And agnostic of framework, right now, the tutorial speaks about Angular, nowadays most app don't use Angular

[uerceg]

Hi @riderx,

I haven't run through this tutorial lately, but I have tested it several times in the past and it did make the SDK run inside of the Ionic Capacitor app. Wondering is this maybe something you are looking for:

---

:memo: How to integrate Adjust Cordova SDK into Ionic Capacitor apps

• Create Ionic Capacitor app as explained here: https://capacitorjs.com/docs/getting-started/with-ionic
• Add iOS and Android platforms:

  ionic capacitor add ios
  ionic capacitor add android

• Try to see if (just as an example) iOS app runs well:

  ionic build && npx cap sync && npx cap open ios

• (app runs well, yay)
• Add Adjust Cordova plugin:

  npm i com.adjust.sdk

• Add Adjust Cordova TypeScript typings:

  npm i @awesome-cordova-plugns/adjust

• If you are using Ionic 6 or earlier OR if you are using Ionic 7 and you chose to made NgModules type of app, follow the steps in this bullet point:
  • Go to your app.module.ts file and add following:
    • Import statement:

      import { Adjust, AdjustConfig, AdjustEnvironment, AdjustLogLevel } from '@awesome-cordova-plugins/adjust/ngx';

    • Adjust to list of @NgModule providers:

      @NgModule({
      declarations: [AppComponent],
      entryComponents: [],
      imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
      providers: [Adjust,    // <----- add this
      { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
      bootstrap: [AppComponent],
      })

  • Go to your app.component.ts file and add following:
    • Import statement:

      import { Adjust, AdjustConfig, AdjustEnvironment, AdjustLogLevel } from '@awesome-cordova-plugins/adjust/ngx';

    • Adjust SDK initialization code as soon as platform is loaded:

      export class AppComponent {
      constructor(
      private platform: Platform,
      private splashScreen: SplashScreen,
      private statusBar: StatusBar,
      private adjust: Adjust,   // <----- add this
      ) {
      this.initializeApp();
      }
      initializeApp() {
      this.platform.ready().then(() => {
        this.statusBar.styleDefault();
        this.splashScreen.hide();
        // and add this part below
        const config = new AdjustConfig('2fm9gkqubvpc', AdjustEnvironment.Sandbox);
        config.setLogLevel(AdjustLogLevel.Verbose);
        this.adjust.create(config);
      });
      }
      }

• If you are using Ionic 7 and you chose to made Standalone components type of app, follow the steps in this bullet point:
  • Go to your app.component.ts file and add following:
    • Import statement:

      import { Adjust, AdjustConfig, AdjustEnvironment, AdjustLogLevel } from '@awesome-cordova-plugins/adjust/ngx';

    • Adjust as a provider to your @Component configuration:

      @Component({
      selector: 'app-root',
      templateUrl: 'app.component.html',
      standalone: true,
      imports: [IonApp, IonRouterOutlet],
      providers: [Adjust],    // <----- add this
      })

    • Adjust SDK initialization code as soon as platform is loaded:

      export class AppComponent {
      constructor(
      private platform: Platform,
      private splashScreen: SplashScreen,
      private statusBar: StatusBar,
      private adjust: Adjust,   // <----- add this
      ) {
      this.initializeApp();
      }
      initializeApp() {
      this.platform.ready().then(() => {
        this.statusBar.styleDefault();
        this.splashScreen.hide();
        // and add this part below
        const config = new AdjustConfig('2fm9gkqubvpc', AdjustEnvironment.Sandbox);
        config.setLogLevel(AdjustLogLevel.Verbose);
        this.adjust.create(config);
      });
      }
      }

• Build and run your app to verify that everything works and that you're seeing Adjust SDK verbose logs:

  ionic build && npx cap sync && npx cap open ios

---

Looking forward to hearing back from you.

[riderx]

As stated in my previous message, I don’t use Angular as framework but Vuejs. So I can install in the capacitor app but I then need to invent the steps in JS. So I would love to have the step for non angular projet. As it’s a standard for few years now in the ionic ecosystem. They support angular, vue and react

[riderx]

Another thing to note is Cordova is kinda deprecated. And in low maintenance mode. So most company try to avoid Cordova plugin in app now to prevent unwanted behavior. That why a native Capacitor version could be appreciated. I did the migration for Revenuecat a while ago, if you need any help on that I can help

[uerceg]

Ah, sorry for the misunderstanding. And great to hear about your experience with migrating RevenueCat SDK, nice. 👍 In case this was something you did in public repo somewhere, and in case there's some written trail about the changes you did, I'd be more than interested to check them out and see how to apply that to our SDK as well. And of course, any help you're willing to provide is more than welcomed.

[riderx]

I didn't make an article about it, but you can see the code. One thing you could be inspired by them is they have a common SDK used for Cordova, Capacitor, React Native And then they just install this SDK in each of the plugins and create bridge function. It's very cool and makes the work super easy for them to maintain for each tech.

This is the plugin I wrote for them: https://github.com/RevenueCat/purchases-capacitor This is the original plugin in Cordova: https://github.com/RevenueCat/cordova-plugin-purchases

This is the guide to create in Capacitor (way simpler than Cordova IMO): https://capacitorjs.com/docs/plugins/creating-plugins

The guide is pretty well done, the only difficulty I see for you:

• The example is in swift so you need to understand how to do it in ObjectiveC (as your current code is) or rewrite all in Swift
• The new plugin doesn't recommend having JS code anymore and keeps simple method calling native.

Hope that can help you, I will share later the step For Vue.js I did, and if you like it, I can do a PR to add it to the README