getPercentDiff.js

getPercentDiff.js

javascript:(function() {    console.log("[SC Calculator by Natzir & Sylvain / @natzir9 @SylvainL]");    function processTable() {        const xpath = "//table[@class='i3WFpf']";        const tables = document.evaluate(xpath, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);        for (let i = 0; i < tables.snapshotLength; i++) {            const table = tables.snapshotItem(i);            const secondHeader = table.querySelector("tr > :nth-child(2)");            if (secondHeader && secondHeader.querySelector("br")) {                processTableElement(table);            }        }    }    function processTableElement(table) {        let rows = table.querySelectorAll("tr");        let firstDataRow = rows[1];        if (firstDataRow && (firstDataRow.querySelector(":nth-child(4) > span > span > span") || firstDataRow.querySelector(":nth-child(7) > span > span > span"))) {            return;        }        for (let i = 1; i < rows.length; i++) {            let row = rows[i];            let clicksLast = row.cells[1].getAttribute('data-numeric-value');            let clicksPrevious = row.cells[2].getAttribute('data-numeric-value');            let clicksDifference = row.cells[3].getAttribute('data-numeric-value');            let impressionsLast = row.cells[4].getAttribute('data-numeric-value');            let impressionsPrevious = row.cells[5].getAttribute('data-numeric-value');            let impressionsDifference = row.cells[6].getAttribute('data-numeric-value');            let clickTotal = clicksPrevious;            let impressionTotal = impressionsPrevious;            let clickPercentage = getPercentage(clicksDifference, clickTotal);            let impressionPercentage = getPercentage(impressionsDifference, impressionTotal);            let clickSpan = row.querySelector(":nth-child(4) > span > span");            let impressionSpan = row.querySelector(":nth-child(7) > span > span");            let clickPercentageSpan = document.createElement("span");            let impressionPercentageSpan = document.createElement("span");            clickPercentageSpan.innerText = ` (${clickPercentage})`;            impressionPercentageSpan.innerText = ` (${impressionPercentage})`;            if (!isNaN(parseFloat(clickPercentage)) || clickPercentage === "+∞%") {                clickPercentageSpan.style.color = clickPercentage.startsWith("-") ? "red" : "green";            }            if (!isNaN(parseFloat(impressionPercentage)) || impressionPercentage === "+∞%") {                impressionPercentageSpan.style.color = impressionPercentage.startsWith("-") ? "red" : "green";            }            clickSpan.appendChild(clickPercentageSpan);            impressionSpan.appendChild(impressionPercentageSpan);        }    }    function getPercentage(difference, total) {        if (total === 0 || total === "0") {            return "+∞%";        }        if (difference === 0 || difference === "0") {            return "-";        }        return ((difference / total) * 100).toFixed(2) + "%";    }    function processSummary() {        let metrics = [            {                title: ["Clics totales", "Total clicks", "Nombre total de clics"],                identifier: "toggle_0"            },            {                title: ["Impresiones totales", "Total impressions", "Nombre total d%27impressions"],                identifier: "toggle_1"            },            {                title: ["CTR medio", "Average CTR", "CTR moyen"],                identifier: "toggle_2"            },            {                title: ["Posición media", "Average position", "Position moyenne"],                identifier: "toggle_3",                isPosition: true            }        ];        metrics.forEach(metric => {            let element = document.querySelector(`span[data-guidedhelpid=%27${metric.identifier}%27]`);            if (element) {                let parent = element.closest(".RveJvd.snByac");                if (parent) {                    let values = parent.querySelectorAll(".nnLLaf.CJvxcd");                    if (values.length === 2) {                        let currentValue = parseValue(values[0].getAttribute("title"));                        let previousValue = parseValue(values[1].getAttribute("title"));                        let difference = metric.isPosition ? previousValue - currentValue : currentValue - previousValue;                        let percentageDifference = getPercentageDifference(difference, previousValue, metric.isPosition);                        let span = document.createElement("span");                        span.innerText = ` (${percentageDifference})`;                        span.style.color = percentageDifference.startsWith("-") ? (metric.isPosition ? "green" : "red") : (metric.isPosition ? "red" : "green");                        values[0].appendChild(span);                    }                }            }        });    }    function parseValue(value) {        return parseFloat(value.replace("k", "").replace("mil", "").replace(",", ".").replace("%C2%A0", "").replace("%", ""));    }    function getPercentageDifference(difference, previous, isPosition = false) {        if (previous === 0) {            return difference > 0 ? "+∞%" : "-∞%";        }        let percentage = (difference / previous) * 100;        if (isPosition) {            percentage = -percentage;        }        return percentage.toFixed(2) + "%";    }    const observer = new MutationObserver(function(mutations) {        mutations.forEach(function(mutation) {            if (mutation.addedNodes && mutation.addedNodes.length > 0) {                for (let i = 0; i < mutation.addedNodes.length; i++) {                    if (mutation.addedNodes[i].nodeType === 1 && (mutation.addedNodes[i].querySelector(".i3WFpf") || mutation.addedNodes[i].matches(".i3WFpf"))) {                        processTable();                        processSummary();                    }                }            }        });    });    const config = {        attributes: true,        childList: true,        characterData: true,        subtree: true    };    observer.observe(document.body, config);    processTable();    processSummary();})();