Web & SaaS Getting Started

Learn more about installing the Pyze Web Smart SDK, initializing it, using timed and custom events.

1. Get a Pyze App Key

See instructions to get a Pyze App Key for your new app

2. Initialize

Add initialization code to all your web pages

Build and Go!

You have enabled all screen flow funnels, loyalty, cohort and churn analysis, Intelligence data explorations, built-in events, auto segmentation, and much more. Use your app with the Pyze SDK and you should see data on growth.pyze.com.

In the following sections, you can add app-defined and timed events.

4. Add events

Add events to your Web or SaaS app. A comprehensive overview of curated, app defined, timed and built-in events is available under Events in the api & events.

Pyze Web and SaaS Developer Center has links to Pyze Documentation and api. Check back frequently for updates and contact us at contact@pyze.com if we can improve this page in anyway or if you have suggestions.

Install

Get Pyze App Key

Get a Pyze App Key (PAK) from growth.pyze.com

1. Login to growth.pyze.com

Every app is uniquely assigned a Pyze App Key (PAK), a 22 character app specific key, which you obtain from growth.pyze.com after logging in with your email and password. If you have not signed up for Pyze, you can Get Pyze here first.

Login to growth.pyze.com

2. Add a new app

Click on the Add App button on top right corner and provide the details for your app, including name, platform and optional URL for the app store. Specify the timezone where you are located.

3. Copy Pyze App Key from newly added app

Hover over the newly added app with rotating Pyze logo and copy the Pyze App Key (jUiix5alQ7KYSlG6ZQ_TXw in this example). Alternatively, you click on the “App Profile” icon and copy the PAK from the App profile page.

Alternatively, you click on the “App Profile” icon and copy the PAK from the App profile page.

Initialize

Initialize Pyze for Web and SaaS

Add code in your Web or SaaS app to use the Pyze SDK

The instructions on this page assume you have obtained the Pyze App Key for your project. If not, visit Getting Started Web Guide to get the Pyze App key.

  1. Paste the following JavaScript code between the <head> and </head> tags in every page that uses Pyze Growth Intelligence.
  2. Replace “YOUR_PYZE_APP_KEY” with the Pyze App Key obtained from your growth.pyze.com account.
  3. The JavaScript library provides two global variables: Pyze and PyzeEvents to send data to Pyze Servers.
    <!-- Start Pyze Growth Intelligence Replace "YOUR_PYZE_APP_KEY" with key from https://growth.pyze.com -->
    <script type="text/javascript">
        var pyzeAppKey="YOUR_PYZE_APP_KEY";
        !function(a,b){function k(a,b){function c(b){a[b]=function(){a._q.push([b].concat(Array.prototype.slice.call(arguments,0)))}}for(var d=0;d<b.length;d++)c(b[d])}var c=a.Pyze||{_q:[]},d=a.PyzeEvents||{_q:[]},e=a.PyzeCuratedEvents||{_q:[]},f=a.PyzeIdentity||{_q:[]},g=["initialize","getTimerReference","postWebAppVersion","postPageView"],h=["postCustomEvent","postCustomEventWithAttributes","postTimedEvent","postExplicitActivation"],i=["post"],j=["setUserIdentifer","resetUserIdentifier","postTraits"];k(c,g),k(d,h),k(e,i),k(f,j);var l=b.createElement("script"),m=b.getElementsByTagName("script")[0];l.type="text/javascript",l.async=!0,l.src="https://cdn.pyze.com/pyze.js",m.parentNode.insertBefore(l,m),a.Pyze=c,a.PyzeEvents=d,a.PyzeCuratedEvents=e,a.PyzeIdentity=f}(window,document),Pyze.initialize(pyzeAppKey);</script>
     <!-- End Script Pyze Growth Intelligence -->

Remember to replace “YOUR_PYZE_APP_KEY” with the Pyze App key you got from growth.pyze.com

Build and Go!

JSHint - Code quality tool

