All Projects → netshoes → Lind

netshoes / Lind

Licence: mit
Lind is an open source that allows to create any kind of AB test on your site.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Lind

Particles.js
A lightweight, dependency-free and responsive javascript plugin for particle backgrounds.
Stars: ✭ 1,336 (+630.05%)
Mutual labels:  vanilla-javascript
Sharer.js
🔛 🔖 Create your own social share buttons. No jquery.
Stars: ✭ 1,624 (+787.43%)
Mutual labels:  vanilla-javascript
Rangeslider
Simple, small and fast vanilla JavaScript polyfill for the HTML5 `<input type="range">` slider element.
Stars: ✭ 161 (-12.02%)
Mutual labels:  vanilla-javascript
Datatable
Javascript Plugin for data tables creation
Stars: ✭ 97 (-46.99%)
Mutual labels:  vanilla-javascript
Rallax.js
Dead simple parallax scrolling.
Stars: ✭ 1,441 (+687.43%)
Mutual labels:  vanilla-javascript
Vidar
An extendable video-editing framework for the browser and Node
Stars: ✭ 132 (-27.87%)
Mutual labels:  vanilla-javascript
Float Labels.js
A zero-dependency plugin that applies the float label pattern to a form.
Stars: ✭ 91 (-50.27%)
Mutual labels:  vanilla-javascript
Volt Bootstrap 5 Dashboard
Free and open source Bootstrap 5 Admin Dashboard Template with vanilla Javascript
Stars: ✭ 2,252 (+1130.6%)
Mutual labels:  vanilla-javascript
Vanillajs Deck
A Vanilla.js Single Page App (SPA) slide deck for a presentation about Vanilla.js written with no frameworks.
Stars: ✭ 119 (-34.97%)
Mutual labels:  vanilla-javascript
Draggable
High performance, fully cross browser, full featured drag and drop in a tiny (2k gzipped), dependency-free package
Stars: ✭ 160 (-12.57%)
Mutual labels:  vanilla-javascript
Html5sortable
VanillaJS sortable lists and grids using native HTML5 drag and drop API.
Stars: ✭ 1,384 (+656.28%)
Mutual labels:  vanilla-javascript
A11y accordions
ES5 ARIA Accordion Component
Stars: ✭ 108 (-40.98%)
Mutual labels:  vanilla-javascript
Dev10
🐷 A nifty little app that shows you the top posts on Dev.to in your menubar.
Stars: ✭ 136 (-25.68%)
Mutual labels:  vanilla-javascript
Vanilla Semantic Ui
Semantic UI component framework without jQuery
Stars: ✭ 97 (-46.99%)
Mutual labels:  vanilla-javascript
Mailtoui
A simple way to enhance your mailto links with a convenient user interface.
Stars: ✭ 162 (-11.48%)
Mutual labels:  vanilla-javascript
Nipplejs
🎮 A virtual joystick for touch capable interfaces.
Stars: ✭ 1,313 (+617.49%)
Mutual labels:  vanilla-javascript
The Glorious Startpage
a glorified startpage
Stars: ✭ 127 (-30.6%)
Mutual labels:  vanilla-javascript
Jscolor
JavaScript color picker with opacity (alpha channel) and customizable palette. Single file of plain JS with no dependencies.
Stars: ✭ 182 (-0.55%)
Mutual labels:  vanilla-javascript
Bs Custom File Input
A little plugin for Bootstrap 4 custom file input
Stars: ✭ 162 (-11.48%)
Mutual labels:  vanilla-javascript
Datepickk
Simple, beautiful and powerful datepicker!
Stars: ✭ 160 (-12.57%)
Mutual labels:  vanilla-javascript

O que é o Lind?

Avoid HiPPO. Use Numbers. O Lind é uma ferramenta de teste A/B desenvolvido totalmente com Javascript.

Requisitos

Para rodar o projeto são necessários:

- NODEJS
- NPM
- Gruntjs

Configurando o projeto

Dentro de src/js criar um diretório tests e separar da seguinte forma:

src/js/tests/NOMEDOPROJETO/desktop e src/js/tests/NOMEDOPROJETO/mobile

Obs: Recomendamos a utilização de submodulos para os testes.

Configuração de Testes

É preciso criar um arquivo js que corresponderá aos seus testes dentro do diretório de desktop ou mobile do seu projeto.

Exemplo:

Arquivo: testExample.js

tests.testExample = {
  name: "Teste Exemplo",
  audience: 50,
  exception: null,
  triggerEvent: null,
  createdAt: 20170620,
  variants: {
    variantA: {
      name: "Teste Exemplo Padrão",
      audience: 50,
      method: function() {
        // Seu código vai aqui
      }
    },
    variantB: {
      name: "Teste Exemplo Mudanças",
      audience: 50,
      method: function() {
        // Seu código vai aqui
      }
    }
  }
};

