{"metadata":{"image":[],"title":"","description":""},"api":{"url":"","auth":"required","params":[],"results":{"codes":[]},"settings":""},"next":{"description":"","pages":[]},"title":"JavaScript","type":"basic","slug":"javascript-sdk","excerpt":"","body":"## Instalação\n\nPara instalar a Dito em sua aplicação, cole o código abaixo antes de fechar a tag `<body>`.\n\nEste código deve ser colocado em todas as páginas da sua aplicação.\n\nObs.: O SDK é carregado de forma assíncrona, sem impactar o carregamento da sua aplicação.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script>\\n    (function(d,e,id){\\n      window.dito={};window._ditoTemp=[];\\n      dito.generateID=function(str){return'_dito_sha1_'+str;}\\n      var m=['init','identify','alias','unalias','track'],s=d.createElement('script'),\\n      x=d.getElementsByTagName(e)[0];s.type='text/javascript';s.async=true;s.id=id;\\n      s.src='//storage.googleapis.com/dito/sdk.js';x.parentNode.insertBefore(s,x);\\n      for(var i=0;i<m.length;i++){dito[m[i]]=function(i){\\n      return function(){_ditoTemp.push({methodName:m[i],params:arguments});}}(i)}\\n    })(document,'script','dito-jssdk');\\n\\n    dito.init({\\n      apiKey: 'API_KEY'\\n    });\\n  </script>\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"O JavaScript SDK da Dito é identificado pela variável `dito`.\"\n}\n[/block]\n## dito.identify()\n\nO método `dito.identify()` é usado para identificar os usuários que estão logados em sua aplicação e deve ser utilizado após o `dito.init()`.\n\nO nó `data` é reservado para as informações personalizadas dos usuários e relativas a sua aplicação, você pode enviar quantos atributos quiser. Estes atributos podem ser utilizados para filtrar seus usuários dentro da plataforma.\n\nNote que os atributos do tipo data devem ser enviados em um dos [formatos suportados](doc:formato-de-datas).\n\nO método de identify é um método assincrono. Ele vai colocar a request de indentificação do usuário em uma fila, para que em eventuais falhas de rede possa se ter a oportinudade de enviar a request novamente.\n\nExemplo:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"dito.identify({\\n  id: dito.generateID('marcos:::at:::example.com'),\\n  name: 'Marcos Nogueira',\\n  email: '[email protected]',\\n  gender: 'male',\\n  location: 'Belo Horizonte',\\n  birthday: '1990-02-15',\\n  data: {\\n    cpf: '101.032.076-95',\\n    cargo: 'Desenvolvedor'   \\n  }\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"danger\",\n  \"title\": \"ATENÇÃO!\",\n  \"body\": \"Os nomes das propriedades dos usuários enviados dentro do nó *data* **DEVEM** estar em letras minúsculas, sem acentuação ou caracteres especiais. Caso o nome de suas propriedades seja composto por mais de uma palavra, estas devem ser separadas por underscore '_' no padrão snake case.\\n\\n**Exemplo:**\\nminha_propriedade_1\\nminha_propriedade_2\"\n}\n[/block]\n## dito.alias()\n\nO método `dito.alias()` é usado para associar contas ao usuário logado em sua aplicação e deve ser utilizado após o `dito.identify()`.\n\nExemplo:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"dito.alias({\\n  portal: {\\n    id: 'ID_DO_USUARIO_A_SER_ASSOCIADO'\\n  }\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n## dito.unalias()\n\nO método `dito.unalias()` é usado para remover a associação de uma conta do usuário logado em sua aplicação e deve ser utilizado após o `dito.identify()`.\n\nExemplo:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"dito.unalias({\\n  portal: {\\n    id: 'ID_DO_USUARIO_A_SER_DESASSOCIADO'\\n  }\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n## dito.track()\n\nO método `dito.track()` é usado para acompanhar o comportamento dos usuários na forma de eventos em sua aplicação e deve ser utilizado após o `dito.identify()`.\n\nO nó `data` é reservado para as informações do evento, você pode enviar quantos atributos quiser. Estes atributos podem ser utilizados para filtrar seus usuários dentro da plataforma.\n\nNote que os atributos do tipo data devem ser enviados em um dos [formatos suportados](doc:formato-de-datas).\n\nO método track é um método assincrono. Dessa forma toda vez que ele é chamado, é adicionado um elemento a uma fila e em sequência essa fila é executada, se o usuário for identiifcado. Esse comportamento tem dois propositos:\n1 - em enventuais falahs de rede, haverem outras tentativas.\n2 - em momentos em que ainda não se sabe, quem é o usuário que está nevagando (ainda não houve um dito.indentify), os registros de navegação sejam armazenados, até que ele seja identificado.\n\nExemplo:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"dito.track({\\n  action: 'nome-do-evento',\\n  revenue: 5.99, // Opcional\\n  data: {\\n    propriedade_1: 'valor da propriedade 1',\\n    propriedade_2: 'valor da propriedade 2'\\n  }\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"danger\",\n  \"body\": \"Os nomes dos eventos **DEVEM** ser enviados para a Dito em letras minúsculas, sem acentuação ou caracteres especiais. Caso o nome de suas ações seja composto por mais de uma palavra, estas devem ser separadas por hífen '-'.\\n\\nExemplo:\\nmeu-evento-1\\nmeu-evento-2\\n\\nOs nomes das propriedades dos eventos enviados dentro do nó *data* **DEVEM** estar em letras minúsculas, sem acentuação ou caracteres especiais. Caso o nome de suas propriedades seja composto por mais de uma palavra, estas devem ser separadas por underscore '_' no padrão snake case.\\n\\nExemplo:\\nminha_propriedade_1\\nminha_propriedade_2\",\n  \"title\": \"ATENÇÃO!\"\n}\n[/block]\n## dito.api()\n\nA classe `Api` possui 2 métodos: `.get()` e `.post()`. Ambos os métodos aceitam os mesmos parâmetros. Cada um apenas define qual método HTTP será usado na requisição.\n\n### .get()\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"dito.Api.get(module, path[, params, successCallback, errorCallback]);\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n### .post()\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"dito.Api.post(module, path[, params, successCallback, errorCallback]);\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n#### Parâmetros\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Parâmetro\",\n    \"h-1\": \"Obrigatório\",\n    \"h-2\": \"Tipo\",\n    \"h-3\": \"Default\",\n    \"h-4\": \"Descrição\",\n    \"0-0\": \"module\",\n    \"0-1\": \"Sim\",\n    \"0-2\": \"String\",\n    \"0-3\": \"-\",\n    \"0-4\": \"Nome do módulo que a requisição será feita. Acesse a lista de módulos disponíveis\",\n    \"1-4\": \"Path (endereço) da requisição\",\n    \"2-4\": \"Parâmetros da requisição. Se a requisição for do tipo POST, os parâmetros serão enviados no body da requisição. Se a requisição for do tipo GET, os parâmetros serão enviados na querystring da URL\",\n    \"3-4\": \"Função que será chamada quando a requisição terminar com sucesso.\",\n    \"4-4\": \"Função que será chamada quando a requisição terminar com erro.\",\n    \"1-3\": \"-\",\n    \"2-3\": \"null\",\n    \"3-3\": \"null\",\n    \"4-3\": \"null\",\n    \"1-2\": \"String\",\n    \"2-2\": \"Object\",\n    \"3-2\": \"Function\",\n    \"4-2\": \"Function\",\n    \"1-1\": \"Não\",\n    \"2-1\": \"Não\",\n    \"3-1\": \"Não\",\n    \"4-1\": \"Não\",\n    \"1-0\": \"path\",\n    \"2-0\": \"params\",\n    \"3-0\": \"successCallback\",\n    \"4-0\": \"errorCallback\"\n  },\n  \"cols\": 5,\n  \"rows\": 5\n}\n[/block]\n#### Exemplos\n\nBuscando os últimos 3 eventos de 'rate':\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"dito.Api.get('events', '/action/rate', { limit: 3, order: 'desc' }, function(response){\\n  console.log(response.data);\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nCadastrando ou atualizando dados de clientes\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"id = dito.generateID('[email protected]')\\n\\nuser = {\\n  name: 'Dito',\\n  email: '[email protected]',\\n  gender: 'male',\\n  location: 'Belo Horizonte',\\n  birthday: '1993-09-20',\\n  created_at: '2015-06-01 08:23:14 -0300',\\n  data: JSON.stringify(\\n    { \\n      extra: \\\"EXTRA_DATA\\\" \\n    }\\n  )\\n} \\n\\n\\ndito.Api.post(\\n  'login', \\n  `/users/portal/${id}/signup`, \\n  { user_data: JSON.stringify(user) },\\n  (result, request) => {\\n    user.reference = result.data.reference\\n    dito.CurrentUser.set(user)\\n    if (result.data.warning) {\\n      console.warn(result.data.warning)\\n    }\\n  },\\n  (error, request) => { console.error(error) }\\n)\\n\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nEnviando evento\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"if ( dito.CurrentUser.get() && dito.CurrentUser.get().reference ) {\\n  event = {\\n    reference: dito.CurrentUser.get().reference,\\n    action: 'acessou-categoria',\\n    data: {\\n      nome_categoria: 'sapatos'\\n    }\\n  } \\n  \\n  \\n  dito.Api.post(\\n    'events', \\n    `/users/${dito.CurrentUser.get().reference}`, \\n    { event: JSON.stringify(event) },\\n    (events, request) => { console.log(request.response) },\\n    (error, request) => { console.error(error) }\\n  )\\n}\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]","updates":[],"order":0,"isReference":false,"hidden":false,"sync_unique":"","link_url":"","link_external":false,"_id":"5538ff4227f8540d0024f00f","project":"5538fb24dc5dd00d00e1da91","user":"5538fa99545cd90d0011e593","__v":19,"createdAt":"2015-04-23T14:18:42.958Z","githubsync":"","version":{"version":"1.0","version_clean":"1.0.0","codename":"","is_stable":true,"is_beta":false,"is_hidden":false,"is_deprecated":false,"categories":["5538fb25dc5dd00d00e1da95","5538feec27f8540d0024f00e","5547cbd3d3427d0d00cd6e2d","554a574f0b54d30d007fe0f9","55afbdbef202b12100cd9eeb","5c016f198e69b802d4385e25","5c81470b175ad6002457d9fa","5c81472e74fd5a0063420bae","5c81476b2dd69100430ea5a4"],"_id":"5538fb25dc5dd00d00e1da94","createdAt":"2015-04-23T14:01:09.040Z","project":"5538fb24dc5dd00d00e1da91","__v":9,"releaseDate":"2015-04-23T14:01:09.040Z"},"category":{"sync":{"isSync":false,"url":""},"pages":["5538ff4227f8540d0024f00f","554264348aeff51700a20e44","5547c963d3427d0d00cd6e28","5547c9ea70b82f0d0027c312","5547c9fc70b82f0d0027c314","5547ca09d3427d0d00cd6e2a","555cbc2a15a89b0d00c1af58","5566fa95f579050d00c3d63e"],"title":"SDKs","slug":"sdks","order":1,"from_sync":false,"reference":false,"_id":"5538feec27f8540d0024f00e","createdAt":"2015-04-23T14:17:16.792Z","project":"5538fb24dc5dd00d00e1da91","__v":8,"version":"5538fb25dc5dd00d00e1da94"},"parentDoc":null}
## Instalação Para instalar a Dito em sua aplicação, cole o código abaixo antes de fechar a tag `<body>`. Este código deve ser colocado em todas as páginas da sua aplicação. Obs.: O SDK é carregado de forma assíncrona, sem impactar o carregamento da sua aplicação. [block:code] { "codes": [ { "code": "<script>\n (function(d,e,id){\n window.dito={};window._ditoTemp=[];\n dito.generateID=function(str){return'_dito_sha1_'+str;}\n var m=['init','identify','alias','unalias','track'],s=d.createElement('script'),\n x=d.getElementsByTagName(e)[0];s.type='text/javascript';s.async=true;s.id=id;\n s.src='//storage.googleapis.com/dito/sdk.js';x.parentNode.insertBefore(s,x);\n for(var i=0;i<m.length;i++){dito[m[i]]=function(i){\n return function(){_ditoTemp.push({methodName:m[i],params:arguments});}}(i)}\n })(document,'script','dito-jssdk');\n\n dito.init({\n apiKey: 'API_KEY'\n });\n </script>", "language": "javascript" } ] } [/block] [block:callout] { "type": "info", "body": "O JavaScript SDK da Dito é identificado pela variável `dito`." } [/block] ## dito.identify() O método `dito.identify()` é usado para identificar os usuários que estão logados em sua aplicação e deve ser utilizado após o `dito.init()`. O nó `data` é reservado para as informações personalizadas dos usuários e relativas a sua aplicação, você pode enviar quantos atributos quiser. Estes atributos podem ser utilizados para filtrar seus usuários dentro da plataforma. Note que os atributos do tipo data devem ser enviados em um dos [formatos suportados](doc:formato-de-datas). O método de identify é um método assincrono. Ele vai colocar a request de indentificação do usuário em uma fila, para que em eventuais falhas de rede possa se ter a oportinudade de enviar a request novamente. Exemplo: [block:code] { "codes": [ { "code": "dito.identify({\n id: dito.generateID('[email protected]'),\n name: 'Marcos Nogueira',\n email: '[email protected]',\n gender: 'male',\n location: 'Belo Horizonte',\n birthday: '1990-02-15',\n data: {\n cpf: '101.032.076-95',\n cargo: 'Desenvolvedor' \n }\n});", "language": "javascript" } ] } [/block] [block:callout] { "type": "danger", "title": "ATENÇÃO!", "body": "Os nomes das propriedades dos usuários enviados dentro do nó *data* **DEVEM** estar em letras minúsculas, sem acentuação ou caracteres especiais. Caso o nome de suas propriedades seja composto por mais de uma palavra, estas devem ser separadas por underscore '_' no padrão snake case.\n\n**Exemplo:**\nminha_propriedade_1\nminha_propriedade_2" } [/block] ## dito.alias() O método `dito.alias()` é usado para associar contas ao usuário logado em sua aplicação e deve ser utilizado após o `dito.identify()`. Exemplo: [block:code] { "codes": [ { "code": "dito.alias({\n portal: {\n id: 'ID_DO_USUARIO_A_SER_ASSOCIADO'\n }\n});", "language": "javascript" } ] } [/block] ## dito.unalias() O método `dito.unalias()` é usado para remover a associação de uma conta do usuário logado em sua aplicação e deve ser utilizado após o `dito.identify()`. Exemplo: [block:code] { "codes": [ { "code": "dito.unalias({\n portal: {\n id: 'ID_DO_USUARIO_A_SER_DESASSOCIADO'\n }\n});", "language": "javascript" } ] } [/block] ## dito.track() O método `dito.track()` é usado para acompanhar o comportamento dos usuários na forma de eventos em sua aplicação e deve ser utilizado após o `dito.identify()`. O nó `data` é reservado para as informações do evento, você pode enviar quantos atributos quiser. Estes atributos podem ser utilizados para filtrar seus usuários dentro da plataforma. Note que os atributos do tipo data devem ser enviados em um dos [formatos suportados](doc:formato-de-datas). O método track é um método assincrono. Dessa forma toda vez que ele é chamado, é adicionado um elemento a uma fila e em sequência essa fila é executada, se o usuário for identiifcado. Esse comportamento tem dois propositos: 1 - em enventuais falahs de rede, haverem outras tentativas. 2 - em momentos em que ainda não se sabe, quem é o usuário que está nevagando (ainda não houve um dito.indentify), os registros de navegação sejam armazenados, até que ele seja identificado. Exemplo: [block:code] { "codes": [ { "code": "dito.track({\n action: 'nome-do-evento',\n revenue: 5.99, // Opcional\n data: {\n propriedade_1: 'valor da propriedade 1',\n propriedade_2: 'valor da propriedade 2'\n }\n});", "language": "javascript" } ] } [/block] [block:callout] { "type": "danger", "body": "Os nomes dos eventos **DEVEM** ser enviados para a Dito em letras minúsculas, sem acentuação ou caracteres especiais. Caso o nome de suas ações seja composto por mais de uma palavra, estas devem ser separadas por hífen '-'.\n\nExemplo:\nmeu-evento-1\nmeu-evento-2\n\nOs nomes das propriedades dos eventos enviados dentro do nó *data* **DEVEM** estar em letras minúsculas, sem acentuação ou caracteres especiais. Caso o nome de suas propriedades seja composto por mais de uma palavra, estas devem ser separadas por underscore '_' no padrão snake case.\n\nExemplo:\nminha_propriedade_1\nminha_propriedade_2", "title": "ATENÇÃO!" } [/block] ## dito.api() A classe `Api` possui 2 métodos: `.get()` e `.post()`. Ambos os métodos aceitam os mesmos parâmetros. Cada um apenas define qual método HTTP será usado na requisição. ### .get() [block:code] { "codes": [ { "code": "dito.Api.get(module, path[, params, successCallback, errorCallback]);", "language": "javascript" } ] } [/block] ### .post() [block:code] { "codes": [ { "code": "dito.Api.post(module, path[, params, successCallback, errorCallback]);", "language": "javascript" } ] } [/block] #### Parâmetros [block:parameters] { "data": { "h-0": "Parâmetro", "h-1": "Obrigatório", "h-2": "Tipo", "h-3": "Default", "h-4": "Descrição", "0-0": "module", "0-1": "Sim", "0-2": "String", "0-3": "-", "0-4": "Nome do módulo que a requisição será feita. Acesse a lista de módulos disponíveis", "1-4": "Path (endereço) da requisição", "2-4": "Parâmetros da requisição. Se a requisição for do tipo POST, os parâmetros serão enviados no body da requisição. Se a requisição for do tipo GET, os parâmetros serão enviados na querystring da URL", "3-4": "Função que será chamada quando a requisição terminar com sucesso.", "4-4": "Função que será chamada quando a requisição terminar com erro.", "1-3": "-", "2-3": "null", "3-3": "null", "4-3": "null", "1-2": "String", "2-2": "Object", "3-2": "Function", "4-2": "Function", "1-1": "Não", "2-1": "Não", "3-1": "Não", "4-1": "Não", "1-0": "path", "2-0": "params", "3-0": "successCallback", "4-0": "errorCallback" }, "cols": 5, "rows": 5 } [/block] #### Exemplos Buscando os últimos 3 eventos de 'rate': [block:code] { "codes": [ { "code": "dito.Api.get('events', '/action/rate', { limit: 3, order: 'desc' }, function(response){\n console.log(response.data);\n});", "language": "javascript" } ] } [/block] Cadastrando ou atualizando dados de clientes [block:code] { "codes": [ { "code": "id = dito.generateID('[email protected]')\n\nuser = {\n name: 'Dito',\n email: '[email protected]',\n gender: 'male',\n location: 'Belo Horizonte',\n birthday: '1993-09-20',\n created_at: '2015-06-01 08:23:14 -0300',\n data: JSON.stringify(\n { \n extra: \"EXTRA_DATA\" \n }\n )\n} \n\n\ndito.Api.post(\n 'login', \n `/users/portal/${id}/signup`, \n { user_data: JSON.stringify(user) },\n (result, request) => {\n user.reference = result.data.reference\n dito.CurrentUser.set(user)\n if (result.data.warning) {\n console.warn(result.data.warning)\n }\n },\n (error, request) => { console.error(error) }\n)\n", "language": "javascript" } ] } [/block] Enviando evento [block:code] { "codes": [ { "code": "if ( dito.CurrentUser.get() && dito.CurrentUser.get().reference ) {\n event = {\n reference: dito.CurrentUser.get().reference,\n action: 'acessou-categoria',\n data: {\n nome_categoria: 'sapatos'\n }\n } \n \n \n dito.Api.post(\n 'events', \n `/users/${dito.CurrentUser.get().reference}`, \n { event: JSON.stringify(event) },\n (events, request) => { console.log(request.response) },\n (error, request) => { console.error(error) }\n )\n}", "language": "javascript" } ] } [/block]