feat(analytics): eventos GA4 audio_play y share_click

fea-audio-player.php: el <audio> lleva data-post-id/data-voice; listener
en wp_footer dispara gtag('event','audio_play', {post_id, voice}) en el
primer play (no en cada resume).

fea-share.php: se sube también al repo (nunca se había comiteado). El
botón de Facebook lleva data-fea-share-track="facebook" + listener que
dispara gtag('event','share_click', {method, post_id}).

Ambos reusan el dataLayer/gtag que ya inicializa fea-analytics.php, sin
añadir JS de terceros. Verificado en local con Playwright (evento se
dispara correctamente en ambos casos).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-07-09 21:34:32 -04:00
parent db0d0a03f8
commit 7188adf0d7
2 changed files with 282 additions and 2 deletions
@@ -9,14 +9,17 @@ if (!defined('ABSPATH')) exit;
/** Devuelve el HTML del reproductor para el post actual, o '' si no hay audio. */
function fea_audio_player_html(): string {
$url = get_post_meta(get_the_ID(), 'fea_audio_url', true);
$id = get_the_ID();
$url = get_post_meta($id, 'fea_audio_url', true);
if (!$url) return '';
$voice = get_post_meta($id, 'fea_audio_voice', true) ?: 'NicoFeadulta2026';
return '<div class="fea-audio">'
. '<span class="fea-audio-label">'
. '<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true" focusable="false">'
. '<path fill="currentColor" d="M3 10v4h4l5 5V5L7 10H3zm13.5 2a4.5 4.5 0 0 0-2.5-4.03v8.06A4.5 4.5 0 0 0 16.5 12zM14 3.23v2.06a7 7 0 0 1 0 13.42v2.06a9 9 0 0 0 0-17.54z"/>'
. '</svg> Escucha</span>'
. '<audio controls preload="none" src="' . esc_url($url) . '"></audio>'
. '<audio controls preload="none" src="' . esc_url($url) . '"'
. ' data-fea-audio-track data-post-id="' . esc_attr($id) . '" data-voice="' . esc_attr($voice) . '"></audio>'
. '</div>';
}
@@ -60,3 +63,27 @@ add_action('wp_head', function () {
</style>
<?php
});
// Evento GA4 audio_play (issue tracking uso TTS). Un único evento por <audio>
// y carga de página, disparado en el primer 'play' (no en cada resume tras
// pausa/seek). gtag ya está definido por fea-analytics.php en wp_head prio 1,
// así que este script (footer) siempre lo encuentra disponible.
add_action('wp_footer', function () {
if (!is_singular('post')) return;
if (!get_post_meta(get_queried_object_id(), 'fea_audio_url', true)) return;
?>
<script>
document.querySelectorAll('audio[data-fea-audio-track]').forEach(function (audio) {
var fired = false;
audio.addEventListener('play', function () {
if (fired || typeof gtag !== 'function') return;
fired = true;
gtag('event', 'audio_play', {
post_id: audio.dataset.postId,
voice: audio.dataset.voice
});
});
});
</script>
<?php
});