Analyse côté serveur avec Jamstack Sites

Les sites Jamstack n'ont pas de backend. Cela rend leur capacité à collecter des données analytiques particulièrement vulnérable aux bloqueurs. Réglons ce problème.

Cet exemple comprend une fonction Netlify qui enverra nos événements à Google Analytics, et un règle de redirection Netlify Netlify.

Le problème

Les trackers et les pixels de suivi sont des codes HTML conçus pour enregistrer le comportement ou les visites des utilisateurs lorsqu'ils visitent un site web ou ouvrent un courrier électronique. Ils sont utiles pour suivre l'utilisation de votre site web et parfois les conversions.

Le problème est que certains traceurs sont lents et souvent invasifs. Les bloqueurs de publicité ont d'abord été imaginés pour empêcher les publicités et les pixels de suivi de ralentir les performances des pages web, ou pour améliorer l'expérience de l'utilisateur, mais ils ont ensuite été étendus pour améliorer la protection de la vie privée des utilisateurs.

L'un des effets secondaires a été que de nombreux propriétaires de sites ont perdu la visibilité de ce qui fonctionnait et de ce qui ne fonctionnait pas sur leurs sites. Les caractéristiques physiques de suivi peuvent encore être utilisées pour suivre certaines mesures, par exemple en ajoutant l'identifiant d'un article sur un lien d'inscription pour voir d'où provient l'inscription.

Cela ne nous aide toujours pas à déterminer avec précision si notre contenu est consulté, ce qui est essentiel pour déterminer la conversion.

La solution

L'analyse côté serveur est devenue un moyen populaire de suivre l'activité des utilisateurs. Elle n'a pas la portée de l'analyse traditionnelle (elle ne peut pas facilement suivre les interactions sur la page), mais elle peut capturer des détails importants, comme les pages vues uniques.

Les plateformes d'hébergement telles que Netlifyou des fournisseurs de services de périphérie tels que Cloudflare et Fastly, proposent des analyses côté serveur dans le cadre de leurs solutions. Cependant, lorsque vous utilisez un fournisseur pour l'analyse, vous êtes souvent limité dans la façon dont vous pouvez stocker ces informations, ce qui limite la création de rapports internes.

C'est pourquoi certains préfèrent mettre en place leur propre système d'analyse côté serveur. Pour cela, Google propose des outils de démarrage rapide pour certains langages, et pour d'autres, il existe des packages tels que universal-analytics.

Ici, nous allons créer le nôtre en utilisant universal-analytics et une fonction Netlify.

Fonction Netlify

Les fonctions Netlify sont essentiellement des fonctions AWS Lambda, sans AWS. L'expérience des développeurs AWS laisse BEAUCOUP à désirer, et Netlify a fait de l'expérience utilisateur un modèle commercial. Les fonctions Netlify ne font pas exception, permettant aux gens d'écrire du JavaScript ou du Go dans un répertoire configuré et de le publier en quelques étapes. Le point d'accès est dérivé du nom du fichier ou du dossier, et il peut utiliser les dépendances de l'application parente, ou être responsable de ses propres dépendances.

Une fonction très simple pourrait ressembler à ceci :

// functions/hello-world/index.js

exports.handler = (event, context) => {
  console.log('Only the server will see this!')

  return {
    statusCode: 200,
    body: 'Hello, world!',
  }
}

Une fois déployé, vous pourrez y accéder à partir d'une URL comme celle-ci : https://your-app.netlify.app/.netlify/functions/hello-world

Mais vous pouvez aussi continuer à faire des choses après avoir envoyé une réponse, comme ceci :

// functions/hello-world/index.js

exports.handler = (event, context, callback) => {
  callback(null, {
    statusCode: 200,
    body: 'Hello, world!',
  })

  console.log('The server will still see this!')
}

Nous pourrions utiliser cette fonctionnalité pour envoyer nos données analytiques à Google.

Note: Si vous ajoutez des dépendances à une fonction, vous devrez ajouter le plugin @netlify/plugin-functions-install-core à votre configuration netlify.toml configuration. Ce plugin s'assurera que toutes les dépendances de la fonction sont installées lorsque la fonction est déployée.

Nous devons d'abord installer universal-analytics avant de lancer la commande suivante.

Assurez-vous d'avoir un identifiant Google Analytics, et ajoutez-le à vos variables d'environnement de Variables d'environnement Netlify.

