# Integración

El proceso de integración se puede dividir en:

Introducción
Acceder al administrador
Configuración del script

# Introdución

Google Tag Manager es una herramienta que facilita la gestión de etiquetas de seguimiento en un sitio web. Permite agregar y administrar etiquetas sin necesidad de editar el código. Es flexible, seguro y no ralentiza la carga del sitio. En resumen, simplifica la implementación de etiquetas y mejora el análisis de datos.

# Acceder al administrador

Para acceder al administrador del GTM de su sitio diríjase al inicio del Google Tag Manager.

ScreenShot

Posteriormente en la barra de navegacion izquierda, la opción Etiquetas

ScreenShot

Encontrarás en dicha sesión todas las etiquetas asociadas a su sitio

ScreenShot

Al ingresar a la etiqueta Wyleex Init, encontrarás

ScreenShot

# Configuración del script

A la configuracion del script (Por defecto) lo podemos dividir en 3 partes

Conexión con archivo Pw.js <-- Ver

var promo_amount = 160;
  
var currentURL = window. location. href;
contentType = (currentURL.includes('/suscriptores/'))?"premium":"free_access";

var main = document.getElementById("main");
data_access = main.getAttribute('data-access');
if(!(data_access === null) && data_access.includes('metered') && !currentURL.includes('/suscriptores/')){
  contentType = 'metered';
}  
var subscriptionData = localStorage.getItem("subscription_data_v1.0.0");

var storyBodyBottomCallToAction = document.getElementById('subscription-cta-body-bottom');

window.paywallConfig = {
  paywallUrl: "https://suscripciones.NAME_CLIENT.com.ar/",
  type: contentType,
  contentType: contentType,
  cookieDomain: ".NAME_CLIENT.com.ar",
  debug: true,
  loginwallLimit: 20,
  paywallLimit: 50,
  allowedContentTypes: ["story"]
};
  
window.paywall = window.paywall || {};
paywall.queue = window.paywall.queue || [];

<-- Código retorno HTML -->

paywall.queue.push(["addEventListener", "checked", function(event) {

  if (!paywall.auth.user().subscribed && !paywall.paywall.isNavigationRole()) {
    
  }

  if (paywall.auth.isLogged()) {
    var user = paywall.auth.user();
    
    localStorage.setItem('paywall_user_id', user.id);
    localStorage.setItem('paywall_user_type', 'registrado');
     
    if (user.subscribed){
      localStorage.setItem('paywall_user_type', 'suscripto');
    }else{ 
      
    }
    
    if (subscriptionData === null) {
      paywall.auth.getSubscriptionData();
      console.log('subscription_data not found!');
    } else {
      console.log('subscription_data found!');
    }     

  } else {
    localStorage.setItem('paywall_user_type', 'an�nimo');
    if (subscriptionData) {
      console.log('Remove subscription_data');
      localStorage.removeItem("subscription_data_v1.0.0");
    }

  }
  
}]);

paywall.queue.push(["addEventListener", "loginwall", function(event) {
  console.log("Launch loginwall");
  var currentUrl = window.location.href;
  window.location.href = 'https://suscripciones.NAME_CLIENT.com.ar/id/login?loginwall=true&continue=' + currentUrl;
}]);

(function(d, s, e, t) {
  e = d.createElement(s);
  e.type = "text/java" + s;
  e.async = "async";
  e.src = "https://cdn.wyleex.com/yucatan/pw.js?t=2021.04.34";
  t = d.getElementsByTagName(s)[0];
  t.parentNode.insertBefore(e, t);
})(document, "script");

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

Funciones que retornan codigo HTML para el sitio

function getLoginTemplate(config) {
  return '<a href="' + config.url + 'id/login/?continue=' + config.currentUrl + '" class="nav_link"><button class="btn2">Ingresar</button></a>';
}
  
function getLoginMobileTemplate(config) {
  return '<div><a href="' +config.url + 'id/login/?continue=' +config.currentUrl + '" class="nav_link"><button class="btn2">Ingresar</button></a></div>';
}
  
function getProfileTemplate(config, user) {
  return (
  '<div class="user-container"> <a href="' +config.url+ 'id/perfil/?continue=' + config.currentUrl + '" class="user-profile" title="Mi perfil"><img alt="Mi perfil" class="avatar" style="margin: .5rem" src="' + user.avatar + '" style="width:30px;" /> <button id="profile-btn" class="profile-btn">' + user.first_name + '</button> </a> <a href="https://suscripciones.lacapital.com.ar/id/logout/?continue=' + config.currentUrl + '" id="logout-btn" class="logout-btn"> </a></div>'
  );
}
  
function getProfileMobileTemplate(config, user) {
   return (
     '<div class="user-container-mobile"> <div class="container-mobile"> <a href="' +config.url+ 'id/perfil/?continue=' + config.currentUrl + '"  class="user-profile-mobile" title="Mi perfil"> <img alt="Mi perfil" class="avatar-user" src="' + user.avatar + '"/> </a>   <span id="profile-btn" class="profile-btn">' + user.first_name + '</span> </div> </div>'
  );
}
  
function getLogoutProfileMobileTemplate(config){
  return(
    '<a href="https://suscripciones.NAME_CLIENT.com.ar/id/logout/?continue=' + config.currentUrl + '" class="logout-btn-mobile"> Cerrar sesión </a>'
  );
}
  
function getSubscriptionTemplate(config) {
  return (
    '<a class="nav_link" href="' + config.url + '" title="Subscribite"> <button class="btn">Suscribite por $99' + "</button></a>"
  );
}
  
function getSubscriptionMobileTemplate(config) {
  return (
    '<button class="button button-suscript rounded"><a href="' +
    config.url +
    '" title="Subscribite" class="white">Suscribite' +
    "</a></button>"
  );
}

  
function getAvatarSrc(user) {
  if (user.avatar === '') {
    return 'https://cdnlrv.lavoz.com.ar/img/user/default.jpg';
  }
  
  return user.avatar;
}

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

Estilos CSS para el sitio

<style>
  .user-container{
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
  }
  .user-profile{
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
  }
  
  .user-profile img{
    width: 2.5rem;
    border-radius: 30px;
  }
  
  .user-container-mobile{
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    border-bottom: 1px solid #E8E8E8;
    border-right: 1px solid #E8E8E8;
    padding: 1rem;
  }
  
  .user-profile-mobile{
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
  }
  
   .avatar-user{
    margin: 0.5rem;
    width:5rem;
    height: 5rem;
    border-radius: 30px;
  }
  
  .logout-btn{
    margin: .5rem
  }
  
  .profile-btn{
  font-family: "Arimo",sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #000;
  }
  
  #logout-btn {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M497 273L329 441c-15 15-41 4.5-41-17v-96H152c-13.3 0-24-10.7-24-24v-96c0-13.3 10.7-24 24-24h136V88c0-21.4 25.9-32 41-17l168 168c9.3 9.4 9.3 24.6 0 34zM192 436v-40c0-6.6-5.4-12-12-12H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h84c6.6 0 12-5.4 12-12V76c0-6.6-5.4-12-12-12H96c-53 0-96 43-96 96v192c0 53 43 96 96 96h84c6.6 0 12-5.4 12-12z"/></svg>');
  background-size: contain; 
  background-repeat: no-repeat; 
  padding: 10px;
  }
  
  .logout-btn-mobile{
    margin: .5rem;
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    font-family: "Arimo",sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #000 !important;
    padding: 2rem;
    border-top: 1px solid #E8E8E8;
    border-bottom: 1px solid #E8E8E8;
  }
</style>

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
64
65
66
67
68
69
70
71
72
73
74
75
76