Sumario general:
La integración consiste en la inclusión de un JavaScript tag que permite adquirir las intenciones de los usuarios durante la navegación en vuestra página web. El snippet está formado por 2 partes:
- El loader: Una librería JavaScript que ha de ser cargada en cada página. Es requerido para que interactúe con los otros snippets y los servidores de Transactionale y para habilitar el IU para los usuarios finales.
- El tracker: permite trackear los diferentes eventos que ocurren durante la navegación de los visitantes (productos que ven o compran) y los usaremos para hacer las mejores recomendaciones targuetizadas.
Implementar el tracker es rápido, simple e invisible para los usuarios. La calidad de nuestras recomendaciones depende directamente de la calidad de la implementación de este tracker, incluyendo la instalación del tag en cada página, dar todos los parámetros disponibles, etc.
El tag:
- No altera de ninguna manera la visión de la página y es invisible para los usuarios.
- Es asincrónico y no ralentiza al cargar la página.
- Debe ser integrado en las partes correctas de las de la página de vuestra web.
Pon el loader tag en todas las páginas
El loader tag va en <head> de tu plantilla base.
<script>
window._trx = window._trx || [];
window._trx.push(
{ event: 'setAccount', account: '**API-KEY**', country: 'ES' },
{ event: 'viewPage' }
);
</script>
<script src="https://static.transactionale.com/trx/v2/trx.js" async="true"></script>
Pon trackTransaction en la página de confirmación de pedido:
Este tag debe ser insertado preferiblemente antes de cerrar </body>, o en cualquier caso después del loader dentro del tag <head>. Debes rellenar tantos campos como puedas con los valores necesarios relativos a la orden presentada.
window._trx.push(
{
event: 'trackTransaction',
transaction: {
id: 'xxxxx', // número de orden
subtotal: xxx.xx,
shipping: xxx.xx,
discount: xxx.xx,
total: xxx.xx, // requerido
coupon: 'xxx',
currency: 'EUR', // EUR por default
},
items: [
{id: x, price: xx.xx, quantity: x},
{id: x, price: xx.xx, quantity: x},
],
address: {
address: 'xxxxxx',
address2: 'xxxxxx',
city: 'xxxxx',
postalCode: 'xxxxx',
country: 'ES',
phone: 'xxxxxxxx',
phoneMobile: 'xxxxxxxxx',
},
customer: {
firstName: 'Xxxxx',
lastName: 'Xxxxxxx',
company: 'xxxxxxxx',
email: 'xxxxx@xxxx.xx',
birthDate: 'yyyy-mm-dd',
gender: 'x', // M o F
optin: xxxx // si los usuarios optan por recibir ofertas comerciales
},
// ejemplo de integración de ads directamente en la página web
touchpointType: 'auto',
}
);
<div id="tr_touchpoint_container"></div>
Selección del touchpoint automático
Configurando auto como touchpointType, el mejor touchpoint será activado automáticamente en concordancia con los valores aportados.En caso de que el touchpoint de la web sea activado sin aportar touchpointId, será usado el que hay por default.
Web y auto touchpoints
Si estás usando una web (ó auto) touchpoint, debes definir dónde quieres que aparezcan las ofertas en tu página. Para hacerlo, inserta <div id="tr_touchpoint_container"></div> en el lugar escogido.
Ofertas con banner
Si quieres usar la versión banner en tu touchpoint web, tienes 2 disposiciones disponibles para elegir: Horizontal (por defecto) o vertical.
Puedes activar la disposición vertical añadiendo tr-touchpoint-layout-vertical class al <div> de esta manera:
<div id="tr_touchpoint_container" class="tr-touchpoint-layout-vertical"></div>
El banner se verá de una manera similar a esta:
Verificar la integración y webhook
Puedes mirar que funcione correctamente la integración tecnológica y el webhook url a través de estas instrucciones sencillas: