A lot of information has been shared about "normal" website user interface testing using Cypress, an end-to-end testing tool, but not so much about testing analytics implementations. You can set up tests of your website features, but also tests of how your tag management system, and added tags, are running on your web pages. This is in no way a new feature since both Cypress and other end-to-end testing tools have been able to do this for quite some time. But surprisingly few companies seem to be testing their analytics implementation this way. In this session, Peter will show you some examples of how you can start testing your Google Tag Manager and Google Analytics implementation using Cypress. For your further learning, Peter will also share resources for you to dive into at your own pace.

1. Using an end-to-end testing tool to
validate website analytics
implementations
Superweek 2023

2. 2 06-02-2023
Who am I?
Peter Meyer
Implementation Lead
Aller Media Denmark
Have worked at
Aller Media (now twice), DFDS, IIH Nordic,
Nordea, Jellyfish, GN ReSound, …
Yes, I have several ex-colleagues here today ;-)
Knows something about
Implementation, setup, and use, of products like
Google Tag Manager, Google Analytics, Adobe
Analytics, Tealium iQ, Tealium AudienceStream,
and more…
Me, artistic portrait by Vana

3. 3 06-02-2023
Where do I work?
Aller Media
• A publishing company founded in 1873
(by the two young folks to the right)
• Separate companies in Denmark, Sweden,
Finland and Norway
• Leading publisher of magazines and weeklies in
Denmark and the Nordics
• Oldest weekly magazine in Denmark
(1874 – present day)
• Informing and entertaining more than
2 million Danes every month of the year
• Publisher of Danish household brands such as
SE og HØR, BILLED-BLADET, femina, and
ELLE
Laura and Carl Aller, 1873’ish

4. What is
End-to-End
testing?

5. 06-02-2023
5
E2E
Integration
Unit
Individual parts of source code
Source code working together
User journeys

6. Headless browser
Maybe included in an
automated build process
Visible browser
For you to see while it runs

8. 8 06-02-2023
End-to-End testing products
• Cypress
https://www.cypress.io/
Node.js based (JavaScript and TypeScript), nice
UI for visible test runs.
• Playwright (Microsoft)
https://playwright.dev/
More browsers, platforms and languages
supported.
• Puppeteer (Google)
https://developer.chrome.com/docs/puppeteer/Nod
e.js based, only supporting Chrome browser
testing.
• Selenium
https://www.selenium.dev/
The “old-school” end-to-end testing product.
Supports languages like Java, Python, C#.
• Leapwork
https://www.leapwork.com/
No-code testing product.
No free options available.
• And more…
= Supported by BrowserStack Automate

9. 06-02-2023
9
E2E
Integration
Unit
Individual parts of source code
Source code working together
User journeys
?

10. 06-02-2023
10
E2E
Integration
Unit
Individual parts of source code
Source code working together
User journeys
Tracking

11. So, what’s Cypress
all about?

12. 12
06-02-2023

13. What will
we test today?

14. • What we test
14 06-02-2023
Where we test
https://pmeyer.dk
• My own private blog.
• A static Hugo generated site.
Implemented analytics products
• Google Tag Manager
• Page information pushed to data layer
• Google Analytics 4
• Enhanced measurement
(using default settings)

15. 15 06-02-2023
What we test
After page load
• GTM: Page information in data layer
• GA4: “page_view” event request
After scroll to bottom of page
• GTM: “gtm.scrollDepth” event in data layer
• GA4: “scroll” event request
After click on Twitter social link
• GA4: “click” event request

16. Running
the tests

21. Let’s have a look
at some of the code

22. Scroll to bottom of page and check footer visibility
Scroll to a position and check an item on the page.
22 06-02-2023
it('Scroll to bottom of page and check footer visibility', () => {
// Scroll to bottom of page
cy.scrollTo('bottom', {
ensureScrollable: false,
easing: 'linear',
duration: 2000,
});
// Check for footer visibility
cy.get('.footer').should('be.visible');
});
Scroll to bottom of page
Check that the footer element exists
in the DOM and is visible

23. Check Twitter social link and click it
Get, check, and click, an item on the page.
23 06-02-2023
it('Check Twitter social link and click it', () => {
cy.get('a[title=Twitter]').then((element) => {
// Check link attributes
const twitterLink = element[0];
assert.equal(twitterLink.className, 'widget-social__link widget__link btn',
'Link className contains expected value');
assert.equal(twitterLink.href, 'https://twitter.com/pmeyerdk',
'Link href contains expected value');
assert.equal(twitterLink.target, '_blank',
'Link target contains expected value');
});
// Click link
cy.get('a[title=Twitter]').click();
});
Check element attributes
for expected values
Clicking the element

24. Checking the GTM Data Layer and its content
24 06-02-2023
it(‘Has a dataLayer and loads GTM', () => {
// Check Data Layer existance and 'gtm.js' event item
cy.window().then((window) => {
assert.isDefined(window.dataLayer, 'Data Layer is defined');
assert.isDefined(window.dataLayer.find(x => x.event === 'gtm.js'), 'GTM is loaded');
});
});
it(‘Has correct dataLayer contents at load time', () => {
// Check for initial Data Layer item and expected parameters
cy.window().then((window) => {
const dataLayer = window.dataLayer[0];
assert.deepInclude(dataLayer, {
'page_author': 'Peter Meyer',
'page_kind': 'home',
'page_language': 'en',
'page_permalink': 'http://pmeyer.dk/',
'page_title': 'PMEYERDK',
'page_translated': false,
'page_type': 'page',
}, 'Expected parameters found in Data Layer at load time');
});
});
Check GTM load event
Check parameters for
expected values in the
initial Data Layer push

25. Intercept and block all GA4 requests
Code included here runs before each test.
beforeEach(function () {
cy.intercept({
url: 'https://**.google-analytics.com/g/collect?v=2&**'
},
{
statusCode: 503
}).as('ga4Request');
});
25 06-02-2023
Define a default response for the
intercepted requests
Intercept requests based on
wildcard URLs
Set an alias for the interception

26. Load page and wait for GA4 ‘page_view’ event
Here we also check for expected event payload.
26 06-02-2023
it('Load page and check for GA4 'page_view' event', () => {
// Load blog home page
cy.visit(cfg.pages.home);
// Wait for GA4 'page_view' event to be sent
cy.wait('@ga4Request').then(({ request }) => {
const qsParams = qsToObject(request.url);
assert.isDefined(qsParams, 'Query string is defined');
assert.deepInclude(qsParams, {
'tid': cfg.gaMeasurementId,
'en': 'page_view',
'dl': cfg.pages.home,
}, 'Query string contains expected parameters');
})
});
Wait for the GA4
“page_view” request and
check its payload
Visit the homepage of my blog

27. Let’s sum up.

28. 28 06-02-2023
Thank you for inspiration, tips and help along the way
• David Vallejo
Send GA4 events to multiple Measurement IDs:
https://www.thyngster.com/send-google-analytics-
4-ga4-events-to-multiple-measurement-ids
• Dumky de Wilde
Testing GTM and UA using Cypress (+chat about
same): https://www.dumky.net/posts/analytics-
and-tag-testing-with-cypress/
• Lukas Oldenburg
Testing Tealium iQ implementations:
https://thebounce.io/using-mocha-chai-js-tealium-
for-client-side-data-layer-testing-9eea7807942a
• Simo Ahava
Testing GTM using PhantomJS:
https://www.simoahava.com/analytics/automated
-tests-for-google-tag-managers-datalayer/
• Gleb Bahmutov
Cypress knowledge, loads of examples, tips &
tricks: https://glebbahmutov.com/cypress-
examples/
• Cypress
For Cypress itself: https://www.cypress.io/
• And more…

29. Thanks!
Peter Meyer
Implementation Lead
Aller Media Denmark
Twitter
https://twitter.com/pmeyerdk
Mastodon
https://masto.measure.chat/@pmeyerdk
LinkedIn
https://www.linkedin.com/in/pmeyerdk