Using JSHint or other tools and, and getting an error? You can add a comment, for example:

/*global PyzeCuratedEvents */

to the top of the file is causing your JSHint to give a warning. This tells JSHint that this global is defined somewhere else. This is necessary because the Pyze snippet dynamically creates things on the window when your page loads up. If JSHint gives warnings that any of the other Pyze globals aren’t defined, you can use this comment with those global variable names also.

Add Events

See a detailed Events Overview here.

Pyze has made it easy for you to capture events. We support custom and timed events.

Custom Event Handling

We support custom events that can be used to track any event within the web app and can be called with or without attributes. See postCustomEvent and postCustomEventWithAttributes method in the Pyze class (See here).

// Custom Event without Attributes
PyzeEvents.postCustomEvent("Blog Read");

// Custom Event with Attributes
// Create an object with key value pairs of custom attributes and post with postCustomEventWithAttributes

var attributes = {};
attributes["screen"] = "Home";
attributes["seconds spent"] = "50";

PyzeEvents.postCustomEventWithAttributes("Blog Read", attributes);

Timed Events

Use the timed events API for timing events. See getTimerReference in the Pyze class and postTimedEvent method in the PyzeEvents class (See here). The method accepts two parameters: Event Name and Custom Attributes

// Start timing the event with getTimerReference method with a callback
Pyze.getTimerReference(function callback(result){
  var time = result;
});

// Post timed event with event start time and attributes
// Create an object with key value pairs of custom attributes and post with postTimedEvent
var attributes = {};
attributes["screen"] = "Home";
attributes["seconds spent"] = "50";

PyzeEvents.postTimedEvent ("Blog Read", time, attributes);

Platform & CMS Integrations

Integrating Pyze with AngularJS

Pyze supports Angular.js, a popular platform for creating dynamic web sites.

  • Create an account on Pyze and add your website. Use the Pyze App Key in the tracking code to get started.
  • Copy the Pyze tracking code provided and paste it in the main html file of your app then replace “YOUR_PYZE_APP_KEY” with the App Key obtained from Pyze in the first line

     <!-- Start Pyze Growth Intelligence -->
     <script type="text/javascript">
         var pyzeAppKey="YOUR_PYZE_APP_KEY";
         !function(a,b){function k(a,b){function c(b){a[b]=function(){a._q.push([b].concat(Array.prototype.slice.call(arguments,0)))}}for(var d=0;d<b.length;d++)c(b[d])}var c=a.Pyze||{_q:[]},d=a.PyzeEvents||{_q:[]},e=a.PyzeCuratedEvents||{_q:[]},f=a.PyzeIdentity||{_q:[]},g=["initialize","getTimerReference","postWebAppVersion","postPageView"],h=["postCustomEvent","postCustomEventWithAttributes","postTimedEvent","postExplicitActivation"],i=["post"],j=["setUserIdentifer","resetUserIdentifier","postTraits"];k(c,g),k(d,h),k(e,i),k(f,j);var l=b.createElement("script"),m=b.getElementsByTagName("script")[0];l.type="text/javascript",l.async=!0,l.src="https://cdn.pyze.com/pyze.js",m.parentNode.insertBefore(l,m),a.Pyze=c,a.PyzeEvents=d,a.PyzeCuratedEvents=e,a.PyzeIdentity=f}(window,document),Pyze.initialize(pyzeAppKey);</script>
      <!-- End Script Pyze Growth Intelligence -->
    
  • For a single page application, Pyze requires you to call Pyze.postPageView to manually send the page title and pathname when your app changes route/view/location
  • For AngularJS you just need to bind to the $stateChangeSuccess event, which you can do in the run() function, as shown below

     yourAngularApp.run(
         function($rootScope){
             $rootScope.$on('$stateChangeSuccess',function(event, toState, toParams, fromState, fromParams){
                 Pyze.postPageView("PageTitle", "Page URL");
             });
         }
     );
    
  • You’re now ready to begin using Pyze and watch your app grow
  • Learn more about sending events
  • Refer to the Pyze Events API

