# Integracion

El proceso de integración se puede dividir en:

Tagging
Instalación Wyleex script
Login
Loginwall
Funnel

# Tagging

Es conveniente marcar todos los artículos del sitio para generar un modelo que nos permita conocer el comportamiento de la audiencia y su consumo de contenidos.

Google Analytics / Tag Manager Las siguientes dimensiones personalizadas (opens new window) son atributos de la página que ofrecen información adicional a Google Analytics.

Dimensión	Descripción
Tipo de página	Si la página es home, sección o artículo.
Tipo de artículo	Diferenciación semántica de los artículos. Ej.: nota periodística, nota patrocinada.
ID artículo	Identificador único del artículo.
Sección / Categoría	La categoría principal del artículo. Ej: “deportes”.
Tags	Las etiquetas o temas que describen al contenido.
Autor	Nombre del periodista o autor principal de la nota.
Tipo de acceso	abierto (free_access), cerrado (premium), normal (metered).
Impresa	Si el artículo proviene de la edición impresa.
Fecha de publicación	Formato dd-mm-YYYY.
Tipo de usuario	anónimo, registrado, suscriptor.
ID usuario	Identificador único del usuario.
Tipo de suscripción	Si el usuario es suscriptor, el tipo de plan o membresía que tiene.

Google Tag Manager (opens new window) resulta una herramienta flexible para concentrar esta información en un sólo lugar y enviarla a Google Analytics.

    <script>
      dataLayer = [{
        'tipoPagina': 'article',
        'tipoArticulo': 'nota',
        'articuloID': '23405',
        'seccion': 'deportes',
        'tags': ['Messi', 'Barcelona', 'Liga Española']
        'autor': 'Pedro Salas',
        'tipoAcceso': 'normal',
        'impresa': false,
        'fechaPublicacion': '2020-02-15',
        'tipoUsuario': 'registrado',
        'tipoSuscripcion': 'Digital Básico'
      }];
    </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

    <!-- Google Tag Manager Script -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-XXXX');</script>
    <!-- End Google Tag Manager Script -->

1
2
3
4
5
6
7

Cxense (opcional)

Cxense recolecta información en dos etapas. La primera a través de un crawler que visita cada página del sitio e indexa su contenido a partir de metatags:

    <meta name="cXenseParse:recs:publishtime" content="2018-12-03T14:42:08Z"/>
    <meta name="cXenseParse:title" content="Título de nota"/>
    <meta name="cXenseParse:description" content="Descripción de la página"/>
    <meta name="cXenseParse:url" content="https://example.com/nota"/>
    <meta name="cXenseParse:pageclass" content="article"/>
    <meta name="cXenseParse:articleid" content="1000"/>
    <meta name="cXenseParse:premium" content="false"/>
    <meta name="cXenseParse:recs:premium" content="false"/>
    <meta name="cXenseParse:tipoarticulo" content="nota"/>
    <meta name="cXenseParse:recs:tipoarticulo" content="nota_periodistica"/>
    <meta name="cXenseParse:category" content="politica"/>
    <meta name="cXenseParse:recs:category" content="politica"/>
    <meta name="cXenseParse:tags" content="tag1"/>
    <meta name="cXenseParse:recs:tags" content="tag1"/>
    <meta name="cXenseParse:tags" content="tag2"/>
    <meta name="cXenseParse:recs:tags" content="tag2"/>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Luego se coloca el script en cada página para medir el comportamiento de los usuarios:

    <!-- Cxense script begin -->
    <script type="text/javascript">
    var cX = cX || {}; cX.callQueue = cX.callQueue || [];
    cX.callQueue.push(['setSiteId', 'ID_SITIO']);
    cX.callQueue.push(['sendPageViewEvent']);
    </script>
    <script type="text/javascript">
    (function(d,s,e,t){e=d.createElement(s);e.type='text/java'+s;e.async='async';
    e.src='http'+('https:'===location.protocol?'s://s':'://')+'cdn.cxense.com/cx.js';
    t=d.getElementsByTagName(s)[0];t.parentNode.insertBefore(e,t);})(document,'script');
    </script>
    <!-- Cxense script end -->

1
2
3
4
5
6
7
8
9
10
11
12
13

# Instalacion Wyleex script

En cada artículo se incluye un objeto de javascript indicando la configuración para el paywall. Las propiedades type y contentType se deben indicar de manera dinámica por el CMS según el tipo y el estado del artículo:

    <script>
        window.paywallConfig = {
            paywallUrl: 'https://suscripcion.example.com',
            cookieDomain: '.example.com', // con punto adelante para permitir sub-dominios
            debug: true,
            loginwallLimit: 20 // Cantidad de notas que dispara loginwall
            allowedContentTypes: ["nota_periodistica","infografia"],
            type: 'metered', // premium, free_access
            contentType: 'nota_periodistica',
         };
    
     (function(d,s,e,t){e=d.createElement(s);e.type='text/java'+s;e.async='async';
     e.src="https://libs.lavoz.com.ar/paywall/MEDIO/pw.js";
     t=d.getElementsByTagName(s)[0];t.parentNode.insertBefore(e,t);})(document,'script');
    </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Wyleex ID El sistema de gestión de usuarios de Wyleex permite convertir sus visitantes anónimos en usuarios registrados mediante un sistema de login y registro intuitivo.