Nous pouvons maintenant l'utiliser dans notre fonction.

// functions/hello-world/index.js

const ua = require('universal-analytics')
const visitor = ua(process.env.GOOGLE_ANALYTICS_ID)

exports.handler = (event, context, callback) => {
  callback(null, {
    statusCode: 200,
    body: 'Hello, world!',
  })

  const { queryStringParameters: data } = event

  try {
    if (data) {
      visitor.pageview(data).send()
    }
  } catch (error) {
    console.log(error) // eslint-disable-line
  }
}

Désormais, à partir de votre navigateur, vous pouvez envoyer les données de l'URL directement à Google : https://your-app.netlify.app/.netlify/functions/hello-world?dp=/my-custom-page

Les données que vous pouvez envoyer comprennent ces paramètres, mais ne s'y limitent pas :

{
  dp, // path e.g. /my-custom-page
  dt, // title of the page
  dh, // hostname e.g. https://netlify.com
  dr, // referrer e.g. https://netlify.com/as-a-referrer or /a-link
  ua, // user agent e.g. very obscure string meaning "chrome on mac"
  cs, // utm_source
  cm, // utm_medium
  cn, // utm_campaign
  ck, // utm_term
  cc, // utm_content
}

Voici une liste complète des paramètres acceptables.

Ajouter l'"image"

L'appel à ce script seul, avec quelque chose comme un intergiciel de routeur ou une requête AJAX, pourrait suffire dans de nombreux cas pour obtenir un rapport décent, mais il pourrait toujours être reconnu comme une requête XHR par un navigateur ou un bloqueur de publicité et être bloqué.

J'ai décidé d'utiliser une solution (typiquement trop élaborée) similaire à la méthode du pixel de suivi. Mais comme nous renvoyons une image structurelle visible, les bloqueurs de publicité l'ont jusqu'à présent complètement ignorée.

Screenshot of AdBlock Plus

Nous allons renvoyer une image SVG à partir de la fonction Netlify et la placer sur une page à l'aide d'une balise image.

Utilisons cette image.

La source de cette image se trouve ici :

<svg id="svg1923" width="733" xmlns="http://www.w3.org/2000/svg" height="733">
<circle cy="366.5" cx="366.5" r="366.5"/>
<circle cy="366.5" cx="366.5" r="336.5" fill="#fede58"/>
<path d="m325 665c-121-21-194-115-212-233v-8l-25-1-1-18h481c6 13 10 27 13 41 13 94-38 146-114 193-45 23-93 29-142 26z"/>
<path d="m372 647c52-6 98-28 138-62 28-25 46-56 51-87 4-20 1-57-5-70l-423-1c-2 56 39 118 74 157 31 34 72 54 116 63 11 2 38 2 49 0z" fill="#871945"/>
<path d="m76 342c-13-26-13-57-9-85 6-27 18-52 35-68 21-20 50-23 77-18 15 4 28 12 39 23 18 17 30 40 36 67 4 20 4 41 0 60l-6 21z"/>
<path d="m234 323c5-6 6-40 2-58-3-16-4-16-10-10-14 14-38 14-52 0-15-18-12-41 6-55 3-3 5-5 5-6-1-4-22-8-34-7-42 4-57.6 40-66.2 77-3 17-1 53 4 59h145.2z" fill="#fff"/>
<path d="m378 343c-2-3-6-20-7-29-5-28-1-57 11-83 15-30 41-52 72-60 29-7 57 0 82 15 26 17 45 49 50 82 2 12 2 33 0 45-1 10-5 26-8 30z"/>
<path d="m565 324c4-5 5-34 4-50-2-14-6-24-8-24-1 0-3 2-6 5-17 17-47 13-58-9-7-16-4-31 8-43 4-4 7-8 7-9 0 0-4-2-8-3-51-17-105 20-115 80-3 15 0 43 3 53z" fill="#fff"/>
<path d="m504 590s-46 40-105 53c-66 15-114-7-114-7s14-76 93-95c76-18 126 49 126 49z" fill="#f9bedd"/>
</svg>

Maintenant, pour renvoyer l'image de notre fonction :

// functions/hello-world/index.js

const ua = require('universal-analytics')
const visitor = ua(process.env.GOOGLE_ANALYTICS_ID)