Integrating Pyze with React

This page is about React.js. React-native for mobile apps is here.

Pyze supports React.js, a popular platform for creating interactive UIs declaratively with component logic written either directly in javascript or in JSX - which adds XML syntax to JavaScript.

  • Create an account on Pyze and add your website. Use the Pyze App Key in the tracking code to get started.
  • Copy the Pyze tracking code provided and paste it in the main html file of your app before the </head> tag, then replace “YOUR_PYZE_APP_KEY” with the App Key obtained from Pyze in the first line

     <!-- Start Pyze Growth Intelligence -->
     <script type="text/javascript">
         var pyzeAppKey="YOUR_PYZE_APP_KEY";
         !function(a,b){function k(a,b){function c(b){a[b]=function(){a._q.push([b].concat(Array.prototype.slice.call(arguments,0)))}}for(var d=0;d<b.length;d++)c(b[d])}var c=a.Pyze||{_q:[]},d=a.PyzeEvents||{_q:[]},e=a.PyzeCuratedEvents||{_q:[]},f=a.PyzeIdentity||{_q:[]},g=["initialize","getTimerReference","postWebAppVersion","postPageView"],h=["postCustomEvent","postCustomEventWithAttributes","postTimedEvent","postExplicitActivation"],i=["post"],j=["setUserIdentifer","resetUserIdentifier","postTraits"];k(c,g),k(d,h),k(e,i),k(f,j);var l=b.createElement("script"),m=b.getElementsByTagName("script")[0];l.type="text/javascript",l.async=!0,l.src="https://cdn.pyze.com/pyze.js",m.parentNode.insertBefore(l,m),a.Pyze=c,a.PyzeEvents=d,a.PyzeCuratedEvents=e,a.PyzeIdentity=f}(window,document),Pyze.initialize(pyzeAppKey);</script>
      <!-- End Script Pyze Growth Intelligence -->
    
  • For a single page application (using React Router), Pyze requires you to call Pyze.postPageView to manually send the page title and pathname when your app changes route/view/location
  • For React, the Simple React example app code has been modified

     import React from 'react';
     import ReactDOM from 'react-dom';
     import { Router, Route, browserHistory } from 'react-router';
     import Home from './app/screens/Home';
     import User from './app/screens/User';
     import 'bootstrap/dist/css/bootstrap.min.css';
     import './assets/styles.css';
     ReactDOM.render(
       <Router history={browserHistory}>
         <Route path="/" component={Home} />
         <Route path="/:username" component={User} />
       </Router>,
       document.getElementById('container')
     );
    
     browserHistory.listen(function (location) {
         Pyze.postPageView(document.title, location.pathname);
     });
    
  • You’re now ready to begin using Pyze and watch your app grow
  • Learn more about sending events. Refer to the Pyze Events API for sample code.

