| 1 |
function logEvent(eventName, eventData) { |
| 2 |
console.log(eventName, eventData); |
| 3 |
} |
| 4 |
|
| 5 |
jQuery(document).ready(function ($) { |
| 6 |
$('#submit_tbla_account_id').on('click', function (e) { |
| 7 |
e.preventDefault(); |
| 8 |
logEvent('Clicked Install Pixel'); |
| 9 |
var accountID = $('#tbla_account_id').val(); |
| 10 |
var action = $('#tbla_account_id_action').val(); |
| 11 |
var nonce = taboolaPixelAjax.nonce; |
| 12 |
|
| 13 |
$.ajax({ |
| 14 |
type: 'POST', |
| 15 |
url: taboolaPixelAjax.ajax_url, |
| 16 |
data: { |
| 17 |
action, |
| 18 |
account_id: accountID, |
| 19 |
nonce: nonce |
| 20 |
}, |
| 21 |
success: function (response) { |
| 22 |
location.reload(); |
| 23 |
} |
| 24 |
}); |
| 25 |
}); |
| 26 |
|
| 27 |
$('#select_account_button').on('click', function (e) { |
| 28 |
e.preventDefault(); |
| 29 |
logEvent('Clicked Connect Account'); |
| 30 |
|
| 31 |
// Open in a popup window with specific dimensions and no URL bar |
| 32 |
const width = 580; |
| 33 |
const height = 800; |
| 34 |
const left = (screen.width - width) / 2; |
| 35 |
const top = (screen.height - height) / 2; |
| 36 |
|
| 37 |
let thirdPartyConnectHost = localStorage.getItem('thirdPartyConnectHost'); |
| 38 |
if (!thirdPartyConnectHost || thirdPartyConnectHost === 'null') { |
| 39 |
thirdPartyConnectHost = taboolaPixelAjax.third_party_connect_host; |
| 40 |
} |
| 41 |
|
| 42 |
// Combine all possible parameters to hide chrome/UI elements |
| 43 |
const windowFeatures = |
| 44 |
'width=' + width + |
| 45 |
',height=' + height + |
| 46 |
',left=' + left + |
| 47 |
',top=' + top + |
| 48 |
',resizable=yes' + |
| 49 |
',scrollbars=yes' + |
| 50 |
',status=no' + |
| 51 |
',location=no' + |
| 52 |
',menubar=no' + |
| 53 |
',toolbar=no' + |
| 54 |
',personalbar=no' + |
| 55 |
',directories=no' + |
| 56 |
',titlebar=no' + |
| 57 |
',chrome=no' + |
| 58 |
',dependent=yes' + |
| 59 |
',minimizable=no' + |
| 60 |
',fullscreen=no'; |
| 61 |
|
| 62 |
const popupUrl = thirdPartyConnectHost + '3p-connect?platform=' + taboolaPixelAjax.platform + '&referrer=' + encodeURIComponent(window.location.href); |
| 63 |
|
| 64 |
// Use loading.html to bypass popup blockers |
| 65 |
// It will wait 100ms and then redirect to the actual URL |
| 66 |
const loadingUrl = taboolaPixelAjax.loading_url + '?url=' + encodeURIComponent(popupUrl); |
| 67 |
const popup = window.open(loadingUrl, 'Taboola Connect', windowFeatures); |
| 68 |
|
| 69 |
if (popup) { |
| 70 |
logEvent('3p Connect Started'); |
| 71 |
} |
| 72 |
|
| 73 |
window.addEventListener('message', function handler(event) { |
| 74 |
// Check origin for security |
| 75 |
if (event.origin !== thirdPartyConnectHost.replace(/\/$/, '')) return; |
| 76 |
|
| 77 |
const data = event.data; |
| 78 |
if (data.type === 'ACCOUNT_SELECTED') { |
| 79 |
// Store sensitive details in localStorage |
| 80 |
localStorage.setItem('taboolaAccountId', data.accountId); |
| 81 |
localStorage.setItem('taboolaAccountName', data.accountName); |
| 82 |
localStorage.setItem('taboolaAccountLabel', data.accountLabel); |
| 83 |
localStorage.setItem('taboolaToken', data.profiledToken); |
| 84 |
|
| 85 |
// Hide the original step and show the install pixel step |
| 86 |
$('#step-connect').hide(); |
| 87 |
$('#install-pixel-step').show(); |
| 88 |
|
| 89 |
// Populate the account info box |
| 90 |
$('#account-label').text(data.accountLabel || data.accountName || ''); |
| 91 |
$('#account-id').text('Account ID: ' + (data.accountId || '')); |
| 92 |
|
| 93 |
// Remove any previous click handlers to avoid duplicates |
| 94 |
$('#install_pixel_button').off('click').on('click', async function () { |
| 95 |
if (taboolaPixelAjax.platform === 'wc') { |
| 96 |
// Make the API call |
| 97 |
try { |
| 98 |
await fetch(taboolaPixelAjax.api_host + 'rule/create-ecomm?platformName=Woocommerce&accountId=' + encodeURIComponent(data.accountName), { |
| 99 |
headers: { |
| 100 |
'Authorization': 'Bearer ' + data.profiledToken, |
| 101 |
'Content-Type': 'application/x-www-form-urlencoded' |
| 102 |
}, |
| 103 |
method: 'POST' |
| 104 |
}); |
| 105 |
logEvent('Ecommerce Rules Created'); |
| 106 |
} catch (error) { |
| 107 |
// No error handling for now, continue anyway |
| 108 |
console.error('Error creating rules:', error); |
| 109 |
logEvent('Failed Creating Ecommerce Rules', {error: error.message}); |
| 110 |
} |
| 111 |
} |
| 112 |
// Update the hidden input field with the account ID |
| 113 |
$('#tbla_account_id').val(data.accountId); |
| 114 |
// Update codeless link |
| 115 |
updateCodelessLink(data.accountId); |
| 116 |
// Submit the form to save the account ID |
| 117 |
$('#submit_tbla_account_id').click(); |
| 118 |
}); |
| 119 |
|
| 120 |
// Remove this event listener after handling |
| 121 |
window.removeEventListener('message', handler); |
| 122 |
} |
| 123 |
}); |
| 124 |
}); |
| 125 |
|
| 126 |
// On page load, if pixel is already installed, show only the success step |
| 127 |
if ($('#tbla_account_id').val()) { |
| 128 |
$('#step-connect').hide(); |
| 129 |
$('#install-pixel-step').hide(); |
| 130 |
$('#step-success').show(); |
| 131 |
} |
| 132 |
|
| 133 |
// Populate account info in the success step if present |
| 134 |
if ($('#tbla_account_id').val()) { |
| 135 |
var label = localStorage.getItem('taboolaAccountLabel') || localStorage.getItem('taboolaAccountName') || ''; |
| 136 |
var id = $('#tbla_account_id').val() || localStorage.getItem('taboolaAccountId') || ''; |
| 137 |
$('#account-label-success').text(label); |
| 138 |
$('#account-id-success').text('Account ID: ' + id); |
| 139 |
} |
| 140 |
|
| 141 |
// Change Account button handler |
| 142 |
$('#change_account_button').on('click', function (e) { |
| 143 |
e.preventDefault(); |
| 144 |
if (!confirm('Are you sure you want to change the account? This will disconnect your current account.')) { |
| 145 |
return; |
| 146 |
} |
| 147 |
logEvent('Clicked Change Account'); |
| 148 |
$.post(taboolaPixelAjax.ajax_url, { |
| 149 |
action: 'tabpx_uninstall_account_id', |
| 150 |
nonce: taboolaPixelAjax.nonce |
| 151 |
}, function (response) { |
| 152 |
// Clear localStorage |
| 153 |
localStorage.removeItem('taboolaAccountId'); |
| 154 |
localStorage.removeItem('taboolaAccountName'); |
| 155 |
localStorage.removeItem('taboolaAccountLabel'); |
| 156 |
localStorage.removeItem('taboolaToken'); |
| 157 |
// Refresh the page to sync state |
| 158 |
location.reload(); |
| 159 |
}); |
| 160 |
}); |
| 161 |
|
| 162 |
function updateCodelessLink(accountId) { |
| 163 |
$('#codeless-link').each(function () { |
| 164 |
var href = $(this).attr('href'); |
| 165 |
if (href && href.indexOf('ACCOUNT_ID_PLACEHOLDER') !== -1) { |
| 166 |
$(this).attr('href', href.replace('ACCOUNT_ID_PLACEHOLDER', encodeURIComponent(accountId))); |
| 167 |
} |
| 168 |
}); |
| 169 |
} |
| 170 |
|
| 171 |
// On page load, or after install/account select: |
| 172 |
var accountId = $('#tbla_account_id').val() || localStorage.getItem('taboolaAccountId'); |
| 173 |
if (accountId) { |
| 174 |
updateCodelessLink(accountId); |
| 175 |
} |
| 176 |
}); |
| 177 |
|
