Google Analytics in Extensions - July 2023 deadline

[BarryCarlyon]

Brief description

June 2023 will see the end of Google Analytics supporting Universal Analytics
Requiring users to move to Google Analytics 4

This is on a different domain to current. So the CSP requires modification.

Initially this seems to require allowing script and connect rules to include

• https://www.googletagmanager.com/
• https://*.google-analytics.com/

Additional context or questions

Filing as a bug (github) rather than a feature request (uservoice) as if CSP not fixed in time, there will be a flood of Extensions into the queue for the revision and/or removal of GA for something else if Twitch doesn't support new Google Analytics

https://support.google.com/analytics/answer/11583528?hl=en

[jbulava]

Ticket for tracking internally: ANC-3118.

[jbulava]

While there isn't an exact date to provide for the Extensions CSP to be updated, the team is looking to prioritize this addition for early 2023 to give developers plenty of time for review submissions before Google's deadline.

[luisvinicius09]

Hey, do you guys have new updates on this? Thanks in advance.

[jbulava]

@luisvinicius09 This is now actively being worked on, so we should have an update soon for this ticket.

[marcandrews]

Any updates on this? The CSP has been updated and everything is working as expected in my hosted test, but my extension review is currently stuck in a pending state. Any ideas?

Extension client ID: tdldrg6rlw5eewiwcpxo3dv0obyckc
Version 0.14.1 (ref:_00D5A16sES._5006e1veUIu:ref)

[BarryCarlyon]

Extension review issues are between you and extension review, if it's pending you should of got an email from extension review with issues. Or you are stuck due to the layoffs. Either way the bug tracker can't help you here, you need to contact the extension review team

Since for all we know as not the review team is that you have been blocked over something else (ie not google analytics)

[schneckentempo]

any updates on this? the deadline is just 3 days away

[BarryCarlyon]

Yes.

The CSP was updated.
The CSP guide was updated
The main "using analytics in extensions guide" was not

my notes follow:

In your view HTML(s), before closing head tag

</head>

add, generally immediately after your Extension Helper JS Script include

<script async src="https://www.googletagmanager.com/gtag/js?id=GCODE"></script>

• Substitute in your GCODE [note 1]

Then in an external javascript file

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'GCODE');

• Substitute in your GCODE [note 1]

for additional GDPR-ness

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'GCODE', { 'anonymize_ip': true, 'cookie_flags': 'max-age=7200;secure;samesite=none' });

• Substitute in your GCODE [note 1]

[note 1] GCODE being the Measurement ID from

• Analytics dashboard
• Admin for the Property
• Data Streams

[schneckentempo]

@BarryCarlyon @jbulava
I tested our extension locally where everything worked fine. In hosted test log messages are printed in the console when used with the Google Analytics Debugging chrome-extension but the events do not reach the debug view on analytics site itself. I also added the rules described in the issue to the configuration where it is marked in the screen here #755

There are minor differences to your notes like I do not use an external js file but directly declare another script tag after the first one. Also I use https://github.com/PriceRunner/react-ga4 due to migration. But as I said, locally everything works as expected.

The CSP was updated.
The CSP guide was updated
The main "using analytics in extensions guide" was not

Could you please state clear if things should work in hosted test and if the mentioned changes are live already?

[BarryCarlyon]

It's working for for me in production/released extension

the Google Analytics Debugging chrome-extension but the events do not reach the debug view on analytics site itself.

The debugger may not connect properly as it doesn't percolate the extra query parameter down to the nested iframe stack so the debugger doesn't connect

I also added the rules described in the issue to the configuration where it is marked in the screen here #755

You now have duplicate rules, this issue states the text above the box describing the default rules hasn't been updated to include the new defaults, the bit that starts "included by default" has not been updated to include the new rules that are added by default, see:

https://dev.twitch.tv/docs/extensions/life-cycle/#asset-hosting

was updated but the corresponding decsriptive text on the dev console has not which is what 755 pertains to. (The blue boxes indicate the issue is with the help text on the page)

So at the moment you have declared the same rule twice.

Could you please state clear if things should work in hosted test and if the mentioned changes are live already?

You are not logging a CSP error in the console, Therefore the issue is not CSP or Twitch, it's between you and GA4, GA4 can choose not to send events for a varierty of issues it seems.

There are minor differences to your notes like I do not use an external js file but directly declare another script tag after the first

Do you mean <script src="analytics.js"></script> or <script>content</script> the latter is not allowed and the former is an external JS file. (it is external to the HTML)

You cannot use "inline JS" and that would cause a permissions error to debug in the console

By

Then in an external javascript file

I mean do not use inline JS like the Google Analytics documentation generally suggests
I mean an external JS file to the HTML file

As for your extension all Javascript must be in an external file, as inline Javascript is not allowed.

[schneckentempo]

Thank you very much for your explanations and support. There was one tiny detail missing:
After trying many different approaches to get it working in hosted test the solution was to initialize gtag with cookie_flags set. This was already necessary previously. I actually did a test with setting cookieFlags (camelCase) like in the old/outdated docs but when looking closer it turned out with ga4 it has to be snake_case.

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'GCODE', { cookie_flags: 'max-age=7200;secure;samesite=none' });

[BarryCarlyon]

Good spot I'll add cookie_flags to my notes and next extension release(s)!