Integrating Pyze with Squarespace

  • Create an account on Pyze and add your website. Use the Pyze App Key in the tracking code to get started.
  • Copy the Pyze tracking code provided.
  • Log in to your Squarespace site and click on Setting -> Advanced tab under Website -> Code Injection
  • Paste the Pyze Tracking snippet containing your Pyze App Key in the Header section.

     <!-- Start Pyze Growth Intelligence -->
     <script type="text/javascript">
         var pyzeAppKey="YOUR_PYZE_APP_KEY";
         !function(a,b){function k(a,b){function c(b){a[b]=function(){a._q.push([b].concat(Array.prototype.slice.call(arguments,0)))}}for(var d=0;d<b.length;d++)c(b[d])}var c=a.Pyze||{_q:[]},d=a.PyzeEvents||{_q:[]},e=a.PyzeCuratedEvents||{_q:[]},f=a.PyzeIdentity||{_q:[]},g=["initialize","getTimerReference","postWebAppVersion","postPageView"],h=["postCustomEvent","postCustomEventWithAttributes","postTimedEvent","postExplicitActivation"],i=["post"],j=["setUserIdentifer","resetUserIdentifier","postTraits"];k(c,g),k(d,h),k(e,i),k(f,j);var l=b.createElement("script"),m=b.getElementsByTagName("script")[0];l.type="text/javascript",l.async=!0,l.src="https://cdn.pyze.com/pyze.js",m.parentNode.insertBefore(l,m),a.Pyze=c,a.PyzeEvents=d,a.PyzeCuratedEvents=e,a.PyzeIdentity=f}(window,document),Pyze.initialize(pyzeAppKey);</script>
      <!-- End Script Pyze Growth Intelligence -->
    
  • The Header section will look as follows.

  • You’re now ready to begin using Pyze and watch your app grow.
  • To Track events, add the event handlers, which calls the Pyze Events
  • Pass the id or the class attribute of the element that is involved in the event. Call the JavaScript Custom or Curated event function for tracking. Following is a sample code

     jQuery( document ).ready( function( $ ) {
         $('#BlogPost_Read').click(function() {
             PyzeEvents.postCustomEventWithAttributes("Blog post read", {"Blog Title" : "Understanding web analytics"});
         });
         $('#BlogPost_Commented').hover(function() {
             PyzeEvents.postCustomEventWithAttributes("Blog post commented", {"Commented By" : "User Identifier"});
         });   
         $('#BlogPost_Liked').click( function() {
             PyzeEvents.postCustomEvent("Blog post liked");
         });
     });
    
  • Place the code in the Footer section and start sending events to pyze.

Integrating Pyze with Vue.js

Pyze supports Vue.js, a popular platform for creating dynamic web sites.

  • Create an account on Pyze and add your website. Use the Pyze App Key in the tracking code to get started.
  • Copy the Pyze tracking code provided and paste it in the main html file of your app or the file that holds your routes. Replace “YOUR_PYZE_APP_KEY” with the App Key obtained from Pyze in the first line

     <!-- Start Pyze Growth Intelligence -->
     <script type="text/javascript">
         var pyzeAppKey="YOUR_PYZE_APP_KEY";
         !function(a,b){function k(a,b){function c(b){a[b]=function(){a._q.push([b].concat(Array.prototype.slice.call(arguments,0)))}}for(var d=0;d<b.length;d++)c(b[d])}var c=a.Pyze||{_q:[]},d=a.PyzeEvents||{_q:[]},e=a.PyzeCuratedEvents||{_q:[]},f=a.PyzeIdentity||{_q:[]},g=["initialize","getTimerReference","postWebAppVersion","postPageView"],h=["postCustomEvent","postCustomEventWithAttributes","postTimedEvent","postExplicitActivation"],i=["post"],j=["setUserIdentifer","resetUserIdentifier","postTraits"];k(c,g),k(d,h),k(e,i),k(f,j);var l=b.createElement("script"),m=b.getElementsByTagName("script")[0];l.type="text/javascript",l.async=!0,l.src="https://cdn.pyze.com/pyze.js",m.parentNode.insertBefore(l,m),a.Pyze=c,a.PyzeEvents=d,a.PyzeCuratedEvents=e,a.PyzeIdentity=f}(window,document),Pyze.initialize(pyzeAppKey);</script>
      <!-- End Script Pyze Growth Intelligence -->
    
  • For a single page application, Pyze requires you to call Pyze.postPageView to manually send the page title and pathname when your app changes route/view/location
  • For Vue.js you just need to call the afterEach method with the router instance and pass the to and from parameters. Call the Pyze.postPageView method with to.name and to.path for the title and path respectively, as shown in the example below

     import Vue from 'vue'
      import Router from 'vue-router'
      import Hello from '@/components/Hello'
      import Page1 from '@/components/Page1'
    
      Vue.use(Router)
    
      const router = new Router({
          routes: [
              {
                  path: '/',
                  name: 'Hello',
                  component: Hello
              },
              {
                  path: '/Page1',
                  name: 'Page1',
                  component: Page1
              }
    
          ]
      })
      export default router
    
      router.afterEach((to, from) => {
          Pyze.postPageView(to.name, to.path);
      })
    

    Pyze has made it easy for you to capture events. We support custom, curated and timed events. (See here).

  • You can call events in your .Vue or .html files as shown in the example below

     <template>
      <div class="hello">
           <h1></h1>
           <button @click="testCustomEvent()">Test postCustomEvent</button>
           <button @click="testCustomEventWithAttributes()">Test postCustomEventWithAttributes</button>
           <a href="#/Page1"> <button >Page1</button></a>
     </div> </template>
     <script>
           export default {
               name: 'hello',
               methods:{
                   testCustomEvent : function(){
                       PyzeEvents.postCustomEvent("Send events to Pyze");
                   },
                   testCustomEventWithAttributes : function(){
                       PyzeEvents.postCustomEventWithAttributes('Sending events with attributes',{'Button Name' : 'Click to send'});
                   }
              },
              data () {
                  return {
                      msg: 'Welcome to Your Vue.js App'
                  }
              }
          }
      </script>
    
  • A sample App for integrating Vue.js with Pyze has been provided here.
  • You’re now ready to begin using Pyze and watch your app grow
  • Learn more about sending events
  • Refer to the Pyze Events API

