Handle clicks on element and forms and send analytics events to GA and YA

curves-tilda-analytics.js

var gaFbAnalyticsFrameQueue = [];
var frameIsReady = false;
var YA_ID = "00000";
var yaDisableGDPR = 1;
var FORM_SUCCESS_CB_DATA_ATTRIBUTE = "successCallback"; //camel-case(in html it's cebab-case, exp in html data-success-callback -> successCallback)

//Edit only this array for add new events triggers, you can skip ya_goal or ga_event(or both)
var clickGoals = [
    {
        tilda_event_url: "/tilda/click/rec483475555/button1641908411542",
        ga_event: {
            event: "custom_events",
            eventAction: undefined,
            eventCategory: "button_header-apply-now_web",
            eventLabel: "/tilda/click/rec483475555/button1641908411542",
        },
    },
    {
        tilda_event_url: "/tilda/click/rec483270549/button1641908997389",
        ga_event: {
            event: "custom_events",
            eventAction: undefined,
            eventCategory: "button_first-section_web",
            eventLabel: "/tilda/click/rec483270549/button1641908997389",
        },
    },
    {
        tilda_event_url: "/tilda/click/rec483270556/button1641912528890",
        ga_event: {
            event: "custom_events",
            eventAction: undefined,
            eventCategory: "button_about-profession-section_web",
            eventLabel: "/tilda/click/rec483270556/button1641912528890",
        },
    },
    {
        tilda_event_url: "/tilda/click/rec483270585/button1657811277045",
        ga_event: {
            event: "custom_events",
            eventAction: undefined,
            eventCategory: "button_try_platform_middle_web",
            eventLabel: "/tilda/click/rec483270585/button1657811277045",
        },
    },
    {
        tilda_event_url: "/tilda/click/rec483270562/button1641912528890",
        ga_event: {
            event: "custom_events",
            eventAction: undefined,
            eventCategory: "button_about-profession-section_web",
            eventLabel: "/tilda/click/rec483270562/button1641912528890",
        },
    },
    {
        tilda_event_url: "/tilda/click/rec483270572/button1641986966107",
        ga_event: {
            event: "custom_events",
            eventAction: undefined,
            eventCategory: "button_reviews-achiviements-section_web",
            eventLabel: "/tilda/click/rec483270572/button1641986966107",
        },
    },
    {
        tilda_event_url: "/tilda/click/rec483270575/button1641990099046",
        ga_event: {
            event: "custom_events",
            eventAction: undefined,
            eventCategory: "button_support-team-section_web",
            eventLabel: "/tilda/click/rec483270575/button1641990099046",
        },
    },
    {
        tilda_event_url: "/tilda/click/rec478345428/button1641986966107",
        ga_event: {
            event: "custom_events",
            eventAction: undefined,
            eventCategory: "button_student-reviews-section_web",
            eventLabel: "/tilda/click/rec478345428/button1641986966107",
        },
    },
    {
        tilda_event_url: "/tilda/click/rec483270606/button1658186919739",
        ga_event: {
            event: "custom_events",
            eventAction: undefined,
            eventCategory: "button_try_platform_bottom_web",
            eventLabel: "/tilda/click/rec483270606/button1658186919739",
        },
    },
    {
        tilda_event_url: "/tilda/click/rec483270606/button1658188030522",
        ga_event: {
            event: "custom_events",
            eventAction: undefined,
            eventCategory: "button_webinars_web",
            eventLabel: "/tilda/click/rec483270606/button1658188030522",
        },
    },
];

//same as clickGoals(contains ya_goal, ga_event), just for forms. Create wrapper-function for success callback.
var formsGoals = [
    {
        successCallbackName: "t396_onSuccess",
        ga_event: {
            event: "custom_events",
            eventAction: "form_sumbission",
            eventCategory: "button_price_section_form_submission_web",
            eventLabel: "/tilda/form483270605/submitted/",
        },
    },
];

function sendToGaFbAnalytics(message) {
    var msg;
    var gaFbAnalyticsFrame;

    if (message !== undefined) {
        gaFbAnalyticsFrameQueue.push(message);
    }

    gaFbAnalyticsFrame = document.getElementById("gaFbAnalyticsFrame");
    if (
        gaFbAnalyticsFrame !== null &&
        gaFbAnalyticsFrame instanceof HTMLIFrameElement &&
        gaFbAnalyticsFrame.contentWindow !== null &&
        frameIsReady
    ) {
        while (gaFbAnalyticsFrameQueue.length > 0) {
            msg = gaFbAnalyticsFrameQueue.shift();
            if (msg !== undefined) {
                gaFbAnalyticsFrame.contentWindow.postMessage(msg, "*");
            }
        }
    }
}

sendToGaFbAnalytics({ type: "hit", url: document.location.href });

function processFormSent(data) {
    try {
        var msg = JSON.parse(data);
        if (
            msg.message === "sent" &&
            msg.name ===
                "ya-form-10034492.4f7060ace2df75a6c4072b67bae0c19f9b2e1c23"
        ) {
            ym(YA_ID, "reachGoal", "about_us_send_form");
        }
    } catch {}
}

window.addEventListener("message", function (event) {
    if (event.data === "FbGaIsReady") {
        frameIsReady = true;
        sendToGaFbAnalytics({ type: "readyReceived" });
    }
    processFormSent(event.data);
});

function sendAnalytics({ ya_goal, ga_event }) {
    if (ya_goal && typeof window.ym === "function" && YA_ID) {
        window.ym(YA_ID, "reachGoal", ya_goal);
        console.log(ya_goal);
    }
    if (ga_event && Array.isArray(window.dataLayer)) {
        window.dataLayer.push(ga_event);
        console.log(ga_event);
    }
}

requestAnimationFrame(() => {
    clickGoals.forEach((clickGoal) => {
        var goalEls = [
            ...document.querySelectorAll(
                clickGoal.selector ||
                    `[data-tilda-event-name="${clickGoal.tilda_event_url}"]`
            ),
        ];
        goalEls.forEach((goalEl) => {
            goalEl.addEventListener("click", () => sendAnalytics(clickGoal));
        });
    });
    formsGoals.forEach((formGoal) => {
        var successCb = window[formGoal.successCallbackName];
        window[formGoal.successCallbackName] = (...args) => {
            sendAnalytics(formGoal);
            successCb(...args);
        };
    });
});