Giter Site home page Giter Site logo

vsf-mouseflow's Introduction

Vue Storefront Mouseflow module

Mouseflow integration for vue-storefront, by Chirag Viradiya.
Mouseflow account required (free trial is available)

Intergration with the Mouseflow you can easily track your website for your Vue Storefront, this Mouseflow module is configured to track your custom actions with your website, this allows you to accurately help you to judge marketing way, knowing which page got more hit.

Heatmap

Installation:

1. Clone the repository

Clone the vsf-mouseflow repository into your VSF installation.

$ git clone [email protected]:cnviradiya/vsf-mouseflow.git vue-storefront/src/modules/mouseflow

2. Add the module config to your local VSF configuration file.

Add the following JSON config snippet into your desired config, eg. config/local.json

"mouseflow": {
  "website_id": false,
  "cross_domain": true
}

Replace the website_id parameter with the Website ID provided by Mouseflow. You can find your Mouseflow Website ID here: http://help.mouseflow.com/knowledge_base/topics/how-do-i-find-my-mouseflow-site-id. Setting website_id to false will disable the mouseflow module at runtime.
Valid website_id example: "website_id": "12345678-abcd-1234-abcd-1234567890ab"

Here also available option to track your cross domains with different or same urls, you just need to configure in config/local.json. You can find more detail about cross domain tracking with mouseflow here: http://help.mouseflow.com/knowledge_base/topics/cross-domain-tracking. Setting cross_domain to false will disabled cross domain tracking with mouseflow.
Enable cross domain: "cross_domain": true Disable cross domain: "cross_domain": false

3. Register the Mouseflow module

Open up your ../vue-storefront/src/modules/index.ts and add the following code. Adding it inside this file the registers the module so it can be used in your Vue Storefront.

import { Mouseflow } from './mouseflow'
...
export const registerModules: VueStorefrontModule[] = [
...
Mouseflow
...
]

3. Enjoy!

Thats it! It's easy, plug and play! If you havn't got an Mouseflow account already, you can create one here, there is free tier that you can use to get started: https://www.mouseflow.com/pricing

Customization

Replacing the Mouseflow Script.

If you need to change the Mouseflow script that is loaded on the page, open up the ./mouseflow/hooks/afterRegistration.ts file. On line 40 you'll find the script provided from Mouseflow, you can swap this out or extend it as required.

vsf-mouseflow's People

Contributors

cnviradiya avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  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.