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. Commanders Act 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 Commanders Act web container in an SPA environment?

2.1 Loading containers

Commanders Act web 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.

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 : Commanders Act site ID IDC : Commanders Act 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 Commanders Act 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 Commanders Act web Ccontainer

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

Last updated