My presentation for my punchcard prize entry on the SuperWeek 2020 . Running any Tag Management System in a Server-Side Mode.

1. SUPERWEEK 2020
Punchcard Prize Entry
Presented by David Vallejo
29th Jan. 2020
Galyatető - HU
Super Week 2020 . Punchard Prize

2. SUPERWEEK 2020
Punchcard Prize Entry
Presented by David Vallejo
29th Jan. 2020
Galyatető - HU
Who I am
David Vallejo
Implementation Consultant
Blog: www.thyngster.com
@thyng

3. SUPERWEEK 2020
Punchcard Prize Entry
Presented by David Vallejo
29th Jan. 2020
Galyatető - HU
Presenting …
In the worst Timing possible for releasing this …
After Today’s GTM Team Announcement

4. SUPERWEEK 2020
Punchcard Prize Entry
Presented by David Vallejo
29th Jan. 2020
Galyatető - HU
TMS . Pseudo Server-Side
Running ANYTag Management System in a Server-Side mode

5. Tool Goal
Fire our hits or pixels via server-side
relying on any Tag Management System
as a launcher.

6. We will be using
1 NODE JS ( as a webserver/ webhooks endpoint )
2 Puppeteer ( Chrome Headless Browser )

7. How it works
.

8. How it works
.
● A public webhooks endpoint is
created (
https://sstms.ourdomain.com/eve
nts)

9. How it works
.
● A public webhooks endpoint is
created (
https://sstms.ourdomain.com/eve
nts)
● Events are pushed into an internal
Queue for processing

10. How it works
.
● A public webhooks endpoint is
created (
https://sstms.ourdomain.com/eve
nts)
● Events are pushed into an internal
Queue for processing
● Each 4 events or 30 seconds the
events are dispatched to a
headless chrome session via a
Puppeteer instance

11. Confidential Customized for Lorem Ipsum LLC Version 1.0
What are the webhooks

12. Why we need a Queue
Launching a browser can be a very
cpu/ram consuming process, so
loading a puppeteer instance on
each page load would be a killer
solution, therefore we’ll be using a
Queue System, in order to be able to
batch the events.

13. The Queue
The queue will be
processed when:
- The queue has more than 4 events
or
- After 30 seconds since the last
queue release

14. How it Works
1 NodeJS will act as a
webhook endpoint
2 We push events to our
NodeJS endpoint
3 When the Queue is ready
a Puppeteer instance is
launched
4 An html is loaded where
our GTM container and
our pushes are
dynamically pushed in

15. How we push the events
POST REQUEST
http://localhost/event/{{our-event-name}}
Request Body
{ pageType: ‘pdp’ }
Content-Type
application/json

16. How we push the events
POST REQUEST
http://localhost/event/{{our-event-name}}
Request Body
{ pageType: ‘pdp’ }
Content-Type
application/json

17. How we push the events
POST REQUEST
http://localhost/event/{{our-event-name}}
Request Body
{ pageType: ‘pdp’ }
Content-Type
application/json

18. How we push the events
POSTREQUEST
http://localhost/event/{{our-event-name}}
RequestBody
{ pageType: ‘confirmation page’ }
Content-Type
application/json
.

19. Demo
Since a demo is worth a
thousand slides, let’s see
it in action

20. To have in mind
● This is not meant to be a production ready tool ( it should work fine under
low events environments ).
● Implemented Queue is currently in-memory -> If the NodeJS instance is
restarted you’ll lost the non-processed events.

21. Fair Play

22. https://github.com/david-vallejo-com/server-side-tms/

23. Thank you,
SuperWeekers
@thyng