Skip to content
share library_books

Sematext Experience Integrations

All of the integrations require adding and configuring the Experience script. However, single-page applications require one more configuration step to register route changes.

Angular

The Angular SPA integration supports both Angular.js and Angular 2+.

Angular 2+

If your webapp uses the newer Angular you should add a call to routeChange whenever the route changes in your webapp. This can be done in your top-level component where Router is defined by adding the ngOnInit function and subscribing to the Router events as shown in the following example.

import { Component, OnInit } from '@angular/core';
import { Router, NavigationStart } from '@angular/router';

@Component({ selector: 'app', templateUrl: 'app.component.html' })

export class AppComponent implements OnInit {
  constructor(private router: Router) {}

  ngOnInit() {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationStart) {
        strum('routeChange', event.url);
      }
    });
  }
}

Angular.js

If your webapp uses Angular.js 1.x you should add a call to routeChange whenever the route changes in your webapp. To do this you'll need to adjust your client side view inside Angular.js:

$scope.$on('$routeChangeStart', function () {
  strum('routeChange', window.location.href);
});

React

The React integration ties into React Router and tracks calls to routeChange. You should add a call to routeChange whenever the route changes in your webapp. This can be done in your top-level component where Router is defined.

import React from 'react';
import { createBrowserHistory as createHistory } from 'history';

const history = createHistory();

history.listen((location, action) => {
  if (action !== 'REPLACE') {
    strum('routeChange', window.location.href);
  }
})

export default function App() {
  return (
    <Router history={history}>
      ...
    </Router>
  );
}

Vue.js

The Vue.js integration works by watching for calls to the routeChange function where you have the router-view defined.

<template>
  <div id="app">
    <router-view/>
  </div>
</template>
<script>
  export default {
    name: 'app',
    watch: {
      $route() {
        strum('routeChange', document.location.href);  
      }
    }
  }
</script>

Ember

The Ember integrations uses the reopen function to configure a function to trigger every time your application changes routes. This event is called didTransition.

import EmberRouter from '@ember/routing/router';
import { on } from '@ember/object/evented';

EmberRouter.reopen({
  doInformAboutRouteChange: on('didTransition', function() {
    strum('routeChange', window.location.href);
  }),
});

export default Router;

Static websites

Static websites don't require any additional configuration, just add the Experience script to the <head> of your site and you're ready to go!

Server-side rendered websites

Server-side rendered websites don't require any additional configuration either. Add the Experience script to the <head> of your site and you're ready to go!