Trigger event from external domain Google Analytics

Question

I have a shop on a third party service. I want to trigger a event when the product gets purchased.

The third party service allows us to add script snippets.

I'm doing this, but I can't see any custom Events on Reports > Real Time > Events on Google Analytics:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXX-X"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXXXXXXX-X'); //my ID
  gtag('send', 'event', 'demo');
  
</script>

Am I missing something? Or is this a restriction that won't allow us to send events from external domains?

To test this out I'm using https://jsfiddle.net/ and codepen.

Update

I'm trying it from an external domain of my own and it doesn't register the event either. This time I tried with google analytics instead as this is the exact same code I use on my main domain:

    <script src="https://www.google-analytics.com/analytics.js"></script>
    <script>
        
        ga('create', 'UA-XXXXXXXX', 'auto');
        
        ga('send', 'event', 'myTestEvent', 'submit', {
            hitCallback: function() {
                // this gets triggered successfully 
                console.log("triggered callback!");
            }
        });
    </script>

Just to clarify, the analytics ID I'm using is the one from my main domain. I would assume using such ID will trigger all events to that account.

Answer 1

1. You have wrong signature for the gtag send event call. https://developers.google.com/analytics/devguides/collection/gtagjs/sending-data

2. Your GA code works (under the update section).

3. You don't end debugging your implementation on real time reports. You go further:

• Put away GTM.
• Open your devtools, then the console and the network tab.
• Execute your code in the console. Then check the network tab.
• Do you see your event? You should. Since I see it when I do it locally.
• Do you see that it's proper? I do. It is proper enough to be sent to GA.
• Compare the property ID that you're using in your code to the property id that you're trying to see the real time events in. Make sure they're the same.
• All good by now? It means the issue is in GTM. Now open GTM, go to the preview mode.
• Confirm that your tag with the custom html fires.
• Debug why it doesn't fire if it doesn't.

Also, this is not the way you're supposed to utilize GTM. I suggest reading most basic guides on GTM utiliation. You don't need to write any JS at all for this task. GTM provides UI that is ample for this.

Additionally, you may try using the adswerve debugger extension. It will help with this kind of debugging by almost completely eliminating the need to go to the network tab.