@funda/tracking v1.0.0

@funda/tracking

@funda/tracking is a Vue.js plugin that provides an API for tracking (via Segment).

Features

• Provided as an npm package to every microfrontend
• Track Segment events for funda

How to use @funda/tracking on your project

Using @funda/shell (Nuxt.js Module)

@funda/tracking works out-of-the-box when you are using @funda/shell.

export default {
    methods: {
        handleClick() {
            this.$fundaShell.tracking.track('Click', {
                title: 'Clicked!',
                page_type: 'listing_results_compact'
            });
        },
    },
    mounted() {
        this.$fundaShell.tracking.track('Funda Shell tracking is loaded', {
            title: 'Funda Shell tracking is finally loaded',
            page_type: 'listing_photos_fullscreen'
        });
    }
};

<template>
  <div>
    <button @click="handleClick('Button is clicked!', {
        title: 'Button is finally clicked',
        course: 'Intro to Button is clicked',
      })">Click me track!</button>
  </div>
</template>

Using @funda/tracking

For any other Vue.js project, you can also install @funda/tracking separately.

import Vue from 'vue'
import FundaTracking, { $fundatracking } from '@funda/tracking'

Vue.use(FundaTracking, {
  writeKey: '####',
  trackingProperties: {
    channel: 'web',
    page_type: 'homepage',
    site: 'funda',
    site_section: 'homepage',
  } 
})

export default {
  name: 'HelloWorld',
  methods: {
    handleClick(title, options) {
      $fundatracking(title, {
        ...options
      });
    }
  },
  mounted() {
    $fundatracking('Funda Tracking demo is loaded', {
      title: 'Funda Tracking demo is finally loaded',
      course: 'Intro: Funda Tracking demo',
      site_locale: 'nl',
      logged_in: true
    });
  }
}

<template>
  <div>
    <button @click="handleClick('Button is clicked!', {
        title: 'Button is finally clicked',
        course: 'Intro to Button is clicked',
      })">Click me track!</button>
  </div>
</template>

Global properties

Segment global properties for Funda. These 8 properties are required whenever segment event is being triggered. The value of these properties can be overwrite according to your project needs.

Passed from trackingProperties, such as:

Vue.use(FundaTracking, {
  writeKey: SEGMENT_WRITE_KEY,
  trackingProperties: {
    channel: 'web',
    page_type: 'homepage',
    site: 'funda',
    site_section: 'homepage',
  }
})

channel The channel Data type: Enum

page_type The page type Data type: Enum

site The site Data type: Enum

site_section The section of the website Data type: Enum

Passed from defaultTrackingValues on index.js

full_path The full path of the page the user is on Data type: String (null allowed)

full_url The full url of the page the user is on Data type: String (null allowed)

Passed dynamically per event

logged_in True if the user is logged in, false if the user is not logged in Data type: Boolean

site_locale The language settings Data type: Enum

Ownership

This codebase is owned by Team Accounts

For questions about this codebase contact devteam-accounts@funda.nl