Need some assistance in getting a GA code so that I can track widget use. I have 3 on my site and really need to know which one is getting used. One of the widgets is on a different page. Two are on the page I have linked to here (but you’ll also see a SoundCloud player on the same page that I’ll be replacing if I can solve this dilemma. Google wants me to buy a plan from them to track useage 
Hi there, @user2679 and welcome to the Community 
You’d like to track clicks on the widget elements, right? If this is the case, could you please specify which specific widget elements you’d like to track?
I have player widgets on my site. There’s 3 of them at the moment (2 on the page with the link here and 1 on a different page but still the same sight. I would like to see individually what player being used. I wish there was a way to see what tracks are being played for each widget.
(www.denataylor.info/musicstore)
Got you!
I’ve passed your request on to the dev team and will update you once the code is ready 
Hi @user2679
Thank you for waiting!
Here is the solution from our devs. This code should be added to this website:
<script>
const GA_ID = 'G-ID';
const WIDGET_SHARELINKS = [
'https://424fced7eaf54610b78443b39532b611.elf.site',
'https://www-denataylor-info.filesusr.com/html/51c037_d173a444fbfca888cc23f05a88993d52.html',
'https://7def5e9211194222ba8f6b0ce9bd2425.elf.site',
'https://www-denataylor-info.filesusr.com/html/51c037_e16bf0dbde7d9ff521c66abf09aff7e9.html',
]
const gtagScript = document.createElement('script');
gtagScript.async = true;
gtagScript.src = `https://www.googletagmanager.com/gtag/js?id=${GA_ID}`;
document.head.appendChild(gtagScript);
const inlineScript = document.createElement('script');
inlineScript.textContent = `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${GA_ID}', { debug_mode: true });
`;
document.head.appendChild(inlineScript);
window.addEventListener('message', function(event) {
const eventOrigin = new URL(event.origin)?.origin;
const allowedOrigins = WIDGET_SHARELINKS.map(link => {
try {
return new URL(link).origin;
} catch (e) {
return null;
}
}).filter(Boolean);
if (!allowedOrigins.includes(eventOrigin)) {
return;
};
const data = event.data;
if (!data || data.type !== 'ga-event') {
return;
};
const { action, category, label } = data.payload || {};
if (typeof ga !== 'undefined') {
ga('send', 'event', {
eventAction: action,
eventCategory: category,
eventLabel: label
});
}
if (typeof gtag !== 'undefined') {
gtag('event', action, {
'event_category': category,
'event_label': label
});
}
}, false);
</script>
This code should be added to this page:
<script>
const GA_ID = 'G-ID';
const WIDGET_SHARELINKS = [
'https://b190bd437ebc476c8c6fc456112c2261.elf.site',
'https://www-denataylor-info.filesusr.com/html/51c037_aa10e1fcddcd5968db85c080f7eb1652.html'
]
const gtagScript = document.createElement('script');
gtagScript.async = true;
gtagScript.src = `https://www.googletagmanager.com/gtag/js?id=${GA_ID}`;
document.head.appendChild(gtagScript);
const inlineScript = document.createElement('script');
inlineScript.textContent = `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${GA_ID}', { debug_mode: true });
`;
document.head.appendChild(inlineScript);
window.addEventListener('message', function(event) {
const eventOrigin = new URL(event.origin)?.origin;
const allowedOrigins = WIDGET_SHARELINKS.map(link => {
try {
return new URL(link).origin;
} catch (e) {
return null;
}
}).filter(Boolean);
if (!allowedOrigins.includes(eventOrigin)) {
return;
};
const data = event.data;
if (!data || data.type !== 'ga-event') {
return;
};
const { action, category, label } = data.payload || {};
if (typeof ga !== 'undefined') {
ga('send', 'event', {
eventAction: action,
eventCategory: category,
eventLabel: label
});
}
if (typeof gtag !== 'undefined') {
gtag('event', action, {
'event_category': category,
'event_label': label
});
}
}, false);
</script>
In both codes, you should replace G-ID on the 2nd line with your actual website ID for Google Analytics. This article will help you find your ID - Find your Google tag ID.
Finally, this script should be added to the Custom JS field on the Style tab of your widgets’ settings:
function sendGtagEventFromIframe(config) {
parent.postMessage({
type: 'ga-event',
payload: {
action: config.action,
category: config.category,
label: config.label,
}
}, '*');
}
function getTrackTitle(event) {
let el = event.target;
const trackContainer = el.closest('[class*="PlaylistItem__PlaylistItemComponent-sc"]');
if (!trackContainer) return;
const trackTitle = trackContainer.querySelector('[class*="PlaylistItem__Title-sc"]')?.textContent;
const trackArtist = trackContainer.querySelector('[class*="PlaylistItem__Author-sc"]')?.textContent;
return [trackTitle || '', trackArtist || ''].filter(Boolean).join(' - ');
}
document.addEventListener('click', function (event) {
const trackTitle = getTrackTitle(event);
const container = event.target.closest('[id*="eapps-audio-player-"]');
if (!container || !trackTitle) return;
const fullId = container.getAttribute('id');
const playerId = fullId.replace('eapps-audio-player-', '');
sendGtagEventFromIframe({
action: 'click',
category: `Elfsight Player (${playerId})`,
label: `Track clicked: (${trackTitle})`
});
}, true);
Please try it out and let me know if it helped
Unfortunately, I don’t know what any of that means and while I appreciate your work … I don’t have a clue what to do with it, where or how! So .. I’m just going to have to be content with not seeing that information. Thank you thought!
Dena
Hi there, @user2679
I completely understand you and agree that this information can feel a bit overwhelming. Still, I’d love to provide a bit more clarity, as I think it could really help you reach your goal
The 1st code should be added to the <head> part of this page. It means that the code should be added to your website’s HTML:
The same steps should be completed with the 2nd code, but you need to add it to this page.
And the last code should be added to the Custom JS field on the Style tab of your widget’s settings:
Once, these codes are added, the info about clicks will be sent to your Google Analytics dashboard. This article explains where you can find the info about clicks - Google Analytics 4 (GA4): Where to find my events - Elfsight Help Center.
If any further questions come up, don’t hesitate to ask them here. We’ll be happy to help 
Thank you so much!!! I’m going to give it a try!!! I appreciate the visuals as well as the step-by-step. This brain injury can make it hard for me to put certain more “abstract” things together. Not stupid but sometimes I just try so hard that I totally make things worse!
Fingers crossed!
Dena
No problem! Really hope you’ll get it work
We’re always here for you if anything else comes up!
Max .. apparently I don’t have a Google ID After reading everything .. I’m way too far over my head so I’ll just stick with not having the information I was hoping to be able to track. I won the 44th National Veteran’s CAF Competion 1st Place - Jazz Vocalist and am going to Indianapolis next month to perform AND pick up a gold medal. Every old lady needs at least one gold medal in her life! LOL. And I was hoping to see if getting way out of my comfort zone (I have pretty bad combat PTSD) would end up with a few more people hearing my music.
Oh well .. we tried and I thank you for trying so hard!!
Dena
Yeah, unfortunately it’s impossible to track clicks without Google ID. In case you’d like to get back to this question in the future, we’ll gladly advise!
Good luck at the vocal contest in Indianopolis
Got one! Can you possibly highlight exactly where in that huge amount of code I’m supposed to put it and is there anything in that code I need to make sure I remove once I put it there?
Sorry … I think I’m doing things. However … do I insert all those html codes into the html of each player?
Where does each code start and stop since you said there are 3 codes? All I see in the attachment is one long code! Believe me, Max, I’m trying really hard!!
Please check this message.
I’ve attached a screenshot with the codes you should use.
The 1st and the 2nd code should be added to the <head> part of your website’s HTML, not widget HTML.
The 3rd code should be added to the Custom JS field on the Style tab of your widget’s settings:
