Skip to content

journifyio/journify-javascript-sdk

Repository files navigation

Journify JavaScript SDK

This SDK enables you to send your data to Journify back-office without any additional integrations for new added destinations.

Quickstart

The easiest and quickest way to get started with the SDK is to use it through Journify. Alternatively, you can install it through NPM or simply add it to your HTML page and do the instrumentation yourself.

Using with Journify

  1. Create a javascript source at Journify and you will automatically get a snippet that you can add to your website. For more information visit our documentation.
  2. Start tracking!

Using as an NPM package

  1. Install the package
# npm
npm install @journifyio/js-sdk

# yarn
yarn add @journifyio/js-sdk

# pnpm
pnpm add @journifyio/js-sdk
  1. Import the package into your project and you're good to go (with working types)!
import * as Journify from "@journifyio/js-sdk";

Journify.load({ writeKey: '<YOUR_WRITE_KEY>' })

Journify.identify('user-id-1', {email: "[email protected]"})

document.body?.addEventListener('click', () => {
    Journify.track('document body clicked!')
})

Using in html page

Add the following script tag at the top of your <head>. Replace <YOUR_WRITE_KEY> with your actual write key.

<script>
    !(function () {var journify = (window.journify = window.journify || []);var localJournify; if (!journify.load) { if (journify.invoked) { console.error("Journify snippet included twice."); } else { journify.invoked = !0; journify.methods = ["track", "identify", "group", "track", "page"]; journify.factory = function (methodName) { return function () { var callArgs = Array.prototype.slice.call(arguments); callArgs.unshift(methodName); journify.push(callArgs); return journify }; }; for (var i = 0; i < journify.methods.length; i++) { var methodName = journify.methods[i]; journify[methodName] = journify.factory(methodName); } journify.load = function (loadSettings) { var script = document.createElement("script"); script.type = "text/javascript"; script.async = !0; script.src = "https://unpkg.com/@journifyio/js-sdk@latest/dist/_bundles/journifyio.min.js"; localJournify = journify; script.onload = function () { window.journify.load(loadSettings); for (var i = 0; i < localJournify.length; i++) { var callArgs = localJournify[i]; var methodName = callArgs.shift(); if (!window.journify[methodName]) return; window.journify[methodName].apply(this, callArgs); } }; var firstScript = document.getElementsByTagName("script")[0]; firstScript.parentNode.insertBefore(script, firstScript); };

        journify.load({ writeKey: "<YOUR_WRITE_KEY>" });
    }}})();
</script>

Usage

<script>
  // Identify a user
  journify.identify(
    "user-id-1",
    { email: "[email protected]" },
  );

  // Track a page view
  journify.page();

  // Track an event
  journify.track("purchase", {
    value: 1000,
    currency: "SAR",
    transaction_id: "1000-abe7f-842537-1372826"
  });
</script>

Contributing

You can contribute to Journify JavaScript SDK by forking the repo and making pull requests on the main branch.

To publish a new version, you need to add a prefix to your pull request title following the semantic versioning spec:

  • [MAJOR] {Pull request title}
  • [MINOR] {Pull request title}
  • [PATCH] {Pull request title}

Once your PR is merged and the CI pipeline is passed, your code will be published to npm.

Test your changes using the playground in watch mode

  1. Install the dependencies (done once)
    yarn install
  2. Install the playground dependencies (done once)
    cd examples/react-playground
    yarn install
    cd -
  3. Build the package in watch mode
    yarn build-watch
  4. In another terminal tab, start the playground
    yarn playground

License

This project is licensed under MIT license.

About

JavaScript SDK for Journify

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

Contributors

Languages