javascript - site - google gtag js

Seguimiento de conversiones de trama con Analytics en HTML/Javascript

Question

Tengo dos botones en mi sitio web usando Stripe que me gustaría rastrear la conversión de comercio electrónico y clics de botón, pero no estoy seguro de cómo integrar el código en análisis con mi página HTML porque la compra no tiene una página de confirmación y no estoy seguro qué es la etiqueta de acción del botón:

<form action="/charge.php" method="POST">
<input type=''hidden'' name=''productName'' value=''1_device''>
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="XXXYYYZZZ"
data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
data-name="Single"
data-description="$1.99 monthly"
data-panel-label="Subscribe"
data-label="Single"
data-amount="199"
data-allow-remember-me="false">
</script>
</form>
<form action="/charge.php" method="POST">
<input type=''hidden'' name=''productName'' value=''5_device''>
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="XXXYYYZZZ"
data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
data-name="Family"
data-description="$9.99"
data-panel-label="Subscribe"
data-label="Family"
data-amount="999"
data-allow-remember-me="false">
</script>
</form>

¿Alguien sabría qué código de seguimiento colocar dentro del código anterior para hacer un seguimiento de las conversiones y los clics? Gracias

Answer 1

Capturar evento de clic

<script>
document.body.addEventListener("click", function (event) {
if (event.target.previousElementSibling.classList.contains("stripe-button")) {
var data = event.target.previousElementSibling.dataset;
}
});
</script>

Datos

Todos los datos son accesibles después del clic en el objeto del conjunto de datos:

/* All data fields
data["key"]
data["image"]
data["name"]
data["description"].replace(//D/g, '''');
data["panel-label"]
data["label"]
data["amount"]
data["allow-remember-me"]
*/

Tie datos con la transacción de Google Analytics

Todos juntos deben verse así:

