import
angularJsTagCommander
from
'angularjs-tag-commander'
;// declar the angularjsTagCommander
angular
.module
('tag-commander-exemple-app'
, [angularJsTagCommander
]).config
(['TagCommanderProvider'
, (TagCommanderProvider
) => {// you need to provide URIS to load containers script.
// function addContainer (id, uri, node)
TagCommanderProvider
.addContainer
('a_name_for_the_container_id'
,'/the/path/to/tag-commander-container.js'
,'head'
);// you can add as many container as you like
// but you can also remove them
TagCommanderProvider
.removeContainer
('my_tag_container_id'
);// you can set debug by setting this to true
TagCommanderProvider
.setDebug
(true
);// you can track the url of your app by setting this, it will reload the containers on each page change
TagCommanderProvider
.trackRoutes
(true
);// you can also set the name of the event witch is triggered the page change, // the default is set to '$routeChangeSuccess'
TagCommanderProvider
.setPageEvent
('$stateChangeSuccess'
); }]);
In the provider's method 'addContainer', The "node" parameter can either be set to 'body' or 'head', by default the container will be placed in the head.
If you have set TagCommander.trackRoutes(true); in your application configuration, you can configure witch container will be reloaded on witch route, else what you need to do it in your controller. the containers will be reloaded after the controller has been executed, but if you change or set a varible in your controller methode you will need to call TagCommander.reloadAllContainer(options) to propagate the changes to your containers.
export
const
appRouteProvider
= ['$routeProvider'
,'$locationProvider'
,function
($routeProvider
,$locationProvider
) {$routeProvider
.when
('/home'
, {controller
:homeComponent
,tcReloadOnly
: ['4056'
,'12'
]// will only reload the container 4056_12
}) .when
('/shop'
, {controller
:shopComponent
,tcReloadOnly
: [ {ids
:'4056'
,idc
:'12'
}, {ids
:'4056'
,idc
:'11'
,options
: ["datastorage"
,"deduplication"
]// you can set the options for your container
} ] }) .when
('/dashboard'
, {controller
:dashboardComponent
,// if no tcReloadOnly is set it will reload all the containers if the trackRoute is true (in the configuration)
}) }];
If you don't set the TagCommanderProvider.trackRoutes(true); (or you set it to false) you will have to reload your container manually
// somewhere in your controller
// reload a specifique container
TagCommander
.reloadContainer
(ids
,idc
,options
);// or you can reload all the containers
TagCommander
.reloadAllContainer
(options
);
// first of all you need to inject the tagCommander module in your page controller
export default
['$scope'
,'TagCommander'
,function
shopController
(TagCommander
) {then once in your controller you can set the page varibles. The method set Vars only accept objects
TagCommander
.setTcVars
({env_template
:"shop"
,env_work
:"dev"
,env_language
:"en"
,user_id
:"124"
,user_logged
:"true"
,user_age
:"32"
,user_newcustomer
:"false"
, });// you can also override some varible
if
(isNewUser
) {TagCommander
.setTcVars
({user_newcustomer
:"true"
, }); }// or set/update them individualy
TagCommander
.setTcVar
('env_template'
,'super_shop'
); }
you can set your tc_vars with a directive that you can implement on the DOM node
<html-element
class
="sm-button green-500"
tc-set-vars
='{"env_language": "fr"}'
></html-element
>// other exemples
<template
class
="sm-button green-500"
tc-set-vars
='{"env_language": $ctrl.default_language}'
></template
> <div
class
="sm-button green-500"
tc-set-vars
='{"env_language": $scope.default_language}'
></div
>
You need to provide the key of your var and it's value. The object provided have to be a JSON between single quote. You can also use your $ctrl and $scope vars, but you do not need to surround them with double quote.
In your application controller
TagCommander
.removeTcVars
('env_template'
);
var
eventId
='1234'
;var
type
='CLICK'
;var
data
='{"env_language": $ctrl.default_language}'
;TagCommander
.captureEvent
(eventId
,type
,data
);
<button
class
="sm-button green-500"
tc-event
='{eventId: myEventId, data: {"env_language": $scope.default_language}}'
> change to default language </button
>
When you update your varible you also need to update your container to propagate the changes
var
idc
='1234'
;var
ids
='1234'
;var
options
= {exclusions
: ["datastorage"
,"deduplication"
,"internalvars"
,"privacy"
] };TagCommander
.reloadContainer
(ids
,idc
,options
);// or you can reload all the containers
TagCommander
.reloadAllContainer
(options
);
// these methodes let you get and set cookies with Tag Commander
TagCommander
.setCookie
(name
,value
,time
);TagCommander
.getCookie
(name
);