How do I implement support for customers' GA4 container and Meta Pixel tags on a web app?

user_19728936 0
Viewed 43

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 customer can receive the data, as customers have been asking for this.

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 myself 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.

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 all 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.

The Pixel tag provided by Meta/Facebook to include in the head:

    <!-- Meta Pixel Code -->
        <script th:unless="${pixelID == ''}">
            !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');
        </script>
        <noscript th:unless="${pixelID}">
            <img height="1" width="1" style="display:none"
                 th:src="${'https://www.facebook.com/tr?id=' + pixelID + '&ev=PageView&noscript=1'}"/>
        </noscript>
        <!-- End Meta Pixel Code -->

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?

Please let me know if there is anything I can help to clarify about the situation or my problem Thanks!

Edit -- For those looking for a solution to this, I have found a great blog post here detailing how to implement the event forwarding discussed in the top comment.

google-tag-manager pixel google-analytics meta-tags tags
1 Answers

You typically don't go GTM. While implementing user GTMs is an option, it's not a good option. It's too much work on the vendor side, but it also breaks tracking logic for the client unnecessarily into multiple containers, making debugging and implementation a lot harder and less obvious. Having an iframed GTM has other issues too. Like potential double tracking of pageviews if you're not careful and so on.

The best support an iframed vendor can do for their parent window clients (and the industry standard for it) is pushing window messages to the parent. All kinds of messages, indicating all actions users are doing in the iframe, indicating all page changes if there are any, indicating conversions and flow abandonment if applicable.

Then, have it documented with examples of window listeners that can catch those events and retranslate them into proper dataLayer pushes. This would be very considerate.

If you want to go further, you could make a git repo with the container export that would have a tag to deploy the listener as well as variables triggers and test tags for pseudo-tracking all the possible iframe interactions.

user_37009930
Related