title: How do I implement support for customers' GA4 container and Meta Pixel tags on a web app?
body: <p>I am working on a web application that is served as an iframe to several clients. I am interested in adding both Google Analytics 4 and Facebook/Meta Pixel analytics tags to the page (through Google Tag Manager if possible) so that the <em>customer</em> can receive the data, as customers have been asking for this.</p>
  <p>I understand I can add this integration via GTM to the website by creating a GTM account, creating a container for the website, adding the provided GTM script and iframe to the head and body respectively, and adding GA4 and Pixel as tags to my GTM account. However, this will only provide <em>myself</em> with the page usage data. I could alternatively add a customer's GA4 and Pixel tags to the site, but then only that one customer would be receiving the data. I want to be able to dynamically send the GA4 and Pixel data to whichever customer is currently displaying the app to an end user.</p>
  <p>I've seen there is a way to grant access to your GTM account or a specific container through GTM, but doing this would provide one customer with <em>all</em> the data associated with the web app, not just their implementation of it. This solution would work if only one customer was using the website, but not when it is served out to anyone who adds the iframe to their website.</p>
  <p>The Pixel tag provided by Meta/Facebook to include in the head:</p>
  <pre><code>    &lt;!-- Meta Pixel Code --&gt;
          &lt;script th:unless=&quot;${pixelID == ''}&quot;&gt;
              !function(f,b,e,v,n,t,s)
              {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
                  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
                  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
                  n.queue=[];t=b.createElement(e);t.async=!0;
                  t.src=v;s=b.getElementsByTagName(e)[0];
                  s.parentNode.insertBefore(t,s)}(window, document,'script',
                  'https://connect.facebook.net/en_US/fbevents.js');
              fbq('init', pixelID);
              fbq('track', 'PageView');
          &lt;/script&gt;
          &lt;noscript th:unless=&quot;${pixelID}&quot;&gt;
              &lt;img height=&quot;1&quot; width=&quot;1&quot; style=&quot;display:none&quot;
                   th:src=&quot;${'https://www.facebook.com/tr?id=' + pixelID + '&amp;ev=PageView&amp;noscript=1'}&quot;/&gt;
          &lt;/noscript&gt;
          &lt;!-- End Meta Pixel Code --&gt;
  </code></pre>
  <p>Is solving this problem as simple as replacing the Pixel ID pixelID (and Google analytics container ID in the case of GA4) with a stored customer ID value?</p>
  <p>Please let me know if there is anything I can help to clarify about the situation or my problem
  Thanks!</p>
  <p>Edit -- For those looking for a solution to this, I have found a great <a href="https://www.simoahava.com/analytics/cookieless-tracking-cross-site-iframes/" rel="nofollow noreferrer">blog post here</a> detailing how to implement the event forwarding discussed in the top comment.</p>