Parâmetros

test.testName {string}

Nome que será utilizado internamente pelo Lind. Utilizar regras de criação de variáveis do Javascript.

// Examples
tests.testExample = {}
tests.changeBg = {}
tests.Hidemodal = {}

name {string}

Nome do teste que será utilizado para exibição.

name: "Teste Exemplo"

audience {integer}

Numero da audiência que será aplicada no teste. Números de 0 a 100.

audience: 50

Obs: Somados com os outros testes não devem ultrapassar 100.

exception {null|function}

Regras de aplicação de teste. Caso retorne false o usuário será excluído do cenário de testes. Aguardando o tempo do cookie de limbo para ser novamente elegível a outro teste.

// Null
exception: null

// Function
exception: function() {
  // Code here
}

// Sempre deve retornar TRUE ou FALSE

rule {null|function}

Determina a regra de acionamento da varição do teste. Enquanto false, o usuário não verá nenhuma variação do teste permanecendo com cookie de delayed. Caso retone true, ele será sorteado para as variações do teste.

// Null
rule: null // Retorna true para todos os casos



// Function
rule: function() {
  return !!document.querySelector('.breadcrumb');
};

createdAt {integer}

Data em que o teste foi criado. Número inteiro no formato AAAAMMDD

createdAt: 20170620

Variações

Define as possibilidades dentro de um teste, onde cada variação é um bloco de código que será executado quando sorteado levando em conta sua audiência.

// Exemplo
...
variants: {
  variantA: {
    name: "Teste Exemplo Padrão", // Nome da variação do teste.
    audience: 50, // Audiência da variação do teste.
    method: function() {
      // Seu código vai aqui
    }
  },
  variantB: {
    name: "Teste Exemplo Mudanças",
    audience: 50,
    method: function() {
      // Seu código vai aqui
    }
  }
}
...

Caso seja necessário inserir mais variações no teste, deve-se incluir mais opções:

// Exemplo
variants: {
  variantA: {
    audience: 25
  },
  variantB: {
    audience: 25
  },
  variantC: {
    audience: 25
  },
  variantD: {
    audience: 25
  }
}

Obs: Somadads as variações de um teste não devem ultrapassar 100.

Como usar

No diretório do projeto execute o comando:

$ npm install

Arquivos de desenvolvimento

Antes se iniciar o desenvolvimento executar o comando:

$ grunt core

Desktop

Para gerar a versão de desenvolvimento desktop execute:

$ grunt desktop --project=NOMEDOPROJETO

Mobile

Para gerar a versão de desenvolvimento mobile execute:

$ grunt mobile --project=NOMEDOPROJETO

Será gerado o diretório dist/ e será iniciado a task de watch para desenvolvimento e ao mesmo tempo um servidor local apontando para a raiz da aplicação (Ver uso de proxy).

Arquivos de produção

Para gerar a versão de produção mobile e desktop execute:

$ grunt build --project=NOMEDOPROJETO

Com esse comando serão gerados no diretório dist os arquivos para utilização em ambiente de produção. Sendo: lindm.min.js para versão mobile e lindd.min.js para versão desktop.

Configurações do FTP

Subindo para o FTP:

Para realizar o upload automático para o servidor é necessário configurar na raiz do projeto o arquivo .ftpauth.

{
    "production":{
        "username":"NOMEDOUSUÁRIO",
        "password":"SENHADOUSUÁRIO!"
    }
}

Também é preciso configurar o config.js na raiz do projeto com os diretórios do projeto no FTP:

module.exports = {
  ftp_push_config: { // Configurações do FTP
    staging: {
      authKey: "staging",
      host: "lind.github.io",
      dest: "lind/staging/dist/",
      port: 21,
    },
    production: {
      authKey: "production",
      host: "lind.github.io",
      dest: "lind/prod/dist/",
      port: 21,
    }
  }
};

Para funcionar corretamente é preciso que o usuário possua permissão para modificar o diretório do Lind.

É preciso criar arquivo .ftpauth com os acessos do FTP. Utilize o modelo do .ftpauth.example como modelo.

Comandos

grunt build:prod --project=NOMEDOPROJETO || grunt build:staging --project=NOMEDOPROJETO

Configuração do Dashboard:

É preciso realizar a configuração do path de js do dashboard em /src/js/core/config.js:

var CONFIG = {
  "cookieName": "lind_",
  "sortEmptyName": "withoutTest",
  "dashUrl": "" // URL do dash
};
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].