npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@appcues/capacitor

v4.3.0

Published

Capcitor plugin to bridge the native Android and iOS Appcues mobile SDKs in an Ionic application.

Downloads

1,917

Readme

Appcues Capacitor Plugin

CircleCI npm License: MIT

Appcues Capacitor Plugin allows you to integrate Appcues experiences into your Ionic apps for iOS and Android devices.

This capacitor is a bridge between the native Appcues SDKs in an Ionic application which sends user properties and events to the Appcues API and retrieves and renders Appcues content based on those properties and events.

🚀 Getting Started

Prerequisites

Android

Your application's build.gradle must have a compileSdkVersion of 34+ and minSdkVersion of 21+. Your project should use the Android Gradle Plugin (AGP) version 8 or above.

android {
    compileSdkVersion 34

    defaultConfig {
        minSdkVersion 21
    }
}

Due to the SDK usage of Jetpack Compose, it is required to either:

  1. apply kotlin-android plugin in app's build.gradle file.
plugins {  
  id 'com.android.application' 
  id 'kotlin-android' 
}
  1. OR Update Android Gradle Plugin 8.4.0+

Related Google issue regarding usage of the Jetpack Compose dependency versions 1.6+


If your project fails to build with similar error:

(25, 39): Class 'kotlin.Unit' was compiled with an incompatible version of Kotlin. 
The binary version of its metadata is 1.9.0, expected version is 1.7.1.

Make sure to set the appropriate kotlin_version on your project build.gradle file

ext.kotlin_version = ‘1.7.20’

iOS

Your application must target iOS 11+ to install the SDK, and iOS 13+ to render Appcues content. Update the iOS project xcodeproj to set the deployment target, if needed. In the application's Podfile, include at least this minimum version.

# Podfile
platform :ios, '11.0'

Installation

In your app's root directory, run:

npm install @appcues/capacitor

npx cap sync

Note: You do not need to manually update your Podfile to add Appcues.

One Time Setup

Initializing the SDK

An instance of the Appcues SDK should be initialized when your app launches.

import { Appcues } from '@appcues/capacitor';

Appcues.initialize({accountId: 'APPCUES_ACCOUNT_ID', applicationId: 'APPCUES_APPLICATION_ID'})

Initializing the SDK requires you to provide two values, an Appcues account ID, and an Appcues mobile application ID. These values can be obtained from your Appcues settings. Refer to the help documentation on Registering your mobile app in Studio for more information.

Supporting Builder Preview and Screen Capture

During installation, follow the steps outlined in Configuring the Appcues URL Scheme. This is necessary for the complete Appcues builder experience, supporting experience preview, screen capture and debugging.

Enabling Push Notifications

In an Ionic app, push notifications are configured in the native projects for iOS and Android. Please refer to native documentation on iOS and Android for more details. The example directory in this repository contains a reference implementation that includes push notification support.

Identifying Users

In order to target content to the right users at the right time, you need to identify users and send Appcues data about them. A user is identified with a unique ID.

// Identify a user
Appcues.identify({userId: 'my-user-id'})
// Identify a user with property
Appcues.identify({ userId: 'my-user-id', properties: { company: "Appcues" }})

After identifying a user, you can optionally associate that user with group.

// Associate a user with a group, optionally including group properties
Appcues.group({ groupId: 'group-id', properties: { plan: "standard" }})

To ensure the most accurate content targeting based upon group information, it's recommended to supply the group information immediately after a new user is identified.

Tracking Screens and Events

Events are the “actions” your users take in your application, which can be anything from clicking a certain button to viewing a specific screen. Once you’ve installed and initialized the Appcues Capacitor Plugin, you can start tracking screens and events using the following methods:

// Track event
Appcues.track({name: "Sent Message"})
// Track event with property
Appcues.track({name: "Deleted Contact", properties: { id: 123 }})

// Track screen
Appcues.screen({title: "Contact List"})   
// Track screen with property
Appcues.screen({title: "Contact List", properties: { reference: "abc" }})

📝 Documentation

More technical documentation about this capacitor is available in the docs. Auto-generated documentation is available here.

Full documentation is available at https://docs.appcues.com/

🎬 Examples

The example directory in this repository contains full example iOS/Android app to providing references for correct installation and usage of the Appcues API.

👷 Contributing

See the contributing guide to learn how to get set up for development and how to contribute to the project.

📄 License

This project is licensed under the MIT License. See LICENSE for more information.