SPA implementation guide

1. What is an SPA environment?

An SPA (Single Page Application) is a website or a web application that loads elements dynamically according to user actions rather than loading new pages after every interaction. Web container offers functions allowing you to load all or a part of the container within an SPA environment, allowing you to call desired tags on every action performed by a user.

These functions need to be implemented in your site’s source code by either your technical partner or by your own technical staff.

2.How to implement TagCommander in an SPA environment?

2.1 Loading containers

TagCommander’s containers are loaded once upon page load within a Single Page Application Environment. In order to reload containers on user actions, you can use the following features:

  • tC.container.reload() : this function allows you to reload all the containers on a page. Elements shared by containers (deduplication calculation, external variables initialization, internal variables calculation, calculation of cookies dropped with data storage and the initialization of the Privacy cookie) are only loaded once to optimize performance. Please refer to the “Learn more – Structure of a TagCommander container” article for further explanations.

tC.container.reload({ exclusions: ["datastorage","deduplication","internalvars","privacy"], events: {label1: [{targeted_element},{event_variables}], label2: [{},{}]}
})

This function allows to reload all of a page’s containers while excluding some of their elements. Elements to exclude need to be mentioned in the “exclusions” table.

Ex: if you wish to reload the container without recalculating internal variables, you need to call this function: tC.container.reload({exclusions:["internalvars"]})

This function also allows to call the tC.event function that loads selected tags upon user action. The tC.event function is executed after the container elements reloading. label: specify the name you wish to call your function (ex : "click", "add_to_cart"…). targeted_element: DOM elements on which the event applies. {} if not necessary.

event_variables: variables specific to the event. {} if not necessary.

Ex: tC.container.reload({events: {label1: [{target: document.getElementById('targeted_element'}, {"page_name":"", "product_id":""}]}})

  • tC.container_IDS_IDC.reload() : this function allows loading a single container (to do so, you will have to specify the site’s and the container’s ID) on a page that contains more than one.

IDS : TagCommander site ID

IDC : TagCommander container ID

  • tC.container_IDS_IDC.reload({ exclusions: ["datastorage","deduplication","internalvars","privacy"], events: {label1: [{targeted_element},{event_variables}], label2: [{},{}]} })

This function allows loading a single container (to do so, you will have to specify the site’s and the container’s ID) on a page that contains more than one while excluding some of their elements. Elements to exclude need to be mentioned in the “exclusions” table, and event functions need to be mentioned in the “events” object, as for the tC.container.reload({exclusions:["datastorage","deduplication","internalvars","privacy"]}) function.

2.2 Loading tags

To load selected tags upon user action, you will need to implement this function:

  • tC.event.label() : this function allows loading selected tags upon user action.

label: specify the name you wish to call your function.

Ex: implement the tC.event.step2_basket function if your wish to call specific tags on the 2nd step in the purchase cart.

You can also set-up a “generic” function like tC.event.all on all of your virtual pages to call tags on all of your SPA sites (Analytics tags, for instance). You will then use perimeters and constraints from the TagCommander’s interface to control other tags’ execution.

  • tC.event.label(this, {"page_name":"", "product_id":""}) : this function allows loading selected tags based on user action and to define variables specific to said action (ex : the name of a virtual page, a specific product id …).

2.3 Going further: Structure of a TagCommander Container

You will find below a list of all the elements that load inside the TagCommander container upon first load, as well as the tC.container.reload,(tC.container_IDS_IDC.reload() and tC.event.XXX() functions that are called.

Container element

Definition

1st container load

tC.container.rel oad() function

tC.container_ID

S_IDC.reload() function

tC.event.XXX() function

Deduplication functions

They identify the

visitor’s traffic source

yes

Yes (once loaded)

yes

no

External variables initialization

They define all external variables that do not already exist

yes

yes

yes

no

Dynamic JS 1

Calls an external JavaScript file prior to the internal variables’ declaration

yes

no

no

no

Static JS 1

Calls custom JavaScript code prior to the internal variables’ declaration

yes

no

no

no

Internal variables

Calculates internal variables

yes

yes

yes

no

Dynamic JS 2

Calls an external JavaScript file after the external variables’ declaration

yes

no

no

no

Static JS 2

Calls an external JavaScript file after the internal variables’ declaration

yes

no

no

no

Data storage

Calculates the value of cookies created with the "data storage" module

yes

yes

yes

no

"Container loaded" & "DOM ready" & "Clicks"

& "Form submission " & "Scroll" tags + rules

Executes tags called on the "Container loaded", "DOM

ready", "Clicks",

"Form submission" and

"Scroll" triggers, as well as on the rules associated to the

yes

no

no

no

container’s first load.

"Custom" tags + rules

Executes tags called on the "Custom"

triggers, as well as on the rules associated to the container’s loading or reloading.

yes

yes

yes

yes

Events + rules

Executes events triggered on the previous tc_events function

yes

no

no

no

Privacy

Re-initializes the Privacy cookie to take into account users’ choices.

yes

yes

yes

No

Tag Hierarchy

Identifies piggybacked tags (tags sideloaded by other tags in the

"TagPerformanc e" module)

yes

no

no

no

Event listener

Reloads event listeners (which allow to track actions performed by any user

browsing the site (clicks, scrolls …))

yes

no

no

no

Last updated