Sun. Nov 3rd, 2024

#GTMTips: Obtenga los tipos de cambio más actualizados para las conversiones del lado del cliente


Ha pasado un tiempo desde la última vez que escribí algo genuino. Administrador de etiquetas de Google trucoasí que aquí viene. Esto se inspiró en la pregunta de Bart Gibby en Medir la holgura.

El propósito es obtener los últimos tipos de cambio de divisas de la exchangeratesapi.io servicio, almacenarlos en caché utilizando sessionStoragey llevar los resultados a dataLayer. De dataLayerLuego, se pueden utilizar en variables de JavaScript personalizadas y plantillas de variables personalizadas para realizar conversiones del lado del cliente. ¡Te mostraré cómo!


X


El boletín informativo de Simmer

Suscríbete a la Boletín informativo de Simmer ¡Para recibir las últimas noticias y contenidos de Simo Ahava en tu bandeja de entrada de correo electrónico!

Consejo 103: Obtenga los tipos de cambio de divisas más actualizados en GTM

La solicitud de API en sí se ejecuta en un Etiqueta HTML personalizada (dado que las plantillas personalizadas aún no admiten solicitudes HTTP arbitrarias), así que continúe y cree una. En la etiqueta, agregue el siguiente código:

<script>
  (perform() {
    // Set expiration to saved cache. Default 24 hours.
    var cacheExpiresHours = 24;
    // Set forex to get charges towards
    var base = 'EUR';
    
    // Don't edit under
    var charges = JSON.parse(window.sessionStorage.getItem('currencyRates') || '{}');
    var now = new Date().getTime();
    var xhr;
    if (!charges.timestamp || charges.timestamp + cacheExpiresHours * 60 * 60 * 1000 <= now) {
      xhr = new XMLHttpRequest();
      xhr.open('GET', 'https://api.exchangeratesapi.io/newest?base=' + base);
      xhr.onreadystatechange = perform() {
        if(xhr.readyState === XMLHttpRequest.DONE) {
          charges = JSON.parse(xhr.responseText).charges;
          charges.timestamp = now;
          sessionStorage.setItem('currencyRates', JSON.stringify(charges));
          window.dataLayer.push({
		    occasion: 'exchangeRates',
		    charges: charges,
            ratesType: 'contemporary'
          });
        }
      };
      xhr.ship();
    } else {
      window.dataLayer.push({
      	occasion: 'exchangeRates',
        charges: charges,
        ratesType: 'cached'
      });
    }
  })();
script>

Modificar el cacheExpiresHours para determinar durante cuánto tiempo se deben almacenar en caché los tipos de cambio en el navegador. Si no desea almacenarlos en caché, configúrelo en 0Esto obtendría las tarifas más recientes con cada carga de página.

Recomendaría utilizar un caché. La API es un servicio gratuito y lo es siempre que no se abuse de ella. No tiene sentido buscar continuamente las tarifas más actualizadas, así que configure el caché en un valor que pueda aceptar.

También deberás establecer una moneda base con la que se calcularán los tipos de cambio. En el ejemplo, estoy usando 'EUR' Como quiero que las tarifas se calculen en euros.

El resto del código sigue este patrón:

  1. Si los tipos de cambio se encuentran en el almacenamiento del navegador y aún no se ha cumplido el período de expiración de la memoria caché, recupere los tipos de cambio del almacenamiento y envíelos a dataLayer.

  2. Si no se encuentran las tarifas en el almacenamiento del navegador, o si se ha cumplido el período de expiración de la memoria caché, obtenga las tarifas más recientes mediante una solicitud HTTP a https://api.exchangeratesapi.io/newestutilizando el tipo de cambio base que proporcionó en la configuración del script. Envíe los resultados a dataLayer. Almacene los resultados en caché en el almacenamiento del navegador.

También incluí una clave para reflejar si los resultados se almacenaron en caché o no (ratesType: 'contemporary/cached'), que puede utilizar para determinar la fiabilidad de los resultados. Esto es lo que cube el dataLayer Se vería así:

{
  occasion: "exchangeRates",
  charges: {
    AUD: 1.6467,
    BGN: 1.9558,
    BRL: 4.4099,
    CAD: 1.4785
    CHF: 1.0919
    CNY: 7.8521
    CZK: 25.727
    DKK: 7.4644
    GBP: 0.9183,
    ...
    timestamp: 1565172369394
  },
  ratesType: 'contemporary'
}

Establezca esta etiqueta para que se energetic en el disparador Todas las páginasDe esa manera, se activará tan pronto como se haya cargado el contenedor GTM.

Ahora que los datos están disponibles dataLayerpuedes crear algunas variables que te permitirán utilizar los resultados.

Para empezar, una Variable de capa de datos para charges obtendrá el objeto correspondiente del modelo de datos de GTM.

Ahora, para realizar una conversión, necesitas la variable de origen (el valor que quieres convertir) y esta variable de capa de datos. Por ejemplo, si tu valor de origen está en dólares australianos, puedes convertirlo a euros con una variable de JavaScript personalizada que tenga el siguiente código:

perform() {
  // Replace these if vital
  var convertFrom = 'AUD';
  var sourceVariable = {{Supply worth in AUD}};
  var charges = {{DLV - charges}};
  
  // Do not change something under
  if (!charges || !charges(convertFrom) || isNaN(sourceVariable)) {
    return sourceVariable;
  }
  return sourceVariable / charges(convertFrom);
}

Esta variable extrae el valor de origen y el charges objeto. En caso de que el charges el objeto no existe, O no contiene el símbolo de moneda que desea convertir, O la variable de origen no devuelve un número, la variable de origen se devuelve intacta.

De lo contrario, la variable divide la variable de origen con el tipo de cambio para brindarle el valor de la variable de origen en la moneda base que configuró en la etiqueta HTML personalizada.

También puedes crear un plantilla de variable personalizada donde el usuario indica qué variable de origen utilizar y cuál sería el símbolo monetario. La plantilla devolvería entonces el resultado de la conversión.

Puedes descargar la plantilla que he creado aquí.

NOTA:La conversión de moneda solo funcionará si la variable de origen está disponible cuando se realiza la conversión Y si los tipos de cambio se han obtenido correctamente. La solicitud de los tipos de cambio es asincrónica, por lo que debe tener cuidado de no caer en una condición de carrera. Puede utilizar el exchangeRates nombre del evento en un disparador de evento personalizado si desea activar una etiqueta solo después de que se hayan recuperado correctamente los tipos de cambio.

Espero que este consejo le resulte útil a alguien o, al menos, le brinde concepts sobre cómo extraer datos de las API públicas, a través de GTM, al navegador internet del usuario.

Related Post

Leave a Reply

Your email address will not be published. Required fields are marked *