title: Detect when Google Tag Manager has finished loading tags
body: <p>I'm using Google Tag Manager and also javascript loaded by <a href="https://webpack.js.org/" rel="nofollow noreferrer">Webpack</a>.</p>
  
  <p>(In the <code>head</code> tag of my page, I first have the GTM loading script, and then I have the <code>manifest.js</code>, <code>vendor.js</code>, and <code>page-specific.js</code> compiled by Webpack.)</p>
  
  <p><strong>If I'm loading a certain javascript library via GTM (in my case, I have the Facebook Pixel as a custom tag), how can I instruct a function in my <code>page-specific.js</code> to wait until the Facebook Pixel tag has been loaded by GTM?</strong></p>
  
  <p>(The function calls <code>fbq('track', 'Purchase', {value: facebookTrackingPurchaseValue, currency: 'USD'});</code>, which depends on the Facebook Pixel having been loaded already.)</p>
  
  <p>Right now, it's a race condition. </p>
  
  <p>And I'm handling it in a clunky way (by adding a 4-second timeout in my <code>page-specific.js</code> so that there is a decent likelihood that the Facebook Pixel within GTM has finished loading by then).</p>
  
  <p>To be clear: I already know how to set multiple tags <em>within</em> GTM to wait for a GTM tag to load, but that's not what I'm trying to do here (since my <code>page-specific.js</code> is not inside GTM).</p>
  
  <p>I have searched <a href="https://developers.google.com/tag-manager/quickstart" rel="nofollow noreferrer">the documentation</a> and tutorials everywhere, and I've never found anyone who describes how to manage this kind of dependency.</p>
  
  <p>I appreciate your suggestions.</p>