examples/sdk/with-html/track.html

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Voucherify Track Event</title>
    </head>

    <body>
        <form id="trackForm">
            <fieldset>
                <legend>Track Event</legend>
                <p><label>Favorite superhero?</label>
                    <input type="text" name="code" id="superhero">
                </p>
                <p><input type="submit" name="submit" value="Save"></p>
        </form>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.5.1/qs.min.js" crossorigin></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script type="text/javascript"
            src="https://unpkg.com/@voucherify/sdk@1.0.0/dist/voucherifysdk.umd.production.min.js" crossorigin></script>

        <script>
            const voucherify = VoucherifySDK.VoucherifyClientSide({
                clientApplicationId: "158106cb-c95a-42e8-bc73-01ba34e2e756",
                clientSecretKey: "c84aaea9-9f4a-47b3-a49f-4a5c4bd37964",
                origin: "example.com"
            });

            voucherify.setIdentity("gustav@purpleson.com");

            const trackEvent = (e) => {
                e.preventDefault();
                const favSuperhero = document.getElementById("superhero").value;

                const metadata = {
                    superhero: favSuperhero
                }

                voucherify
                    .track('Custom event 123', customer, metadata)
                    .then(result => {
                        console.log(result)
                    })
                    .catch(console.error)
            };

            document
                .getElementById("trackForm")
                .addEventListener("submit", trackEvent, false);

        </script>
    </body>

</html>