// ==UserScript== // @name Axon Ads Manager - Share of Voice Column // @namespace web.nextbyte.ai // @version 1.0 // @description Add a Share of Voice column (based on spend) to the media table // @author NextByte // @match *://ads.axon.ai/media* // @grant none // ==/UserScript== (function() { 'use strict'; console.log('Share of Voice userscript loaded'); // Function to parse spend value from text (e.g., "$7,811.64" -> 7811.64) function parseSpendValue(text) { if (!text) return 0; const cleaned = text.replace(/[$,]/g, '').trim(); const value = parseFloat(cleaned); return isNaN(value) ? 0 : value; } // Function to format percentage function formatPercentage(value) { return value.toFixed(2) + '%'; } // Function to add Share of Voice column function addShareOfVoiceColumn() { // Find the table const table = document.querySelector('.arco-table'); if (!table) { console.log('Table not found, will retry...'); return false; } // Check if we already added the column if (document.querySelector('.sov-column-header')) { return true; } // Find the header row const headerRow = table.querySelector('thead .arco-table-tr'); if (!headerRow) { console.log('Header row not found'); return false; } // Find the Spend column header to insert after it const headers = headerRow.querySelectorAll('th'); let spendHeaderIndex = -1; headers.forEach((header, index) => { const titleSpan = header.querySelector('.arco-table-th-item-title'); if (titleSpan && titleSpan.textContent.trim() === 'Spend') { spendHeaderIndex = index; } }); if (spendHeaderIndex === -1) { console.log('Spend column not found'); return false; } // Add column to colgroup in header const headerColgroup = table.querySelector('.arco-table-header colgroup'); if (headerColgroup) { const newCol = document.createElement('col'); newCol.style.width = '120px'; headerColgroup.appendChild(newCol); } // Update table width in header const headerTable = table.querySelector('.arco-table-header table'); if (headerTable && headerTable.style.width) { const currentWidth = parseInt(headerTable.style.width); headerTable.style.width = (currentWidth + 120) + 'px'; } // Add header cell const newHeader = document.createElement('th'); newHeader.className = 'arco-table-th react-resizable sov-column-header'; newHeader.innerHTML = `

Share of Voice

`; headerRow.appendChild(newHeader); // Add column to colgroup in body const bodyColgroup = table.querySelector('.arco-table-body colgroup'); if (bodyColgroup) { const newCol = document.createElement('col'); newCol.style.width = '120px'; bodyColgroup.appendChild(newCol); } // Update table width in body const bodyTable = table.querySelector('.arco-table-body table'); if (bodyTable && bodyTable.style.width) { const currentWidth = parseInt(bodyTable.style.width); bodyTable.style.width = (currentWidth + 120) + 'px'; } // Get all data rows const tbody = table.querySelector('tbody'); if (!tbody) { console.log('Table body not found'); return false; } const dataRows = tbody.querySelectorAll('.arco-table-tr'); // Calculate total spend let totalSpend = 0; const spendValues = []; dataRows.forEach(row => { const cells = row.querySelectorAll('td'); if (cells.length > spendHeaderIndex) { const spendCell = cells[spendHeaderIndex]; const spendText = spendCell.textContent.trim(); const spendValue = parseSpendValue(spendText); spendValues.push(spendValue); totalSpend += spendValue; } }); console.log(`Total spend: $${totalSpend.toFixed(2)}`); // Add Share of Voice cells to each row dataRows.forEach((row, index) => { const spendValue = spendValues[index]; const shareOfVoice = totalSpend > 0 ? (spendValue / totalSpend) * 100 : 0; const newCell = document.createElement('td'); newCell.className = 'arco-table-td sov-column-cell'; newCell.innerHTML = `

${formatPercentage(shareOfVoice)}

`; row.appendChild(newCell); }); console.log('Share of Voice column added successfully'); return true; } // Function to observe table changes and re-add column if needed function observeTable() { const observer = new MutationObserver((mutations) => { // Check if the table structure changed const needsUpdate = mutations.some(mutation => { return mutation.type === 'childList' && (mutation.target.classList.contains('arco-table-body') || mutation.target.tagName === 'TBODY'); }); if (needsUpdate) { // Remove existing SOV column if present document.querySelectorAll('.sov-column-header, .sov-column-cell').forEach(el => el.remove()); // Remove the extra colgroup columns we added const headerColgroup = document.querySelector('.arco-table-header colgroup'); const bodyColgroup = document.querySelector('.arco-table-body colgroup'); if (headerColgroup) { const lastCol = headerColgroup.lastElementChild; if (lastCol && lastCol.style.width === '120px') { lastCol.remove(); } } if (bodyColgroup) { const lastCol = bodyColgroup.lastElementChild; if (lastCol && lastCol.style.width === '120px') { lastCol.remove(); } } // Re-add the column setTimeout(() => addShareOfVoiceColumn(), 100); } }); // Start observing the document for changes observer.observe(document.body, { childList: true, subtree: true }); } // Initial attempt to add column function initialize() { // Try immediately if (addShareOfVoiceColumn()) { observeTable(); return; } // If not successful, retry with intervals let attempts = 0; const maxAttempts = 20; const interval = setInterval(() => { attempts++; if (addShareOfVoiceColumn()) { clearInterval(interval); observeTable(); console.log('Share of Voice column initialized after', attempts, 'attempts'); } else if (attempts >= maxAttempts) { clearInterval(interval); console.log('Failed to add Share of Voice column after', maxAttempts, 'attempts'); } }, 500); } // Wait for page to be ready if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initialize); } else { initialize(); } })();