Integrating Pyze with Wix

  • Create an account on Pyze and add your website. Use the Pyze App Key in the tracking code to get started.
  • Copy the Pyze tracking code provided.
  • Log in to your Wix site and switch to Editor mode
  • Click on the Add Plus icon

  • Select “HTML code” under “more”

  • Paste the Pyze Tracking snippet containing your Pyze App Key

     <!-- Start Pyze Growth Intelligence -->
      <script type="text/javascript">
          var pyzeAppKey="YOUR_PYZE_APP_KEY";
          !function(e,t){function n(e,t){function n(t){e[t]=function(){e._q.push([t].concat(Array.prototype.slice.call(arguments,0)))}}for(var s=0;s<t.length;s++)n(t[s])}var s=e.Pyze||{_q:[]},i=e.PyzeEvents||{_q:[]},p=e.PyzeCuratedEvents||{_q:[]},o=["initialize","getTimerReference","postWebAppVersion"],c=["postCustomEvent","postCustomEventWithAttributes","postTimedEvent","postExplicitActivation"],r=["post"];n(s,o),n(i,c),n(p,r);var a=t.createElement("script"),y=t.getElementsByTagName("script")[0];a.type="text/javascript",a.async=!0,a.src="https://cdn.pyze.com/pyze.js",y.parentNode.insertBefore(a,y),e.Pyze=s,e.PyzeEvents=i,e.PyzeCuratedEvents=p}(window,document),Pyze.initialize(pyzeAppKey);</script>
      <!-- End Script Pyze Growth Intelligence -->
    
  • Ensure that you replaced “YOUR_PYZE_APP_KEY” with an actual key from growth.pyze.com
  • Make sure that you the HTML snippet to all pages, by switching on “Show on all pages”

  • Save and Publish your Wix Web App!
  • You’re now ready to begin using Pyze and watch your app grow.