exports.handler = (event, context, callback) => {
  callback(null, {
    statusCode: 200,
    headers: {
      'Content-Type': 'image/svg+xml',
    },
    body: `<svg id="svg1923" width="733" xmlns="http://www.w3.org/2000/svg" height="733">
<circle cy="366.5" cx="366.5" r="366.5"/>
<circle cy="366.5" cx="366.5" r="336.5" fill="#fede58"/>
<path d="m325 665c-121-21-194-115-212-233v-8l-25-1-1-18h481c6 13 10 27 13 41 13 94-38 146-114 193-45 23-93 29-142 26z"/>
<path d="m372 647c52-6 98-28 138-62 28-25 46-56 51-87 4-20 1-57-5-70l-423-1c-2 56 39 118 74 157 31 34 72 54 116 63 11 2 38 2 49 0z" fill="#871945"/>
<path d="m76 342c-13-26-13-57-9-85 6-27 18-52 35-68 21-20 50-23 77-18 15 4 28 12 39 23 18 17 30 40 36 67 4 20 4 41 0 60l-6 21z"/>
<path d="m234 323c5-6 6-40 2-58-3-16-4-16-10-10-14 14-38 14-52 0-15-18-12-41 6-55 3-3 5-5 5-6-1-4-22-8-34-7-42 4-57.6 40-66.2 77-3 17-1 53 4 59h145.2z" fill="#fff"/>
<path d="m378 343c-2-3-6-20-7-29-5-28-1-57 11-83 15-30 41-52 72-60 29-7 57 0 82 15 26 17 45 49 50 82 2 12 2 33 0 45-1 10-5 26-8 30z"/>
<path d="m565 324c4-5 5-34 4-50-2-14-6-24-8-24-1 0-3 2-6 5-17 17-47 13-58-9-7-16-4-31 8-43 4-4 7-8 7-9 0 0-4-2-8-3-51-17-105 20-115 80-3 15 0 43 3 53z" fill="#fff"/>
<path d="m504 590s-46 40-105 53c-66 15-114-7-114-7s14-76 93-95c76-18 126 49 126 49z" fill="#f9bedd"/>
</svg>`,
  })

  const { queryStringParameters: data } = event

  try {
    if (data) {
      visitor.pageview(data).send()
    }
  } catch (error) {
    console.log(error) // eslint-disable-line
  }
}

Ajoutez-le à votre site en utilisant l'URL que nous avons utilisée précédemment :

<img 
  alt="An SVG file of a very smiley Emoji"
  title="An SVG Emoji"
  width="128" 
  src="/.netlify/functions/hello-world?dp=/my-custom-page"
/>

Avec un peu de chance, il ressemblera à ceci :

An image of a smiley

Règle de réorientation

La partie la plus inventive de mon plan diabolique pourrait donc être la suivante. J'étais légèrement paranoïaque à l'idée qu'un bloqueur de publicité puisse percevoir une URL sans image avec des paramètres de chaîne de requête comme peu suspects en tant que source d'image, et la bloquer de toute façon.

Entrer Redirections Netlify.

En utilisant l'option netlify.toml à la racine de votre projet, vous pouvez remplacer un chemin par un autre.

[[redirects]]
  from = "/images/smiley-face.svg"
  to = "/.netlify/functions/hello-world"
  status = 200
  force = true

Vous pouvez maintenant utiliser un chemin d'accès à l'image pour inclure votre smiley.

<img 
  alt="An SVG file of a very smiley Emoji"
  title="An SVG Emoji"
  width="128" 
  src="/images/smiley-face.svg?dp=/my-custom-page"
/>

Vous pouvez encoder la chaîne de requête comme vous le souhaitez, mais n'oubliez pas de la décoder à l'intérieur de la fonction.

Conclusion

L'analyse est un super pouvoir pour le marketing et les créateurs de contenu. Elle nous permet de mieux servir la communauté, en ajustant nos objectifs sur la base des données que nous pouvons collecter.

Les traceurs posent souvent des problèmes de confidentialité et de rapidité. Mais tant que vous agissez de bonne foi, comme je pense que nous le faisons, l'analyse profite autant aux téléspectateurs qu'aux autres.

Il s'agit d'un moyen agréable de réaliser des analyses côté serveur (que les bloqueurs ne peuvent pas bloquer), lorsque vous n'avez pas de côté serveur à votre disposition.