<script>
document.body.addEventListener("click", function (event) {
if (event.target.previousElementSibling.classList.contains("stripe-button")) {
var data = event.target.previousElementSibling.dataset;
var transactionID = Math.random().toString(36).substr(2, 10);
var transactionValue = data["description"].replace(//D/g, '''');
// set up ga
ga(''ecommerce:addItem'', {
''id'': transactionID, // Transaction ID. Required.
''name'': data["name"], // Product name. Required.
''category'': data["label"], // Category or variation.
''price'': transactionValue,// Unit price.
''quantity'': 1 // Quantity.
});
ga(''ecommerce:addTransaction'', {
''id'': transactionID, // Transaction ID. Required.
''revenue'': transactionValue // Grand Total.
});
ga(''ecommerce:send'');
}
});
</script>

Documentación

https://developers.google.com/analytics/devguides/collection/analyticsjs/ecommerce

Answer 2

Sé que usar JavaScript para declarar transacciones al hacer clic es la forma más común de hacerlo, pero creo que declarar una transacción a Google Analytics antes de que se complete es un riesgo de contaminar sus datos con transacciones no existentes (si la transacción se ha rechazado o rechazado) .

Entonces, en mi opinión, la forma correcta de lograr lo que quieres hacer es lo siguiente. Requiere estar cómodo usando javascript / jQuery y php.

Tal vez es un poco demasiado técnico para OP, pero podría ser útil para otros lectores.

De acuerdo con la pregunta, desea hacer un seguimiento de dos cosas:

1. clics de botón de banda
2. transacciones confirmadas de comercio electrónico

La mejor manera de hacerlo en mi opinión es:

1. envía un hit de tipo "evento" a Google Analytics usando javascript, cuando se hace clic en el botón de la raya
2. configura una url de Stripe hook para capturar el resultado de la transacción (una vez que la transacción ha sido procesada), y en caso de éxito, envía un hit a Google Analytics usando PHP

Esta es la primera respuesta elaborada que publicaré en SO, trataré de hacerlo bueno y útil.

1. Cómo rastrear clics en un botón usando javascript y Google Analytics

Lo que quiere usar se llama "seguimiento de eventos". Evento como en "algún evento ocurrió, quiero notificarlo a GA".

La lógica aquí es:

en el botón de la raya, haga clic, envíe el evento "se ha hecho clic en el botón de la raya" a GA

Suponiendo que su botón de banda HTML es algo así como

<button type="submit" class="stripe-button-el" style="visibility: visible;"><span style="display: block; min-height: 30px;">SOME TEXT</span></button>

Le sugiero que use algo de jQuery para detectar clics en este botón. Así es como lo hago: en un archivo .js:

(function($)
{
// WHEN DOM IS READY
$(document).ready(function()
{
// STRIPE BUTTON CLICK TRACKING
$("#stripe-button-form button").each(function()
{
var sent = false;
$(this).click(function(event)
{
console.log("click"); // Just to make sure the click has been detected, you can comment this line
if(!sent)
{
ga(''send'', ''event'', ''category'', ''action'', ''intent''); // send hit to GA
sent = true; // used to make sure the hit is sent only once to GA
}
});
});
});
})(jQuery);

los

ga (''enviar'', ''evento'', ''categoría'', ''acción'', ''etiqueta''); línea es la que desea personalizar de acuerdo a sus necesidades.

• ''enviar'' y ''evento'' siguen siendo los mismos, no lo toques.
• ''categoría'', ''acción'', ''etiqueta'' que puedes personalizar. Eche un vistazo a la documentación de Google Analytics o a los tutoriales de seguimiento de eventos para obtener detalles sobre la forma inteligente de hacerlo.

Al hacerlo, podrá rastrear cada clic en los botones de la raya (excepto repetir clics, en caso de que alguien haga clic dos o más veces).

2. Cómo rastrear las transacciones exitosas usando Stripe hook y Google Analytics API (Google Measurement Protocol)

Aquí la lógica es:

• Indique a Stripe a qué URL debe enviar el resultado después de un intento de pago
• Esa URL es un archivo php, donde recibirá los datos. Si los datos enviados por Stripe indican que la transacción fue exitosa, ENTONCES enviará los detalles de la transacción a Google Analytics. Si, por otro lado, la transacción ha fallado o no se ha completado: no haga nada y no comprometa sus informes de GA.

Gancho de la raya

Configuración de rayas

Primero, en su Stripe Dashboard, vaya a Configuración de la cuenta> Webhooks> Agregar punto final. La URL que debe colocar es la URL del archivo PHP que usará para recibir los resultados de pagos de Stripe.

Digamos: http://example.com/stripe-listener.php Ponga el punto final en modo de prueba, luego haga lo mismo para el modo en vivo.

(y, por supuesto, asegúrese de que stripe-listener.php exista y esté ubicado correctamente en su servidor).

Tu oyente de banda

Esto es un poco largo de detallar aquí, así que déjame darte el tutorial donde obtuve toda la información: https://pippinsplugins.com/stripe-integration-part-6-payment-receipts/

Básicamente, necesitará tener la biblioteca PHP de la API Stripe en su servidor para que pueda funcionar lo siguiente. Te dejaré resolver esto, no es demasiado complicado una vez que te sumerjas.

Su archivo stripe-listener.php (puede asignarle el nombre que desee, siempre que sea coherente con lo que utilizó para el punto final Stripe webhook) debería parecerse a algo así:

// STRIPE STUFF
global $stripe_options;
require_once(STRIPE_BASE_DIR . ''/lib/Stripe.php'');
if(isset($stripe_options[''test_mode'']) && $stripe_options[''test_mode''])
{
$secret_key = $stripe_options[''test_secret_key''];
} else {
$secret_key = $stripe_options[''live_secret_key''];
}
Stripe::setApiKey($secret_key);
// retrieve the request''s body and parse it as JSON
$body = file_get_contents(''php://input'');
// grab the event information
$event_json = json_decode($body);
// this will be used to retrieve the event from Stripe
$event_id = $event_json->id;
if(isset($event_id))
{
try
{
// LOAD EVENT DATA FROM STRIPE
$event = Stripe_Event::retrieve($event_id);
$invoice = $event->data->object;
//////////////////////////////////////////////////////////////////////////////
// NOW DEAL WITH POTENTIAL SITUATIONS
//////////////////////////////////////////////////////////////////////////////
// IF PAYMENT SUCCEEDED
if($event->type == ''charge.succeeded'')
{
// Do stuff with data stored in $invoice.
// For example :
$customer = Stripe_Customer::retrieve($invoice->customer);
$email = $customer->email;
$amount = $invoice->amount / 100; // amount comes in as amount in cents, so we need to convert to dollars
$txn_id = $invoice->id; // transaction unique ID
$livemode = $invoice->livemode;
// ....
// THEN
// ....
// Ping Google Analytics
if($livemode != false)
{
// Event
if(function_exists("GA_send_event"))
{
// Transaction details
$transaction_ID = $txn_id; // My unique transaction id, retrieved from Stripe
$transaction_ttc = $amount; // My transaction amount (tax included), retrieved from Stripe
$transaction_tax = round($amount-($amount/1.2),2); // My tax total amount (I do a bit of calculation to get it, based on french tax system), don''t pay too much attention to that
$product_name = $type; // $type was retrieved from a special value I store in Stripe, but you can use anything you''d like
// Send transaction details to GA, with a custom function
GA_send_transaction($transaction_ID, $transaction_ttc, $transaction_tax, $product_name);
}
}
}
// WHEREAS IF PAYMENT FAILED
if($event->type == ''charge.failed'')
{
// Do some other stuff, like maybe send yourself an email ?
}
}
catch (Exception $e)
{
wp_die("error");
exit();
}
}

Aquí la parte jugosa es

GA_send_transaction ($ transaction_ID, $ transaction_ttc, $ transaction_tax, $ product_name);

Esta es una función personalizada cuya función es enviar detalles de la transacción a Google Analytics.

Esta función está definida (y vinculada a la API de Google Analytics) gracias a la siguiente biblioteca:

La API de Google Analytics (también conocida como "Google Measurement Protocol")

Esto se usa para enviar datos a Google Analytics usando PHP. El interés de hacerlo (en lugar de confiar en el javascript habitual) es que estás trabajando en el lado del servidor. En otras palabras: no dependes de lo que el usuario hará (o no hará). Como esperar hasta que su página de confirmación se haya cargado, o resguarde antes (y no ejecute su javascript).

• Cuando desee realizar un seguimiento de una acción del usuario / un evento en la página: vaya con las funciones estándar de JavaScript para Google Analytics
• Cuando necesite asegurarse de que lo que envía es 100% confiable, use un enfoque del lado del servidor, como aquí.

He completado una biblioteca de PHP rápida, basada en el trabajo de Stu Miller: http://www.stumiller.me/implementing-google-analytics-measurement-protocol-in-php-and-wordpress/

La biblioteca que uso actualmente (como un plugin de Wordpress) Acabo de ponerle GitHub para que la use, la adapte y (con suerte) mejore (estoy bastante seguro de que hay mucho por mejorar).

Aquí: https://github.com/blegrand/google-analytics-php-library

(no dude en mejorarlo, y tenga en cuenta que es mi primer informe público en GitHub)

Espero que ayude!