Code Monkey home page Code Monkey logo

klaviyo_flutter's Introduction

klaviyo_flutter

Pub CI

Flutter wrapper for Klaviyo Android, and iOS projects.

  • Uses Klaviyo Android SDK Version 1.1.1.
  • The minimum Android SDK minSdkVersion required is 23.
  • Uses Klaviyo iOS SDK Version 2.0.1.
  • The minimum iOS target version required is 13.

Usage

Import package:klaviyo_flutter/klaviyo_flutter.dart and use the methods in Klaviyo class.

Example:

import 'package:flutter/material.dart';
import 'package:klaviyo_flutter/klaviyo_flutter.dart';

void main() async {
  // initialize the flutter binding.
  WidgetsFlutterBinding.ensureInitialized();
  // initialize the Klaviyo.
  // make sure to add key from your Klaviyo account public API.
  await await Klaviyo.instance.initialize('apiKeyHere');
  runApp(App());
}

class App extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return FlatButton(
      child: Text('Send Klaviyo SUCCESSFUL_PAYMENT event'),
      onPressed: () async {
        await Klaviyo.instance.logEvent(
          '\$successful_payment',
          {'\$value': 'paymentValue'},
        );
      },
    );
  }
}

See Klaviyo Android and iOS package documentation for more information.

Android

Permissions:

<uses-permission android:name="android.permission.INTERNET" />

Optional permissions:

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /><uses-permission
android:name="android.permission.VIBRATE" /><uses-permission
android:name="android.permission.POST_NOTIFICATIONS" />

Enable AndroidX + Jetifier support in your android/gradle.properties file (see example app):

android.useAndroidX=true
android.enableJetifier=true

iOS

Make sure that you have a NSPhotoLibraryUsageDescription entry in your Info.plist.

  <key>NSPhotoLibraryUsageDescription</key>
  IPHONEOS_DEPLOYMENT_TARGET = 13.0;

Push notifications setup

This plugin works in combination with the firebase_messaging plugin to receive Push Notifications.

Prerequisites:

  • Firebase account
  • Familiarity with Firebase documentation.

KlaviyoPushService

The Klaviyo Push SDK for Android works as a wrapper around FirebaseMessagingService so the setup process is very similar to the Firebase client documentation linked above. You should follow all other setup recommendations from the FCM documentation. Register KlaviyoPushService to receive MESSAGING_EVENT intents. This allows Klaviyo's Push SDK to receive new and updated push tokens via the onNewToken method, as well as display notifications via the onMessageReceived method.

<service android:name="com.klaviyo.pushFcm.KlaviyoPushService" android:exported="false">
  <intent-filter>
    <action android:name="com.google.firebase.MESSAGING_EVENT" />
  </intent-filter>
</service>

To specify a notification icon, add the following metadata to your app manifest. Absent this, the application's launcher icon will be used.

<meta-data android:name="com.klaviyo.push.default_notification_icon"
    android:resource="{YOUR_ICON_RESOURCE}" />
final firebaseMessaging = FirebaseMessaging.instance;
final token = Platform.isIOS
        ? await firebaseMessaging.getAPNSToken()
        : await firebaseMessaging.getToken();

if (token != null && token.isNotEmpty) {
  Klaviyo.instance.sendTokenToKlaviyo(token);
}

Sending push notifications

  1. Add the following code to the application delegate file in application:didRegisterForRemoteNotificationsWithDeviceToken. You may need to add this code to your application delegate if you have not done so already.
    if #available(iOS 10.0, *) {
        UNUserNotificationCenter.current().delegate = self as? UNUserNotificationCenterDelegate
    }

Any users that enable/accept push notifications from your app now will be eligible to receive your custom notifications.

To read more about sending push notifications, check out our additional push notification guides.

Now, if either Firebase direct (e.g. by your own backend server) or Klaviyo sends you a message, it will be delivered to your app.

Tracking push notifications

The following code example allows you to track when a user opens a push notification.

  1. Add the following code that extends your main app:
    FirebaseMessaging.onBackgroundMessage(firebaseMessagingBackgroundHandler);

    Future<void> firebaseMessagingBackgroundHandler(RemoteMessage message) async {
        await Firebase.initializeApp();
        await Klaviyo.instance.handleBackgroundMessage(message);
    }

Once your first push notifications are sent and opened, you should start to see Opened Push metrics within your Klaviyo dashboard.

klaviyo_flutter's People

Contributors

denkito avatar korpyc avatar drybnikov avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.