0

I have a setup tag for a Tracking service called Clicky that loads asynchronously on every page. I need to access "clicky" variable from another tag, which is only accessible after setup async script finishes loading.

For that reason, my tag script looks hacky. Is there any other way to check if an async script is loaded on Tag Manager context?

<script>  
  function clickyGoal() {
    try {
        clicky.goal('Email Capture');
    } catch(e) {
        setTimeout(clickyGoal, 200);
    }
  }
  clickyGoal();
</script>

EDIT: This is the main setup tag that fires on all pages.

<script type="text/javascript">
var clicky_site_ids = clicky_site_ids || [];
clicky_site_ids.push(<id-number>);
(function() {
  var s = document.createElement('script');
  s.type = 'text/javascript';
  s.async = true;
  s.src = '//static.getclicky.com/js';
  ( document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0] ).appendChild( s );
})();
</script>
  • Typically, you would hook into whatever loads the tag script and get notified when it is loaded and then execute your code. – jfriend00 Nov 9 '15 at 19:20
  • sounds right, could you give a simple example? – whitenoisedb Nov 9 '15 at 19:22
  • You would have to disclose the code that is loading something async for us to have any idea on how to hook into that. It depends entirely upon how it is being loaded. – jfriend00 Nov 9 '15 at 19:23
  • right. I've edited my post. – whitenoisedb Nov 9 '15 at 19:28
1

You can use the onload property of the script tag to see when the script is loaded:

<script type="text/javascript">
var clicky_site_ids = clicky_site_ids || [];
clicky_site_ids.push(<id-number>);
(function() {
  var s = document.createElement('script');
  s.type = 'text/javascript';
  s.async = true;
  s.onload = function() {
      clicky.goal('Email Capture');
  };
  s.src = '//static.getclicky.com/js';
  ( document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0] ).appendChild( s );
})();
</script>
| improve this answer | |
  • you're right. Actually it answers my question. However I'm talking from a Google Tag Manager context, where I have a setup tag that runs on every page. Plus, I have a specific tag that should run clicky.goal() fired on an specific page (and after setup tag is loaded). – whitenoisedb Nov 9 '15 at 19:50
0

In your main set up tag, you should push an event once it has completed loading:

<script type="text/javascript">
var clicky_site_ids = clicky_site_ids || [];
clicky_site_ids.push(<id-number>);
(function() {
  var s = document.createElement('script');
  s.type = 'text/javascript';
  s.async = true;
  s.src = '//static.getclicky.com/js';
  ( document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0] ).appendChild( s );

  // push event to dataLayer
  dataLayer.push({
     'event': 'clicky ready'
  })
})();
</script>

In your subsequent tags that require the "clicky" variable, you would just need to add to your trigger the "clicky ready" event.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.