Integrating Pyze with WordPress

  • Create an account on Pyze and add your website. Use the Pyze App Key in the tracking code to get started.
  • Copy the Pyze tracking code provided.
  • Log in to your WordPress site and click on Appearances -> Editor on the left navigation bar on the page.

  • Find the header.php file and click on it.:

  • Paste the Pyze Tracking snippet containing your Pyze App Key before the </head> tag

     <!-- Start Pyze Growth Intelligence -->
     <script type="text/javascript">
         var pyzeAppKey="YOUR_PYZE_APP_KEY";
         !function(a,b){function k(a,b){function c(b){a[b]=function(){a._q.push([b].concat(Array.prototype.slice.call(arguments,0)))}}for(var d=0;d<b.length;d++)c(b[d])}var c=a.Pyze||{_q:[]},d=a.PyzeEvents||{_q:[]},e=a.PyzeCuratedEvents||{_q:[]},f=a.PyzeIdentity||{_q:[]},g=["initialize","getTimerReference","postWebAppVersion","postPageView"],h=["postCustomEvent","postCustomEventWithAttributes","postTimedEvent","postExplicitActivation"],i=["post"],j=["setUserIdentifer","resetUserIdentifier","postTraits"];k(c,g),k(d,h),k(e,i),k(f,j);var l=b.createElement("script"),m=b.getElementsByTagName("script")[0];l.type="text/javascript",l.async=!0,l.src="https://cdn.pyze.com/pyze.js",m.parentNode.insertBefore(l,m),a.Pyze=c,a.PyzeEvents=d,a.PyzeCuratedEvents=e,a.PyzeIdentity=f}(window,document),Pyze.initialize(pyzeAppKey);</script>
      <!-- End Script Pyze Growth Intelligence -->
    
  • The header.php file should look something like this:

     <?php wp_head(); ?>
        <script type="text/javascript">
             var pyzeAppKey="YOUR_PYZE_APP_KEY";
             !function(a,b){function k(a,b){function c(b){a[b]=function(){a._q.push([b].concat(Array.prototype.slice.call(arguments,0)))}}for(var d=0;d<b.length;d++)c(b[d])}var c=a.Pyze||{_q:[]},d=a.PyzeEvents||{_q:[]},e=a.PyzeCuratedEvents||{_q:[]},f=a.PyzeIdentity||{_q:[]},g=["initialize","getTimerReference","postWebAppVersion","postPageView"],h=["postCustomEvent","postCustomEventWithAttributes","postTimedEvent","postExplicitActivation"],i=["post"],j=["setUserIdentifer","resetUserIdentifier","postTraits"];k(c,g),k(d,h),k(e,i),k(f,j);var l=b.createElement("script"),m=b.getElementsByTagName("script")[0];l.type="text/javascript",l.async=!0,l.src="https://cdn.pyze.com/pyze.js",m.parentNode.insertBefore(l,m),a.Pyze=c,a.PyzeEvents=d,a.PyzeCuratedEvents=e,a.PyzeIdentity=f}(window,document),Pyze.initialize(pyzeAppKey);</script>
          <!-- End Script Pyze Growth Intelligence -->
     </head>
    
  • You’re now ready to begin using Pyze and watch your app grow.
  • To Track events, create a JavaScript file ( e.g. events.js) that contains the event handlers, which calls the Pyze Events
  • Pass the id or the class attribute of the element that is involved in the event. Call the JavaScript Custom or Curated event function for tracking. Following is a sample code

     jQuery( document ).ready( function( $ ) {
         $('#BlogPost_Read').click(function() {
             PyzeEvents.postCustomEventWithAttributes("Blog post read", {"Blog Title" : "Understanding web analytics"});
         });
         $('#BlogPost_Commented').hover(function() {
             PyzeEvents.postCustomEventWithAttributes("Blog post commented", {"Commented By" : "User Identifier"});
         });   
         $('#BlogPost_Liked').click( function() {
             PyzeEvents.postCustomEvent("Blog post liked");
         });
     });
    
  • Place the JavaScript file in the location from where the WordPress site is hosted or Upload it into the “javascript” folder in your theme (e.g. //testwpintegration.com/wp-content/themes/themeName/javascript/)..
  • Include the file in your theme’s header.php file by adding the appropriate path before the closing </head> tag:

     <script type="text/javascript" src="/events.js"></script>
    

Intergation using WordPress Plugins

  • In addition you can use Plugins in WordPress to integrate Pyze.
  • Install the Head and Footer plugin in WordPress and navigate to the Settings -> Header and Footer and click on it.

  • Add the Pyze Tracking code in the Header and the link to the JavaScript file in the footer as shown and click Save