Login propio (opcional) Si el sitio ya cuenta con un sistema de usuarios propio, se debe informar a Wyleex cada vez que un usuario inicia o finaliza sesión en el sitio.

    <script>
      // Notificar inicio de sesión a Wyleex
      paywall.signIn({
        id: '1049875', // requerido
        email: 'example@gmail.com', // requerido
        first_name: 'Juan', // requerido
        last_name: 'Salas', // requerido
        avatar: 'https://example.com/path/to/avatar',
        gender: 'male',
        age: 45,
        phone: '+54351556874',
        roles: []
     });
    </script>
    
    <script>
     // Notificar cierre de sesión a Wyleex
      paywall.signOff();
    </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# Loginwall

Cuando un visitante anónimo llega a un límite de notas establecido por el medio se puede mostrar un muro de login / registro para fomentar la conversión a usuarios registrados. El siguiente código se ejecuta cada vez que el muro de login es alcanzado.

    <script>
      // Debe ir antes de la llamada de "Paywall Script"
      window.paywall = window.paywall || {};
      paywall.queue = window.paywall.queue || [];
      
      paywall.queue.push(['addEventListener', 'loginwall', function (event) {
        // Aquí llaman a su implementación de Loginwall.
      }]);
    </script>

1
2
3
4
5
6
7
8
9
10

# Funnel

En cada paso del usuario por el sistema se envían a GTM los siguientes datos.

    // Wyleex ID
    dataLayer.push({
        'event': 'gaEvent',
        'eventCategory': 'subscriptions',
        'eventAction': 'loginRegister',
        'eventLabel': 'email' // email, google, facebook
    });
    
    // Usuario registrado
    dataLayer.push({
        'event': 'gaEvent',
        'eventCategory': 'subscriptions',
        'eventAction': 'userRegistered',
        'eventLabel': 'email' // email, google, facebook
    });
    
    // Loginwall
    dataLayer.push({
        'event': 'gaEvent',
        'eventCategory': 'subscriptions',
        'eventAction': 'loginwall',
        'eventLabel': 'wyleex-id' // on-site
    });
    
    // Paywall
    dataLayer.push({
        'event': 'gaEvent',
        'eventCategory': 'subscriptions',
        'eventAction': 'paywall',
        'eventLabel': 'metered' // premium, direct 
    });
    
    // Selección pack digital
    dataLayer.push({
        'event': 'gaEvent',
        'eventCategory': 'subscriptions',
        'eventAction': 'subscriptionForm',
        'eventLabel': 'Pack Digital 1' // dinámico por plan
    });
    
    // Checkout Pago
    dataLayer.push({
        'event': 'gaEvent',
        'eventCategory': 'subscriptions',
        'eventAction': 'subscriptionCheckout',
        'eventLabel': 'Pack Digital 1' // dinámico por plan
    });
    
    // Checkout Pago Error
    dataLayer.push({
        'event': 'gaEvent',
        'eventCategory': 'subscriptions',
        'eventAction': 'subscriptionCheckoutError',
        'eventLabel': 'Código de error gateway de pagos'
    });
    
    // Suscripción Exitosa
    dataLayer.push({
        'event': 'gaEvent',
        'eventCategory': 'subscriptions',
        'eventAction': 'subscriptionSuccessful',
        'eventLabel': 'Pack Digital 1' // dinámico por plan
    });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

Una vez que estos eventos llegan a GTM son transmitidos hacia Google Analytics / Cxense con la siguiente forma respectivamente:

`ga('send', 'event', 'subscriptions', 'paywall', 'premium');`

`cX.callQueue.push(['sendEvent','paywall',{label:'premium'},{origin: 'prefix-funnel'}]);`

1
2
3

Evento	Google Analytics Event	Cxense Event
Formulario de login / registro	category: subscriptions acción: loginRegister label: email	google
Registro exitoso	category: subscriptions acción: registerSuccessful label: email	google
Loginwall	category: subscriptions acción: loginwall label: wyleex-id	on-site
Paywall	category: subscriptions acción: paywall label: metered	premium
Paquete seleccionado	category: subscriptions acción: subscriptionForm label: (nombre del paquete)	Event Type: subscriptionForm Group: label Item: (nombre del paquete)
Checkout (detalle antes de pagar)	category: subscriptions acción: subscriptionCheckout label: (nombre del paquete)	Event Type: subscriptionCheckout Group: label Item: (nombre del paquete)
Checkout Error (rechazo cobro)	category: subscriptions acción: subscriptionCheckoutError label: (código error)	Event Type: subscriptionCheckoutError Group: label Item: (código error)
Cobro realizado / Suscripción exitosa	category: subscriptions acción: subscriptionSuccessful label: (nombre del paquete)	Event Type: subscriptionSuccessful Group: label Item: (nombre del paquete)