Until recently, I had a feature on GTM Tools<\/a> that polled the user\u2019s Google Tag Manager<\/a> container(s) for a recently published version. If one was found, a notification was sent to a Slack app<\/a>, which forwarded it to a workspace and channel of the user\u2019s choice.<\/p>\n This was fine, except for the fact that polling the GTM and Slack APIs for dozens upon dozens of containers is a total resource hog, and the only way I can maintain GTM Tools is it doesn\u2019t have API leaks like that.<\/p>\n I thus deprecated the feature. Feeling bad about the decision (and because I got a bunch of feedback that users were actually using the feature), I wanted to share a step-by-step guide on how anyone can setup a simple Slack notification system for changes in a Google Tag Manager container.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n It\u2019s a Node.js<\/a> application running on Google Cloud Functions<\/a>. Google Cloud Functions are serverless, self-contained functions on the Google Cloud Platform<\/a> (GCP) that can be triggered with different stimuli, such as an HTTP request or a Pub\/Sub<\/a> message. For our purposes, it\u2019s the perfect tech because what we\u2019re trying to do is a very simple operation that needs to run periodically with zero- or low-cost.<\/p>\n \n \n Subscribe to the Simmer newsletter<\/a> to get the latest news and content from Simo Ahava into your email inbox!\n <\/p>\n <\/span><\/p>\n Once it\u2019s up and running, here\u2019s how the solution works:<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n Once everything is done, the application stores the new, updated state back into Google Cloud Storage and finishes execution.<\/p>\n To make the whole thing work, you\u2019ll need a Google Cloud Platform account<\/a>. In addition to that, you\u2019ll need:<\/p>\n The first thing you\u2019ll need to do is create a new project in GCP.<\/p>\n You can do this by following this link<\/a>.<\/p>\n Give your project a name, and make sure you select a valid Billing Account for it.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n The console will hang for a while as your new project is being created. Once the project is created, you can visit it via the project selector.<\/p>\n Next thing you\u2019ll need to do is enable the APIs that the application will require. You\u2019ll also need to create a bucket<\/em> in Google Cloud Storage, but we\u2019ll get to that after the APIs have been enabled.<\/p>\n While making sure your new project is selected in the console, type <\/p>\n <\/a><\/p>\n<\/div>\n In the screen that opens, click Enable<\/strong>.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n Do the same for Once you\u2019ve enabled these two APIs, it\u2019s time to create a new bucket<\/strong> in Google Cloud Storage. This is where we\u2019ll store the state<\/em> of the GTM container. Follow this link<\/a> to reach the storage browser.<\/p>\n Click the big blue Create Bucket<\/strong> link in the middle of the screen.<\/p>\n Give the bucket a global, unique name. I simply named it the same thing as my project: As Location type<\/strong>, choose Region<\/strong>, and select one that\u2019s available for Cloud Functions as well<\/a>. For example, I chose <\/p>\n <\/a><\/p>\n<\/div>\n Keep the storage class<\/strong> as the default (Standard<\/strong>).<\/p>\n Keep access control<\/strong> as the default (Fine-grained<\/strong>).<\/p>\n Don\u2019t touch the Advanced settings<\/strong>.<\/p>\n Click the blue Create<\/strong> button when ready.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n Make sure you remember your bucket name<\/strong> ( You need to create a new Slack app<\/strong>. This application will be in charge of forwarding the messages sent by the Cloud Function to your Slack workspace and channel.<\/p>\n To create a new app, visit https:\/\/api.slack.com\/<\/a> and click the big green Start Building<\/strong> button in the middle of the screen.<\/p>\n Give the app a name<\/strong> (this will appear as the name of the bot in Slack). Choose the workspace<\/strong> you want to add this bot to.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n When done, click Create App<\/strong>.<\/p>\n In the dashboard that opens, choose the Incoming Webhooks<\/strong> functionality.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n In the configuration screen that opens, click the toggle to activate webhooks.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n Then, scroll down the configuration screen and click the button to Add New Webhook To Workspace<\/strong>.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n Now you need to choose which channel to post the messages on, so select one from the list. Once done, click Allow<\/strong>.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n You should see your new bot enter as a new user into the channel.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n In the list of webhooks for your app, there should now be a new URL. Keep this tab open for a while, as you\u2019ll soon need the URL.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n Almost done!<\/p>\n Now, download this archive:<\/p>\n https:\/\/github.com\/sahava\/gtm-slack-integration\/raw\/master\/function.zip<\/a><\/p>\n Unzip the archive to a folder on your computer.<\/p>\n Rename the <\/p>\n <\/a><\/p>\n<\/div>\n This is what the default Change the Set the Set Now, populate the You can find the account ID and container ID in the URL when visiting the container. The account ID is the first numerical string you see, and the container ID is the second one. For example, this is one of the containers I want to monitor:<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n And this is another one:<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n So the array would look like this:<\/p>\n Remember that you need enough access rights on these containers to add a new user to them!<\/p>\n<\/blockquote>\n You can keep the Save<\/strong> the file when done.<\/p>\n Then, create a new ZIP<\/strong> archive that has the following files from the folder:<\/p>\n NOTE!<\/strong> The files must be in the root<\/strong> of the ZIP archive, so do not<\/em> compress a folder with the files. There should be no folders in the ZIP.<\/p>\n<\/blockquote>\n Keep this archive handy, you\u2019ll need it very shortly.<\/p>\n Go to the Cloud Functions dashboard<\/a>, and click the Create Function<\/strong> link.<\/p>\n Give the function a name. Again, my lack of imagination steers me to name it the same as my project and my GCS bucket: Keep the Memory allocated<\/strong> as its default (256MB), and then choose Cloud Pub\/Sub<\/strong> from the list of triggers. In the Topic<\/strong> drop-down, click Create new topic<\/strong>.<\/p>\n![\"Slack](\"https:\/\/www.simoahava.com\/images\/2020\/02\/gtm-slack-notification-system.jpg#ZgotmplZ\")
<\/p>\n
\n X<\/span><\/p>\n
\n The Simmer Newsletter<\/strong>\n <\/p>\nHow it works<\/h2>\n
\n
![\"GTM](\"https:\/\/www.simoahava.com\/images\/2020\/02\/gtm-slack-process.jpg#ZgotmplZ\")
<\/p>\nWhat you\u2019ll need<\/h2>\n
\n
Step 1: Create a new Google Cloud Platform project<\/h2>\n
![\"Create](\"https:\/\/www.simoahava.com\/images\/2020\/02\/create-new-gcp-project.jpg#ZgotmplZ\")
<\/p>\nStep 2: Configure the GCP project<\/h2>\n
Enable the APIs<\/h3>\n
Cloud Functions API<\/code> into the search bar and click the result.<\/p>\n![\"Cloud](\"https:\/\/www.simoahava.com\/images\/2020\/02\/cloud-functions-api.jpg#ZgotmplZ\")
<\/p>\n![\"Enable](\"https:\/\/www.simoahava.com\/images\/2020\/02\/enable-api.jpg#ZgotmplZ\")
<\/p>\nTag Manager API<\/code>.<\/p>\nCreate a new Cloud Storage bucket<\/h3>\n
simo-demo-gtm-slack<\/code>.<\/p>\neurope-west1<\/code> as the region for the Google Cloud Storage bucket, and I\u2019ll use the same location eventually for the Cloud Function.<\/p>\n![\"GCS](\"https:\/\/www.simoahava.com\/images\/2020\/02\/gcs-location.jpg#ZgotmplZ\")
<\/p>\n![\"Cloud](\"https:\/\/www.simoahava.com\/images\/2020\/02\/gcs-bucket-ready.jpg#ZgotmplZ\")
<\/p>\nsimo-demo-gtm-slack<\/code> in my example) – you\u2019ll need it when configuring the Cloud Function.<\/p>\nStep 3: Create a new Slack app<\/h2>\n
Create the app<\/h3>\n
![\"Create](\"https:\/\/www.simoahava.com\/images\/2020\/02\/create-app.jpg#ZgotmplZ\")
<\/p>\nCreate an incoming webhook<\/h3>\n
![\"Incoming](\"https:\/\/www.simoahava.com\/images\/2020\/02\/incoming-webhooks.jpg#ZgotmplZ\")
<\/p>\n![\"Activate](\"https:\/\/www.simoahava.com\/images\/2020\/02\/activate-webhooks.jpg#ZgotmplZ\")
<\/p>\n![\"Add](\"https:\/\/www.simoahava.com\/images\/2020\/02\/add-webhook-to-workspace.jpg#ZgotmplZ\")
<\/p>\n![\"Allow](\"https:\/\/www.simoahava.com\/images\/2020\/02\/allow-bot-channel.jpg#ZgotmplZ\")
<\/p>\n![\"New](\"https:\/\/www.simoahava.com\/images\/2020\/02\/new-integration-slack.jpg#ZgotmplZ\")
<\/p>\n![\"Your](\"https:\/\/www.simoahava.com\/images\/2020\/02\/your-webhook-url.jpg#ZgotmplZ\")
<\/p>\nStep 4: Configure the Cloud Function<\/h2>\n
Modify the config.json file<\/h3>\n
config.sample.json<\/code> to config.json<\/code> and open the file for editing with a text editor<\/strong> (or whatever you use to edit JSON files normally).<\/p>\n![\"Unzipped](\"https:\/\/www.simoahava.com\/images\/2020\/02\/unzipped-archive.jpg#ZgotmplZ\")
<\/p>\nconfig.json<\/code> looks like:<\/p>\n{\n \"gcs\"<\/span>: {\n \"bucketName\"<\/span>: \"gcs-bucket-name\"<\/span>,\n \"fileName\"<\/span>: \"filename.json\"<\/span>\n },\n \"slackOutput\"<\/span>: [{\n \"slackWebhookUrl\"<\/span>: \"https:\/\/hooks.slack.com\/services\/YYYY\/XXXX\/ZZZZ\"<\/span>,\n \"gtmContainers\"<\/span>: [\"12345_23456\"<\/span>, \"12345_34567\"<\/span>]\n }],\n \"verboseLogging\"<\/span>: true<\/span>\n}<\/code><\/pre>\n<\/div>\nbucketName<\/code> value to what you set when creating the bucket<\/a>.<\/p>\nfileName<\/code> to what you want to store the GTM state as. For all intents and purposes, this makes very little difference. You can just keep the name as filename.json<\/code> if you wish.<\/p>\nslackWebhookUrl<\/code> to the URL of the incoming webhook you created in the previous chapter<\/a>.<\/p>\ngtmContainers<\/code> array with all the combinations of Google Tag Manager account ID and container ID that you want to analyze for changes. The syntax is accountID_containerID<\/code>, so in the default config.json<\/code>, there are two containers:<\/p>\n\n
12345<\/code>, Container ID 23456<\/code><\/li>\n12345<\/code>, Container ID 34567<\/code><\/li>\n<\/ol>\n![\"GTM](\"https:\/\/www.simoahava.com\/images\/2020\/02\/gtm-accountid-containerid.jpg#ZgotmplZ\")
<\/p>\n![\"Another](\"https:\/\/www.simoahava.com\/images\/2020\/02\/gtm-accountid-containerid-2.jpg#ZgotmplZ\")
<\/p>\n\"gtmContainers\": [\"23019854_8060344\", \"4702258931_12269166\"]<\/code><\/p>\n\n
verboseLogging<\/code> setting as true<\/code>. My final config.json<\/code> now looks like this:<\/p>\n{\n \"gcs\"<\/span>: {\n \"bucketName\"<\/span>: \"simo-demo-gtm-slack\"<\/span>,\n \"fileName\"<\/span>: \"filename.json\"<\/span>\n },\n \"slackOutput\"<\/span>: [{\n \"slackWebhookUrl\"<\/span>: \"https:\/\/hooks.slack.com\/services\/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\"<\/span>,\n \"gtmContainers\"<\/span>: [\"23019854_8060344\"<\/span>, \"4702258931_12269166\"<\/span>]\n }],\n \"verboseLogging\"<\/span>: true<\/span>\n}<\/code><\/pre>\n<\/div>\n\n
index.js<\/code><\/li>\nconfig.json<\/code><\/li>\npackage.json<\/code><\/li>\n<\/ul>\n\n
Create a new Cloud Function<\/h3>\n
simo-demo-gtm-slack<\/code>.<\/p>\n
![\"Create](\"https:\/\/www.simoahava.com\/images\/2020\/02\/create-new-topic.jpg#ZgotmplZ\")
<\/p>\n![\"New](\"https:\/\/www.simoahava.com\/images\/2020\/02\/new-pubsub-topic.jpg#ZgotmplZ\")
<\/p>\n![<\/p>\n](\"https:\/\/www.simoahava.com\/images\/2020\/02\/new-zip-file.jpg\"){kind=link}