This developer's guide walks you through the steps required to access, create, and manage entities within a Google Tag Manager account via the Tag Manager API v2.
Introduction
This guide walks you through various steps to access and configure a Google Tag Manager account. Upon completion, you will have a basic understanding of how to do the following tasks:
- Create a Tag Manager service object.
- Authenticate and authorize a user.
- Work with the Tag Manager API to access and manage resources.
Before you begin
Before you begin the guide, we recommend that you become familiar with Google Tag Manager by visiting the Google Tag Manager help center .
Using a test account
If you intend to use the Tag Manager API to create, configure, or delete entities, we recommend that you implement and verify your code with a test account. Using a test account will help prevent you from making accidental changes to an active account. Once you've tested and confirmed that your code is working as expected using the test account, then you can start using the implementation with your real accounts.
Select a language
Select the programming language you intend follow examples in:
Python
Pythonis selected for all code snippets in this guide.
JavaScript
JavaScriptis selected for all code snippets in this guide.
Program overview
The example program included in this guide is a command-line app. Given an account ID, the app finds a container named Greetings and creates a Universal Analytics tag in that container. When a user visits hello-world.html, the tag sends a pageview hit.
To develop this application, you need to follow these steps:
- Set up your development environment and project in the Google API Console.
- Create a Tag Manager service object.
- Authorize access to a Tag Manager account.
- Create a Tag Manager service object.
- Query the API, handle the response, and output the results.
- Get an initialized Tag Manager service object.
- Use the Tag Manager service object to query the
Tag Manager API to do the following tasks:
- Retrieve the Greetings container for the authenticated Google Tag Manager account.
- Create a new workspace.
- Create the Universal Analytics tag.
- Create the trigger to fire the tag.
- Update the tag to fire on the trigger.
Set up your development environment and project
Create the Greetings container
This guide assumes you have a Google Tag Manager account with a container named Greetings . Follow the instructions for Setup and Workflow (Web) to create an Accountand a Containernamed Greetings .
Install a client library
Before you start, install and configure a Google APIs client library .
Create and configure a project in the Google API Console
To get started using Tag Manager API, you need to first use the setup tool , which guides you through creating a project in the Google API Console, enabling the API, and creating credentials.
This guide uses an Installed Applicationauthentication
flow. Follow the instructions below to create your project credentials. When
prompted, select Installed Application
for APPLICATION
TYPEand Other
for INSTALLED APPLICATION
TYPE.
- From the Credentials page, click Create credentials > OAuth client ID to create your OAuth 2.0 credentials or Create credentials > Service account key to create a service account.
- If you created an OAuth client ID, then select your application type.
- Fill in the form and click Create .
Your application's client IDs and service account keys are now listed on the Credentials page. For details, click a client ID; parameters vary depending on the ID type, but might include email address, client secret, JavaScript origins, or redirect URIs.
Download the client details by clicking the Download JSONbutton. Rename this file to client_secrets.json
. This file will be
used later on for authentication purposes.
Create a Tag Manager service object
The Tag Manager service
object is what you'll use to make
API requests.
The steps required to create a Tag Manager service object are as follows:
- Authorize access to a Google Tag Manager account.
- Instantiate the Tag Manager service object.
Authorize access to a Google Tag Manager account
When a user starts an application built with the Google Tag Manager API, they will have to grant the application access to their Google Tag Manager account. This process is called authorization. The recommended method for authorizing users is OAuth 2.0. If you'd like to learn more, read Tag Manager API Authorization .
The code below uses the project and client details created above to authenticate the user of the application and asks their permission to access Google Tag Manager on their behalf.
The application will attempt to open the default browser and navigate the user to a URL hosted on google.com. The user will be prompted to sign-in and grant the application access to their Tag Manager account. Once granted, the application will attempt to read a code from the browser window, then close the window.
Note: If an error occurs, the application will instead prompt the user to enter their authorization code on the command line.
Python
"""Access and manage a Google Tag Manager account.""" import argparse import sys import httplib2 from apiclient.discovery import build from oauth2client import client from oauth2client import file from oauth2client import tools def GetService ( api_name , api_version , scope , client_secrets_path ): """Get a service that communicates to a Google API. Args: api_name: string The name of the api to connect to. api_version: string The api version to connect to. scope: A list of strings representing the auth scopes to authorize for the connection. client_secrets_path: string A path to a valid client secrets file. Returns: A service that is connected to the specified API. """ # Parse command-line arguments. parser = argparse . ArgumentParser ( formatter_class = argparse . RawDescriptionHelpFormatter , parents = [ tools . argparser ]) flags = parser . parse_args ([]) # Set up a Flow object to be used if we need to authenticate. flow = client . flow_from_clientsecrets ( client_secrets_path , scope = scope , message = tools . message_if_missing ( client_secrets_path )) # Prepare credentials, and authorize HTTP object with them. # If the credentials don't exist or are invalid run through the native client # flow. The Storage object will ensure that if successful the good # credentials will get written back to a file. storage = file . Storage ( api_name + '.dat' ) credentials = storage . get () if credentials is None or credentials . invalid : credentials = tools . run_flow ( flow , storage , flags ) http = credentials . authorize ( http = httplib2 . Http ()) # Build the service object. service = build ( api_name , api_version , http = http ) return service def main ( argv ): # Define the auth scopes to request. scope = [ 'https://www.googleapis.com/auth/tagmanager.edit.containers' ] # Authenticate and construct service. service = GetService ( 'tagmanager' , 'v2' , scope , 'client_secrets.json' ) if __name__ == '__main__' : main ( sys . argv )
JavaScript
< html > < head > < script type = "text/javascript" > // Your Client ID can be retrieved from your project in the Google // Developer Console, https://console.developers.google.com var CLIENT_ID = TODO ; var SCOPES = [ 'https://www.googleapis.com/auth/tagmanager.manage.accounts' , 'https://www.googleapis.com/auth/tagmanager.edit.containers' , 'https://www.googleapis.com/auth/tagmanager.delete.containers' , 'https://www.googleapis.com/auth/tagmanager.edit.containerversions' , 'https://www.googleapis.com/auth/tagmanager.manage.users' , 'https://www.googleapis.com/auth/tagmanager.publish' ]; // Parameter values used by the script ACCOUNT_PATH = TODO ; // such as: 'accounts/555555'; CONTAINER_NAME = 'Greetings' ; WORKSPACE_NAME = 'Example workspace' ; /** * Check if current user has authorization for this application. * * @param {bool} immediate Whether login should use the "immediate mode", which * causes the security token to be refreshed behind the scenes with no UI. */ function checkAuth ( immediate ) { var authorizeCheckPromise = new Promise (( resolve ) = > { gapi . auth . authorize ( { client_id : CLIENT_ID , scope : SCOPES . join ( ' ' ), immediate : immediate }, resolve ); }); authorizeCheckPromise . then ( handleAuthResult ) . then ( loadTagManagerApi ) . then ( runTagManagerExample ) . catch (() = > { console . log ( 'You must authorize any access to the api.' ); }); } /** * Check if current user has authorization for this application. */ function checkAuth () { checkAuth ( true ); } /** * Initiate auth flow in response to user clicking authorize button. * * @param {Event} event Button click event. * @return {boolean} Returns false. */ function handleAuthClick ( event ) { checkAuth (); return false ; } /** * Handle response from authorization server. * * @param {Object} authResult Authorization result. * @return {Promise} A promise to call resolve if authorize or redirect to a * login flow. */ function handleAuthResult ( authResult ) { return new Promise (( resolve , reject ) = > { var authorizeDiv = document . getElementById ( 'authorize-div' ); if ( authResult && ! authResult . error ) { // Hide auth UI, then load client library. authorizeDiv . style . display = 'none' ; resolve (); } else { // Show auth UI, allowing the user to initiate authorization by // clicking authorize button. authorizeDiv . style . display = 'inline' ; reject (); } }); } /** * Load Tag Manager API client library. * * @return {Promise} A promise the load the Tag Manager API library. */ function loadTagManagerApi () { return new Promise (( resolve , reject ) = > { console . log ( 'Load Tag Manager api' ); gapi . client . load ( 'tagmanager' , 'v2' , resolve ); }); } /** * Interacts with the tagmanager api v2 to create a container, workspace, * trigger, and tag. * * @return {Promise} A promise to run the Tag Manager example. */ function runTagManagerExample () { return new Promise (( resolve , reject ) = > { console . log ( 'Running Tag Manager Example.' ); resolve (); }); } /** * Logs an error message to the console. * * @param {string|Object} error The error to log to the console. */ function handleError ( error ) { console . log ( 'Error when interacting with GTM API' ); console . log ( error ); } /** * Wraps an API request into a promise. * * @param {Object} a request to the API. * @return {Promise} A promise to execute the API request. */ function requestPromise ( request ) { return new Promise (( resolve , reject ) = > { request . execute (( response ) = > { if ( response . code ) { reject ( response ); } resolve ( response ); }); }); } < / script > < script src = "https://apis.google.com/js/client.js?onload=checkAuth" > < / script > < / head > < body > < div id = "authorize-div" style = "display: none" > < span>Authorize access to Tag Manager API < / span > < !-- Button for the user to click to initiate auth sequence -- > < button id = "authorize-button" onclick = "handleAuthClick(event)" > Authorize < / button > < / div > < pre id = "output" >< / pre > < / body > < /html >
Query the Tag Manager API
The Tag Manager service object can be used to query the Tag Manager API. The following steps are required to implement the sample program:
- Retrieve the Greetings container
- Create the Universal Analytics tag
- Create the trigger to fire the tag
- Update the tag to fire on the trigger
1. Retrieve the Greetings container
The following function illustrates how a Tag Manager service object can be used to query the Tag Manager API to list all containers of an account and retrieve the container named Greetings .
Python
def FindGreetingsContainer ( service , account_path ): """Find the greetings container. Args: service: the Tag Manager service object. account_path: the path of the Tag Manager account from which to retrieve the Greetings container. Returns: The greetings container if it exists, or None if it does not. """ # Query the Tag Manager API to list all containers for the given account. container_wrapper = service . accounts () . containers () . list ( parent = account_path ) . execute () # Find and return the Greetings container if it exists. for container in container_wrapper [ 'container' ]: if container [ 'name' ] == 'Greetings' : return container return None
JavaScript
/** * Returns the greetings container if it exists. * * @param {string} accountPath The account which contains the Greetings * container. * @return {Promise} A promise to find the greetings container. */ function findContainer ( accountPath , containerName ) { console . log ( 'Finding container in account:' + accountPath ); var request = gapi . client . tagmanager . accounts . containers . list ({ 'parent' : accountPath }); return requestPromise ( request ) . then (( response ) = > { var containers = response . container || []; var container = containers . find (( container ) = > container . name === containerName ); return container || Promise . reject ( 'Unable to find ' + containerName + ' container.' ); }); }
Next update the main execution branch of the program to call the findGreetingsContainer
function given a Tag Manager accountId
. For example:
Python
def main ( argv ): # Get tag manager account ID from command line. assert len ( argv ) == 2 and 'usage: gtm-api-hello-world.py <account_id>' account_id = str ( argv [ 1 ]) account_path = 'accounts/ %s ' % account_id # Define the auth scopes to request. scope = [ 'https://www.googleapis.com/auth/tagmanager.edit.containers' ] # Authenticate and construct service. service = GetService ( 'tagmanager' , 'v2' , scope , 'client_secrets.json' ) # Find the greetings container. container = FindGreetingsContainer ( service , account_path ) if __name__ == '__main__' : main ( sys . argv )
JavaScript
/** * Interacts with the tagmanager api v2 to create a container, workspace, * trigger, and tag. * * @return {Promise} A promise to run the tag manager example. */ function runTagManagerExample () { return new Promise (( resolve , reject ) = > { console . log ( 'Running Tag Manager Example.' ); var trigger = null ; var workspace = null ; findContainer ( ACCOUNT_PATH , CONTAINER_NAME ) . catch ( handleError ); resolve (); }); }
2. Create a New Workspace
The following code snippet uses the Tag Manager API to create a new workspace, which we use to manage our changes to triggers and tags. You can review the Workspace create method reference for the list of required and optional properties that can be set when creating a workspace.
Python
def CreateWorkspace ( service , container ): """Creates a workspace named 'my workspace'. Args: service: the Tag Manager service object. container: the container to insert the workspace within. Returns: The created workspace. """ return service . accounts () . containers () . workspaces () . create ( parent = container [ 'path' ], body = { 'name' : 'my workspace' , }) . execute ()
JavaScript
/** * Creates a workspace in the Greetings container. * * @param {Object} container The container to create a new workspace. * @return {Promise} A promise to create a workspace. */ function createWorkspace ( container ) { console . log ( 'Creating workspace in container:' + container . path ); var request = gapi . client . tagmanager . accounts . containers . workspaces . create ( { 'parent' : container . path }, { name : WORKSPACE_NAME , description : 'my workspace created via api' }); return requestPromise ( request ); }
3. Create the Universal Analytics tag
The following code snippet uses the Tag Manager API to create a Universal Analytics tag. You can review the Tag create method reference for the list of required and optional properties that can be set when creating a tag and the Tag Dictionary Reference for a list of properties for each tag type.
Python
def CreateHelloWorldTag ( service , workspace , tracking_id ): """Create the Universal Analytics Hello World Tag. Args: service: the Tag Manager service object. workspace: the workspace to create a tag within. tracking_id: the Universal Analytics tracking ID to use. Returns: The created tag. """ hello_world_tag = { 'name' : 'Universal Analytics Hello World' , 'type' : 'ua' , 'parameter' : [{ 'key' : 'trackingId' , 'type' : 'template' , 'value' : str ( tracking_id ), }], } return service . accounts () . containers () . workspaces () . tags () . create ( parent = workspace [ 'path' ], body = hello_world_tag ) . execute ()
JavaScript
/** * Creates a universal analytics tag. * * @param {Object} workspace The workspace to create the tag * @return {Promise} A promise to create a hello world tag. */ function createHelloWorldTag ( workspace ) { console . log ( 'Creating hello world tag' ); var helloWorldTag = { 'name' : 'Universal Analytics Hello World' , 'type' : 'ua' , 'parameter' : [{ 'key' : 'trackingId' , 'type' : 'template' , 'value' : 'UA-1234-5' }], }; var request = gapi . client . tagmanager . accounts . containers . workspaces . tags . create ( { 'parent' : workspace . path }, helloWorldTag ); return requestPromise ( request ); }
4. Create the trigger to fire the tag
Now that a tag has been created, the next step is to create a Trigger that will fire on any page.
The trigger will be named Hello World Triggerand will fire for any page view. For example:
Python
def CreateHelloWorldTrigger ( service , workspace ): """Create the Hello World Trigger. Args: service: the Tag Manager service object. workspace: the workspace to create the trigger within. Returns: The created trigger. """ hello_world_trigger = { 'name' : 'Hello World Rule' , 'type' : 'PAGEVIEW' } return service . accounts () . containers () . workspaces () . triggers () . create ( parent = workspace [ 'path' ], body = hello_world_trigger ) . execute ()
JavaScript
/** * Creates a page view trigger. * * @param {Object} workspace The workspace to create the trigger in. * @return {Promise} A promise to create a page view trigger. */ function createHelloWorldTrigger ( workspace ) { console . log ( 'Creating hello world trigger in workspace' ); var helloWorldTrigger = { 'name' : 'Hello World Trigger' , 'type' : 'PAGEVIEW' }; var request = gapi . client . tagmanager . accounts . containers . workspaces . triggers . create ( { 'parent' : workspace . path }, helloWorldTrigger ); return requestPromise ( request ); }
5. Update the tag to fire on the trigger
Now that a tag and trigger have been created, they need to be associated with each
other. To do this, add the triggerId
to the list of firingTriggerIds
associated with the tag. For example:
Python
def UpdateHelloWorldTagWithTrigger ( service , tag , trigger ): """Update a Tag with a Trigger. Args: service: the Tag Manager service object. tag: the tag to associate with the trigger. trigger: the trigger to associate with the tag. """ # Get the tag to update. tag = service . accounts () . containers () . workspaces () . tags () . get ( path = tag [ 'path' ]) . execute () # Update the Firing Trigger for the Tag. tag [ 'firingTriggerId' ] = [ trigger [ 'triggerId' ]] # Update the Tag. response = service . accounts () . containers () . workspaces () . tags () . update ( path = tag [ 'path' ], body = tag ) . execute ()
JavaScript
/** * Updates a tag to fire on a particular trigger. * * @param {Object} tag The tag to update. * @param {Object} trigger The trigger which causes the tag to fire. * @return {Promise} A promise to update a tag to fire on a particular trigger. */ function updateHelloWorldTagWithTrigger ( tag , trigger ) { console . log ( 'Update hello world tag with trigger' ); tag [ 'firingTriggerId' ] = [ trigger . triggerId ]; var request = gapi . client . tagmanager . accounts . containers . workspaces . tags . update ( { 'path' : tag . path }, tag ); return requestPromise ( request ); }
Next update the main execution branch of the program to call the create and update functions. For example:
Python
def main ( argv ): # Get tag manager account ID from command line. assert len ( argv ) == 2 and 'usage: gtm-api-hello-world.py <account_id>' account_id = str ( argv [ 1 ]) account_path = 'accounts/ %s ' % account_id # Define the auth scopes to request. scope = [ 'https://www.googleapis.com/auth/tagmanager.edit.containers' ] # Authenticate and construct service. service = GetService ( 'tagmanager' , 'v2' , scope , 'client_secrets.json' ) # Find the greetings container. container = FindGreetingsContainer ( service , account_path ) # Create a new workspace. workspace = CreateWorkspace ( service , container ) # Create the hello world tag. tag = CreateHelloWorldTag ( service , workspace , 'UA-1234-5' ) # Create the hello world Trigger. trigger = CreateHelloWorldTrigger ( service , workspace ) # Update the hello world tag to fire based on the hello world tag. UpdateHelloWorldTagWithTrigger ( service , tag , trigger ) if __name__ == '__main__' : main ( sys . argv )
JavaScript
/** * Interacts with the tagmanager api v2 to create a container, workspace, * trigger, and tag. * * @return {Promise} A promise to run the tag manager example. */ function runTagManagerExample () { return new Promise (( resolve , reject ) = > { console . log ( 'Running Tag Manager Example.' ); var trigger = null ; var workspace = null ; findContainer ( ACCOUNT_PATH , CONTAINER_NAME ) . then ( createWorkspace ) . then (( createdWorkspace ) = > { workspace = createdWorkspace ; return createHelloWorldTrigger ( workspace ); }) . then (( createdTrigger ) = > { trigger = createdTrigger ; return createHelloWorldTag ( workspace ); }) . then (( createdTag ) = > { return updateHelloWorldTagWithTrigger ( createdTag , trigger ); }) . catch ( handleError ); resolve (); }); }
Complete Example
Expand this section to see the complete code example of all steps in the guide.
Python
"""Access and manage a Google Tag Manager account.""" import argparse import sys import httplib2 from apiclient.discovery import build from oauth2client import client from oauth2client import file from oauth2client import tools def GetService ( api_name , api_version , scope , client_secrets_path ): """Get a service that communicates to a Google API. Args: api_name: string The name of the api to connect to. api_version: string The api version to connect to. scope: A list of strings representing the auth scopes to authorize for the connection. client_secrets_path: string A path to a valid client secrets file. Returns: A service that is connected to the specified API. """ # Parse command-line arguments. parser = argparse . ArgumentParser ( formatter_class = argparse . RawDescriptionHelpFormatter , parents = [ tools . argparser ]) flags = parser . parse_args ([]) # Set up a Flow object to be used if we need to authenticate. flow = client . flow_from_clientsecrets ( client_secrets_path , scope = scope , message = tools . message_if_missing ( client_secrets_path )) # Prepare credentials, and authorize HTTP object with them. # If the credentials don't exist or are invalid run through the native client # flow. The Storage object will ensure that if successful the good # credentials will get written back to a file. storage = file . Storage ( api_name + '.dat' ) credentials = storage . get () if credentials is None or credentials . invalid : credentials = tools . run_flow ( flow , storage , flags ) http = credentials . authorize ( http = httplib2 . Http ()) # Build the service object. service = build ( api_name , api_version , http = http ) return service def FindGreetingsContainer ( service , account_path ): """Find the greetings container. Args: service: the Tag Manager service object. account_path: the path of the Tag Manager account from which to retrieve the Greetings container. Returns: The greetings container if it exists, or None if it does not. """ # Query the Tag Manager API to list all containers for the given account. container_wrapper = service . accounts () . containers () . list ( parent = account_path ) . execute () # Find and return the Greetings container if it exists. for container in container_wrapper [ 'container' ]: if container [ 'name' ] == 'Greetings' : return container return None def CreateWorkspace ( service , container ): """Creates a workspace named 'my workspace'. Args: service: the Tag Manager service object. container: the container to insert the workspace within. Returns: The created workspace. """ return service . accounts () . containers () . workspaces () . create ( parent = container [ 'path' ], body = { 'name' : 'my workspace' , }) . execute () def CreateHelloWorldTag ( service , workspace , tracking_id ): """Create the Universal Analytics Hello World Tag. Args: service: the Tag Manager service object. workspace: the workspace to create a tag within. tracking_id: the Universal Analytics tracking ID to use. Returns: The created tag. """ hello_world_tag = { 'name' : 'Universal Analytics Hello World' , 'type' : 'ua' , 'parameter' : [{ 'key' : 'trackingId' , 'type' : 'template' , 'value' : str ( tracking_id ), }], } return service . accounts () . containers () . workspaces () . tags () . create ( parent = workspace [ 'path' ], body = hello_world_tag ) . execute () def CreateHelloWorldTrigger ( service , workspace ): """Create the Hello World Trigger. Args: service: the Tag Manager service object. workspace: the workspace to create the trigger within. Returns: The created trigger. """ hello_world_trigger = { 'name' : 'Hello World Rule' , 'type' : 'PAGEVIEW' } return service . accounts () . containers () . workspaces () . triggers () . create ( parent = workspace [ 'path' ], body = hello_world_trigger ) . execute () def UpdateHelloWorldTagWithTrigger ( service , tag , trigger ): """Update a Tag with a Trigger. Args: service: the Tag Manager service object. tag: the tag to associate with the trigger. trigger: the trigger to associate with the tag. """ # Get the tag to update. tag = service . accounts () . containers () . workspaces () . tags () . get ( path = tag [ 'path' ]) . execute () # Update the Firing Trigger for the Tag. tag [ 'firingTriggerId' ] = [ trigger [ 'triggerId' ]] # Update the Tag. response = service . accounts () . containers () . workspaces () . tags () . update ( path = tag [ 'path' ], body = tag ) . execute () def main ( argv ): # Get tag manager account ID from command line. assert len ( argv ) == 2 and 'usage: gtm-api-hello-world.py <account_id>' account_id = str ( argv [ 1 ]) account_path = 'accounts/ %s ' % account_id # Define the auth scopes to request. scope = [ 'https://www.googleapis.com/auth/tagmanager.edit.containers' ] # Authenticate and construct service. service = GetService ( 'tagmanager' , 'v2' , scope , 'client_secrets.json' ) # Find the greetings container. container = FindGreetingsContainer ( service , account_path ) # Create a new workspace. workspace = CreateWorkspace ( service , container ) # Create the hello world tag. tag = CreateHelloWorldTag ( service , workspace , 'UA-1234-5' ) # Create the hello world Trigger. trigger = CreateHelloWorldTrigger ( service , workspace ) # Update the hello world tag to fire based on the hello world tag. UpdateHelloWorldTagWithTrigger ( service , tag , trigger ) if __name__ == '__main__' : main ( sys . argv )
JavaScript
< html > < head > < script type = "text/javascript" > // Your Client ID can be retrieved from your project in the Google // Developer Console, https://console.developers.google.com var CLIENT_ID = TODO ; var SCOPES = [ 'https://www.googleapis.com/auth/tagmanager.manage.accounts' , 'https://www.googleapis.com/auth/tagmanager.edit.containers' , 'https://www.googleapis.com/auth/tagmanager.delete.containers' , 'https://www.googleapis.com/auth/tagmanager.edit.containerversions' , 'https://www.googleapis.com/auth/tagmanager.manage.users' , 'https://www.googleapis.com/auth/tagmanager.publish' ]; // Parameter values used by the script ACCOUNT_PATH = TODO ; // such as: 'accounts/555555'; CONTAINER_NAME = 'Greetings' ; WORKSPACE_NAME = 'Example workspace' ; /** * Check if current user has authorization for this application. * * @param {bool} immediate Whether login should use the "immediate mode", * which causes the security token to be refreshed behind the scenes * with no UI. */ function checkAuth ( immediate ) { var authorizeCheckPromise = new Promise (( resolve ) = > { gapi . auth . authorize ( { client_id : CLIENT_ID , scope : SCOPES . join ( ' ' ), immediate : immediate }, resolve ); }); authorizeCheckPromise . then ( handleAuthResult ) . then ( loadTagManagerApi ) . then ( runTagManagerExample ) . catch (() = > { console . log ( 'You must authorize any access to the api.' ); }); } /** * Check if current user has authorization for this application. */ function checkAuth () { checkAuth ( true ); } /** * Initiate auth flow in response to user clicking authorize button. * * @param {Event} event Button click event. * @return {boolean} Returns false. */ function handleAuthClick ( event ) { checkAuth (); return false ; } /** * Handle response from authorization server. * * @param {Object} authResult Authorization result. * @return {Promise} A promise to call resolve if authorize or redirect to a * login flow. */ function handleAuthResult ( authResult ) { return new Promise (( resolve , reject ) = > { var authorizeDiv = document . getElementById ( 'authorize-div' ); if ( authResult && ! authResult . error ) { // Hide auth UI, then load client library. authorizeDiv . style . display = 'none' ; resolve (); } else { // Show auth UI, allowing the user to initiate authorization by // clicking authorize button. authorizeDiv . style . display = 'inline' ; reject (); } }); } /** * Load Tag Manager API client library. * @return {Promise} A promise to load the tag manager api library. */ function loadTagManagerApi () { return new Promise (( resolve , reject ) = > { console . log ( 'Load Tag Manager api' ); gapi . client . load ( 'tagmanager' , 'v2' , resolve ); }); } /** * Interacts with the tagmanager api v2 to create a container, * workspace, trigger, and tag. * * @return {Promise} A promise to run the tag manager example. */ function runTagManagerExample () { return new Promise (( resolve , reject ) = > { console . log ( 'Running Tag Manager Example.' ); var trigger = null ; var workspace = null ; findContainer ( ACCOUNT_PATH , CONTAINER_NAME ) . then ( createWorkspace ) . then (( createdWorkspace ) = > { workspace = createdWorkspace ; return createHelloWorldTrigger ( workspace ); }) . then (( createdTrigger ) = > { trigger = createdTrigger ; return createHelloWorldTag ( workspace ); }) . then (( createdTag ) = > { return updateHelloWorldTagWithTrigger ( createdTag , trigger ); }) . catch ( handleError ); resolve (); }); } /** * Returns the greetings container if it exists. * * @param {string} accountPath The account which contains the Greetings * container. * @param {string} containerName The name of the container to find. * @return {Promise} A promise to find the greetings container. */ function findContainer ( accountPath , containerName ) { console . log ( 'Finding container in account:' + accountPath ); var request = gapi . client . tagmanager . accounts . containers . list ({ 'parent' : accountPath }); return requestPromise ( request ) . then (( response ) = > { var containers = response . container || []; var container = containers . find ( ( container ) = > container . name === containerName ); return container || Promise . reject ( 'Unable to find ' + containerName + ' container.' ); }); } /** * Creates a workspace in the Greetings container. * * @param {Object} container The container to create a new workspace. * @return {Promise} A promise to create a workspace. */ function createWorkspace ( container ) { console . log ( 'Creating workspace in container:' + container . path ); var request = gapi . client . tagmanager . accounts . containers . workspaces . create ( { 'parent' : container . path }, { name : WORKSPACE_NAME , description : 'my workspace created via api' }); return requestPromise ( request ); } /** * Creates a page view trigger. * * @param {Object} workspace The workspace to create the trigger in. * @return {Promise} A promise to create a page view trigger. */ function createHelloWorldTrigger ( workspace ) { console . log ( 'Creating hello world trigger in workspace' ); var helloWorldTrigger = { 'name' : 'Hello World Trigger' , 'type' : 'PAGEVIEW' }; var request = gapi . client . tagmanager . accounts . containers . workspaces . triggers . create ( { 'parent' : workspace . path }, helloWorldTrigger ); return requestPromise ( request ); } /** * Creates a universal analytics tag. * * @param {Object} workspace The workspace to create the tag * @return {Promise} A promise to create a hello world tag. */ function createHelloWorldTag ( workspace ) { console . log ( 'Creating hello world tag' ); var helloWorldTag = { 'name' : 'Universal Analytics Hello World' , 'type' : 'ua' , 'parameter' : [{ 'key' : 'trackingId' , 'type' : 'template' , 'value' : 'UA-1234-5' }], }; var request = gapi . client . tagmanager . accounts . containers . workspaces . tags . create ( { 'parent' : workspace . path }, helloWorldTag ); return requestPromise ( request ); } /** * Updates a tag to fire on a particular trigger. * * @param {Object} tag The tag to update. * @param {Object} trigger The trigger which causes the tag to fire. * @return {Promise} A promise to update a tag to fire on a particular * trigger. */ function updateHelloWorldTagWithTrigger ( tag , trigger ) { console . log ( 'Update hello world tag with trigger' ); tag [ 'firingTriggerId' ] = [ trigger . triggerId ]; var request = gapi . client . tagmanager . accounts . containers . workspaces . tags . update ( { 'path' : tag . path }, tag ); return requestPromise ( request ); } /** * Logs an error message to the console. * * @param {string|Object} error The error to log to the console. */ function handleError ( error ) { console . log ( 'Error when interacting with GTM API' ); console . log ( error ); } /** * Wraps an API request into a promise. * * @param {Object} request the API request. * @return {Promise} A promise to execute the api request. */ function requestPromise ( request ) { return new Promise (( resolve , reject ) = > { request . execute (( response ) = > { if ( response . code ) { reject ( response ); } resolve ( response ); }); }); } < / script > < script src = "https://apis.google.com/js/client.js?onload=checkAuth" > < / script > < / head > < body > < div id = "authorize-div" style = "display: none" > < span>Authorize access to Tag Manager API < / span > < !-- Button for the user to click to initiate auth sequence -- > < button id = "authorize-button" onclick = "handleAuthClick(event)" > Authorize < / button > < / div > < pre id = "output" >< / pre > < / body > < /html >
Next Steps
Now that you're familiar with how the API works, there are some additional resources for you:
- API Reference – learn about the API interface and supported operations.
- Parameter Reference – learn about setting parameters for tags and variables.
- Review the Tag Dictionary Reference for a list of supported tags.
- Review the Variable Dictionary Reference for a list of Variables that can be configured.
