## TL;DR:
I built a small (1.5kb) and performant event tracking library, that lets you connect with any tracking provider (GA, MixPanel, etc) with its simple API.

- Demo: https://codesandbox.io/embed/sharp-rain-jr0m6?fontsize=14
- Library: https://www.npmjs.com/package/treacker
- Docs: https://github.com/Badiapp/treacker

## Why another tracking library

Tracking solutions like [React tracker](https://github.com/faouzioudouh/react-tracker#readme) or [React tracking](https://github.com/nytimes/react-tracking) solve the tracking the challenge coming for a perspective that data is present at the moment the tracking event is being triggered, meaning that the data needed to track an event is available from time 0.

Which in reality it's not. Let's see the following example:

``` jsx
const Component = ({ userId, roomId }) => {
  const tracking = useTracking()
  useEffect(() => {
    tracking.trackEvent({ action: 'invite_sent', userId, roomId })
  }, [])
  
  // the rest of my component
}
```

But, what if because of the architecture of the application, the asynchronous nature of nowadays applications (or any other reason)the `userId` or `roomId` values are not available when mounting the component, the tracking event won't report the correct data.

Having a condition could fix the problem:

``` jsx
const Component = ({ userId, roomId }) => {
  const tracking = useTracking()
  useEffect(() => {
    if(!userId || !roomId) return
    tracking.trackEvent({ action: 'invite_sent', userId, roomId })
  }, [userId, roomId])
  
  // the rest of my component
}
```

But I will need to do this do it over and over across the application, this starts to be unmaintainable and too verbose. Instead, what if there could be a way to let the "tracking system" manage that for us, what if the data integrity is part of the responsibilities of this "tracking system".

## The proposal

I want to create a tool that:
- Works with vanilla JS and React is just an abstraction, so it's not dependant of React architecture constraints.
- Its responsibility is to ensure the tracking data integrity
- Provides a declarative interface
- It is agnostic of the transport service is used on the project to track the events
- Has a simple, yet powerful interface

## Say hello to Treacker

(Tracking + React) = Treacker 🤯

Treacker takes the following assumptions on the application architecture:
- The part of the code in which the "tracking provider" is declared knows about the base data that will need to be tracked (ex. userId, userRole, appVersion), let's say, the global/high-level data


Said that let's see how it works:
1. Declare a `TrackingProvider`
2. Everything you want to track should be inside the Provider tree
3. Access the provider either using `TrackingContext` or `useTracking` hook

## Demo
{% codesandbox sharp-rain-jr0m6 %}

## Example
- I have will request `getRooms` and received as a list `rooms` as props, in which I will track the mounting of each room on the list
- I have a component that will show info on a user called `UserComponent` that will be shown after doing a request to the server in which I will track when mounting

``` js
import { useState, useEffect } from 'react'
import { TrackingProvider } from 'treacker'

import UserComponent from './user-component'
import Room from './room'

const INITIAL_PARAMS = {
  locale: 'en',
  app_version: 1
}

const handleOnTrackingEvent = event => {
  // do stuff when the event has been fired.
  // like reporting to Google Analytics or Mixpanel
  // signature { eventName, params, timestamp }
}

const Layout = ({ getUser, getRoom, rooms }) => {

  const [ready, setReady] = useState(false)
  const [params, setParams] = useState(INITIAL_PARAMS)
  useEffect(() => {
    getUser().then((user) => {
      // update the parameters for the provider
      setParams(state => ({
        ...state,
        userRole: user.role,
        userId: user.id,
      })
      setReady(true)
    })

    getRoom()
  }, [])
  return (
    <TrackingProvider params={params} onTrackingEvent={handleOnTrackingEvent} isReady={ready}>
      <UserComponent {...user} />
      {
        rooms.map(room => <Room {...room} />)
      }
    </TrackingProvider>
  )
}
```

The `UserComponent`:
``` js
import { useEffect } from 'react'
import { useTracking } from 'treacker'

const UserComponent = () => {
  const tracking = useTracking()
  useEffect(() => {
    tracking.track('user-component.loaded')
  }, [])

  return (
    // ... the component implementation
  )
}
```


Then the room component:

``` js
import { useEffect } from 'react'
import { useTracking } from 'treacker'

const Room = ({ roomId }) => {
  const tracking = useTracking()
  useEffect(() => {
    tracking.track('room.loaded', { roomId })
  }, [])

  return (
    // ... the component implementation
  )
}
```

## So what's happening here?
- `TrackingProvider` has 3 main props:
1. `onTrackingEvent`, which will be invoked each time there is a tracking event
2. `params`, this is going to be the global parameters that will be sent with each event
3. `isReady` is the flag that will let know when it's "safe" to dispatch the events

For more info on how the event signature looks like, [check the docs](https://github.com/Badiapp/treacker#track).

Even if the data is not ready, for example like `UserComponent` that mounts before fetching the userData, the events stay in a queue and are dispatched only after knowing that is safe by the `isReady` flag on `TrackingProvider`.

## More about the interface

### withTracking
The library exposes also a [HOC `withTracking`](https://github.com/Badiapp/treacker#hoc) which is useful when the component is not part of the `TrackingProvider` tree.

### registering listeners
In case you need to register more event listeners to the trackingProvider, it's possible using [`registerListener`](v#registering-event-callbacks).

## Final words
I found the approach to be useful in my use case and that's why I thought to share it, hopefully it will be useful for you too!


[Check the docs](https://github.com/Badiapp/treacker#docs) for more details, or the demo in [codesandbox](https://codesandbox.io/s/sharp-rain-jr0m6?fontsize=14).


Treacker, a tracking library for React

En julio, lanzamos públicamente el primer experimento de Typeform en el equipo de exploración e innovación. Una nueva interfaz para recolectar datos o simplemente interactuar de forma contextual con tu audiencia.

## Hola CUI

CUI es Conversational User Interace y nació hace un año y medio por un experimento en el equipo de marketing donde era Tech Lead. El proyecto salió muy bien, y decidimos hacerlo un producto.

<Cui uid="N8CVgq" theme="#cb3837" height="400px" />

## Por qué en React

Es muy sencilla la respuesta, mi sitio web está en [hecho en React](https://jepser.com/articles/de-wordpress-a-un-sitio-estatico/) y quería agregra el CUI en uno de mis artículos.

Es por eso que ahora puedes usar `react-cui` en tus sitios web.

- Este es el repo: [https://github.com/jepser/react-cui](https://github.com/jepser/react-cui)
- Este es el paquete: [https://www.npmjs.com/package/react-cui](https://www.npmjs.com/package/react-cui)

React CUI

WooCredomatic es un plugin de WordPress que integra Credomatic & WooCommerce, y funciona en toda Centro América, Guatemala, El Salvador, Nicaragua y Costa Rica. 

El plugin está probado en **WooCommerce 5.0+** y funciona con la mayoría de tarjetas de crédito y débito.

``` cta
[Comprar plugin](https://jepser.typeform.com/to/FZmEKP)
```

## ¿Por qué WooCredomatic?

*   Funciona en toda Centro América (Guatemala, Honduras, Nicaragua, El Salvador y Costa Rica)
*   Soporta la moneda local de cada país (Quetzal, Lempira, Córdoba, Dólar y Colón)
*   Instala, agrega tu key y secret  de Credomatic, configura tu moneda y empieza a vender
*   Soporta e-Socket y 3D Secure, así que cual sea tu cuenta de Credomatic, estás cubierto
__*   Soporta el nuevo requerimiento de Credomatic: Browser redirect __
*   Si usas 3D Secure, __Verify by Visa__ y __Credomatic SecureCode__ hacen más segura tu tienda; pues previenen fraudes y el seguro para comerciantes está cubierto

## ¿Qué necesito para utilizar WooCredomatic?

*   **Cuenta de Credomatic**, en el panel de administración de tu cuenta, tendrás el key y secret necesarios para configurar el plugin
*   **Sitio web con certificado de seguridad (SSL, TLS 1.2)**, de no tenerlo el plugin funciona pero Credomatic no te asegurará si una de tus transacciones es fraudulenta
*   **Licencia activa**, el plugin funcionará pero al no estar activada, las actualizaciones que aseguran seguridad y compatibilidad no estarán disponibles

## Elige la licencia que te convenga

*   __Personal: 1 sitio - $150__ - si es para tu tienda, ideal para entrepeneurs y startups
*  __Developer: 3 sitios - $350__ - si eres developer y deseas revender la licencia

La licencia tiene validez de un año después de que la compras y es de pago anual.

Renovando la licencia aseguras que el plugin funcione para versiones futuras de [WordPress][1] y de [WooCommerce][2], además apoyas al desarrollador (o sea a mi! 🍺).

``` cta
[Comprar plugin](https://jepser.typeform.com/to/FZmEKP)
```

## Screenshots

![Panel de Ajustes](//images.contentful.com/byi1r1jyqvnm/1cs2D9KtpoQsy68o2QES48/27366e1a4c4c2aefb6438853ccb68b73/wc-ajustes-1.jpg)

![Panel de ajustes y habilidad de aceptar solo ciertas tarjetas](//images.contentful.com/byi1r1jyqvnm/1TXbZyDDOEeaKi6SYSQMWQ/62331189de676578a6e690eb4c676465/wc-ajustes-2.jpg)

![Interfaz de pasarela de pago](//images.contentful.com/byi1r1jyqvnm/Tg7u7ZZHgGQ8EmOqUG6Is/98daeab03fa45fa6d570a0b6c2582c6c/wc-tarjeta.jpg) 

![Dinámicamente muestra que tipo de tarjeta es](//images.contentful.com/byi1r1jyqvnm/2nTISh4LVWC6oEgG4YQKO4/eeadbc7db1992442bcca9629be2dddf4/wc-tarjeta-2.jpg)

## Preguntas Frecuentes

**¿Funciona para todos los países de Centro América?**

Si, he hecho pruebas en Guatemala y Costa Rica, pero el sistema es el mismo en los otros países por lo tanto, funcionará en Guatemala, Honduras, El Salvador, Nicaragua y Costa Rica.

**¿Cuándo un cliente paga usando WooCredomatic, cómo es el proceso?**

Todo el proceso de pago ocurre dentro de sitio, y solo irá a otra pantalla fuera de tu sitio si [Verify by Visa][3] o [Mastercard SecureCode][4] están configurados en la tarjeta de tu cliente (el plugin soporta estas verificaciones de seguridad si 3DSecure está configurado) y dependiendo la respuesta de Credomatic (si es declinada o aceptada) el servicio así se procederá a la página de finalización de compra o te pedirá que revises los datos de compra.

**¿Soporta e-Socket y 3D Secure?**

El plugin cuenta con opción para procesar los pagos con e-Socket o 3D Secure, y esto lo configuras en la pantalla de administración del plugin. Dependiendo tu tipo de cuenta tendrás diferentes opciones.

**Me dicen sobre Browser redirect, lo soporta?**

El plugin soporta Browser redirect, y solo selecciona la opción el plugin y listo!

**¿Qué pasa si no renuevo la licencia?**

La licencia tiene validez de 1 año, esta asegura las actualizaciones del plugin y nuevas características. Si no renuevas puedes seguir utilizando el plugin pero ya no te tendrás las actualizaciones; esto puede afectar la compatibilidad con nuevas versiones de WordPress o WooCommerce, y si existe una actualización de seguridad harás vulnerable tu tienda si no actualizas.

**¿Por qué no usas Credomatic en tu sitio web?**

Dado a que no soy una empresa, no tengo una afiliación con Credomatic. La compra de tu licencia es procesada por Stripe, pero se hace por medio de cualquier tarjeta de crédito o débito.

**¿Qué diferencia hay con otros plugins que hacen los mismo?**

El plugin lo desarrollé inicialmente para un cliente, sin embargo me di cuenta que es una necesidad común vender tus productos por WooCommerce y querer recibir el dinero directamente a tu cuenta. 

El plugin lo creé teniendo en mente lo que necesitaría como usuario y programador. Por ello encontrarás funcionalidad para desarrolladores y una forma sencilla de configurar el plugin para usuarios finales, como características esenciales en el plugin.

**¿Soporta también Visa?**

Los pagos con tarjeta Visa son soportados por Credomatic y son procesados por BAC. Por lo que tienes que tener una cuenta con ellos para poder utilizar el plugin.

**¿Cómo consigo mi KEY & SECRET de Credomatic?**

Este es un proceso que tienes que ver tu directamente. Si ya tienes una terminal POS para tu negocio, no es más difícil de solicitar un usuario para ventas en línea. 

En caso no tengas una cuenta de comercion en Credomatic, tendrás que ir a una sucursal a solicitar los requerimientos para tener una cuenta nueva. Lamenteblemente no tengo mucha información y cambia de país en país.

**¿Qué tipo de soporte tiene la licencia?**

Con la licencia, errores que puedan surgir por el plugin están cubiertos. Si al instalar el plugin tu sitio no funciona como antes por ejemplo.

Sin embargo, implementaciones en tu sitio no están incluídas. Un ejemplo podría ser que el plugin al ser instalado en tu sitio web o con ciertos plugins, el este no funcione correctamente.

Si necesitas ayuda para la integración puedes contactarme en la sección de __Contacto__ ☎️.

**¿Existe una política de devolución?**
Si, la idea es que estés feliz con tu compra, si en caso no estés completamente satisfecho y deseas una devolución, contáctame dentro de los 15 días después de tu compra, [llenando este formulario](https://jepser.typeform.com/to/eu5cSEFT) contándome cual es el motivo y te haré la devolución.

Ten encuenta que es posible que la devolución no sea el 100% del monto dado al cambio de divisa y gastos de gestión por parte de mi gateway de pago (Stripe).

``` cta
[Comprar plugin](https://jepser.typeform.com/to/FZmEKP)
```

## Hooks

### Filtros

- `woocommerce_credomatic_total_amount` - `$order_total` - Útil si deseas modificar el total del carrito de compras, antes de ser envíado a Credomatic
- `woocommerce_credomatic_form_fields` - `$default_field` - Usado para agregar más campos al formulario que muestras al usuario al pagar con Credomatic
- `woocommerce_credomatic_ws_query` - `$credomatic_query, $order (WC_Order)` - Útil para agregar datos al query que se envía a Credomatic, como segundo argumento está la orden actual de tu carrito como referencia

### Actions
- `woocommerce_credomatic_after_approved`
- `valid-credomatic-request`
- `woocommerce_credomatic_before_redirect`
- `woocommerce_credomatic_after_approved`
- `woocommerce_credomatic_before_thankyou`
- `woocommerce_credomatic_after_denied`

## Changelog

* 1.9 - Añade soporte para impuestos https://woocommerce.com/document/setting-up-taxes-in-woocommerce/ que se envían a Credomatic por medio del parámetro "tax"
* 1.8 - Probado con WooCommerce 5+ and WordPress 5.6, soporte para definir un procesador en caso tu cuenta tiene más de uno y browser redirect
* 1.7 - Revisadas la compatibilidad con WooCommerce 4+ y WordPress 5+
* 1.6 - Agregan nueva validación para Amex y Mastercard, y PSR complainant 
* 1.5 - Se agregan nuevos filtros y actions, mejoras visuales, más seguridad y opción de aceptar solo ciertos tipos de tarjeta 
* 1.4.2.2 - Se agrega opción para elegir tipo de transacción (sale, auth) y opción para ingresar "Processor ID" en el caso que la cuenta sea e-Socket
* 1.4.0 - Opción para crear transacción Offsite, esto ayuda a la seguridad solicitada por Credomatic
* 1.3.4 - Agregué el modo depurador, este muestra un print\_r de la respuesta para un mejor control de lo que está pasando (esto solo para fase de desarrollo
* 1.3.3 - Arreglo de redirect
* 1.3.2 - Agregué .PO y traducción en Español
* 1.3.1 - Error en URL de transacción 1.3 - Ahora es compatible con e-Socket y 3D Secure
* 1.2 - Se agregan las monedas para toda Centro América
* 1.1 - Se optimizó para WooCommerce 2.0+ (no tiene compatibilidad para WooCommerce con versiones anteriores)
* 1.0 - Primera versión, soporta 3D Secure

``` cta
[Comprar plugin](https://jepser.typeform.com/to/FZmEKP)
```

¡Un abrazo desde Barcelona!

[1]: http://wordpress.org
[2]: http://www.woothemes.com/woocommerce/
[3]: http://lac.visa.com/personas/seguridad/vf/
[4]: https://www.mastercard.us/en-us/consumers/payment-technologies/securecode.html
[5]: http://jepser.com/idea/woocommerce-credomatic-1-5/

Integra Credomatic en tu tienda en línea de una forma fácil y segura. El plugin is compatible con WooCommerce de WordPress.

WooCommerce Credomatic - Plugin Gateway de Pago

En un proyecto me solicitaron poder tener post que pudieran ser distintos a los demás, que no dependían de una categoría, es allí donde Custom Post Template (que aunque tiene algún tiempo sin actualización no necesita actualizase pues funciona) como plugin nos ayuda, sin embargo como fan de ACF integré estos dos plugins para poder funcionar juntos. El resultado es un plugin funcional gratuito!

Advanced Custom Field y Custom Post Template Addon Plugin

## Por qué lo hice

Estaba sentando junto a mi socio y mejor amigo, Javier Castillo una tarde de cervezas viendo videos de youtube por el Chromecast, queriendo replicar las playlists no encontramos un servicio que lo hiciera de la forma que queríamos, fácil y rápido.

## Como funciona

- Visita el [url del proyecto](https://spotify-youtube.jepser.com)
- Accede con tu cuenta de Spotify para poder obtener tus playlists.
- Elige la playlist que desees exportar, puedes remover canciones si deseas.
- Presiona "Search on Youtube", y aparecerán 5 videos en orden de relevancia por cada canción, elige la que te vaya mejor.
- Presiona "Export playlist", autentica tu cuenta de Google (para Youtube) y en unos segundos tienes tu playlist.

**¡Fácil, rápido, seguro y gratis!**

Free Spotify-Youtube Playlists Converter

Desde que empecé a trabajar en Typeform, me di cuenta la falta de un plugin que ayudara a integrar los typeforms al contenido de WordPress, y simple como esto; nació el plugin.

*   Podrás agregar typeforms al contenido o widgets
*   Existen 3 tipos de formas de mostrar un typeform
    *   Embed: se incrusta directamente al contenido mostrando el typeform como un iframe
    *   Popup (classic): este es un modal window que se activa por medio de un link o botón
    *   Drawer: este efecto muestra el typeform saliendo como un slide en la parte izquierda de la pantalla
*   Widget, tienes las mismas opciones que en el contenido para agregar tu typeform en tus sidebars registrados
*   **Nuevo! Ahora el plugin soporta Visual Composer**

Nuevos features a integrar:

*   Campo de ACF
*   Traducción al español
*   Addon para Gravity Forms
*   Addon para Contact 7

Para mayor información y soporte visita la [documentación oficial](https://www.typeform.com/help/embed-your-typeform-on-wordpress/). Para descargarlo descárgalo del repo [oficial de WordPress](https://wordpress.org/plugins/typeform/).

Treacker, a tracking library for React

React CUI

WooCommerce Credomatic - Plugin Gateway de Pago

Advanced Custom Field y Custom Post Template Addon Plugin

Free Spotify-Youtube Playlists Converter

Typeform plugin para WordPress