How to Pull ActiveCampaign Data into Google Tag Manager

By | August 28, 2019


In this video, I’m going to show you how you
can pull your contact information from your Active Campaign into the Google Tag Manager
data layer to customize segment and personalize your tracking and website. All and more, coming up. Hey there, welcome back to another video of measureschool.com
teaching you the data-driven way of digital marketing. My name is Julian. And today we want to talk about how we can
pull data from our Active Campaign account into Google Tag Manager data layer. Now, it’s oftentimes the case in our tracking
that the data actually lives in different places. There’s Google Analytics, there’s Facebook
analytics. And there’s sometimes also your CRM system
like Active Campaign where you have the data and rich data really available that you could
use in different tools. But it’s just not there. Because the tools don’t talk to each other. So for instance, in Active Campaign, we have
rich profile information about the user that’s actually visiting our website. Now, if we just had that information available
in Google Tag Manager. So I’ve written a little bit of an App Script
that actually makes these two tools talk to each other. So we can pull information from Active Campaign
right into our Google Tag Manager data layer, and use it from there for personalization,
segmentation, and customization of our tracking and of our website. If you want to get a hold of the script and
check out the link down below. But if you want to learn how to install it,
and how to use it, and we got lots to cover, so let’s dive in. All right, let’s first take a look at what
we are trying to accomplish here. So I’ve sent myself an email newsletter from
Active Campaign. And when I click on this link, I go to our
demo shop. And please notice up here we have our contact
the hash in the URL. This will then be connected to Google Tag
Manager will pick that up and send that information over to AC via a tag and that tag will then
receive information which will be pushed into the data layer. As we can see here, we can see what the data
layer information is then available to us. We have subscriber ID, we have the sign-up
date, the email address, first name, and last name, how many times it bounced. So there’s a lot of information available
in this data layer, push now, including custom fields that we might have said, and even the
actions that the user has taken, which automation he is which tags he has attached to his user
profile. Really just mimicking what we can see inside
of our contact record in Active Campaign. So this is great information that we can use
with Google Tag Manager to customize our website for the user. So with the help of Google Tag Manager, we
can pull out this information and customize or segment or personalize our appearance on
our website. So for example, here, you pull data out of
the data layer and filled out a pre-filled this form fields with the email address that
we have in the data layer available. So really great information that we can get
from Active Campaign. How do we get it there? Well, let’s go through the steps. First of all, we need to build an API proxy
with the help of Google Apps Script. So this is the App Script that I have written
in order to pull the information from the Active Campaign API. And we would need this proxy in order to not
expose our API key on the client side. Luckily, App Script is free. And you can simply open up the script and
then go to File, make a copy in order to make your copy on your Google account. Once it’s on your Google Drive account, we
need to do some configurations in order to get this working. First of all, we would need to replace the
xxx here with our Active Campaign API URL, you can find that in your Active Campaign
under the settings you find here, developer, and there’s where you get your URL and your
key. So first of all, let’s go with the key, copy
that over to our script. And then we have our URL. And we copy that over to here as well. Once this is done, you can take a look at
the code here, it really just takes up some information from the URL that we’re going
send to it, and then sends it on to Active Campaign, gets a response back, and forwards
it on in JSON format back to our client. Now, all you need to do is save this and then go over to publish here and deploy
this as a web app. Now, you can leave these untouched, the only
thing you need to change is the last step here, Anyone even Anonymous, click on that
and then deploy. It will ask you for some permissions as you
are deploying a web app here. And this web app will be accessible to the
wider internet. So you need to confirm this with your Google
account. It will connect to external services, which
in our case is the Active Campaign API. And we get our web app URL. So this is the URL you need to copy because
we will need it later again. Now, in order to make this all work, you would
need to have something set up in your Active Campaign as well. And this is the links that go on to your website. So every time you send out an email, let’s
go over to our test campaign here and you design a new campaign, all the links that
point to your website actually need to be correctly tagged. So you see here we have a link that is pointing
to our demo shop. And we need to attach a special tag in order
for our script to work. And this is the subscriber hash. Now, if you don’t have any kind of query parameters
in the back of your URL, you would write a question mark, and then write the AC ID, which
is the Active Campaign ID equals and then you put in a personalization tag that you
might know from Active Campaign which is surrounded by these percentage sign and you’ll write
in in all caps SUBSCRIBER_HASH. You would need to do this for every link in
your newsletter, or in the designer of your email that goes out that actually points to
your website in order for these people to be identified. This is how the information gets from Active
Campaign to your website and is picked up by Google Tag Manager, at least the identification
part. Now what this will do, let’s send out a test
newsletter here, you will get your newsletter in your inbox. And once you click on it, it will actually
replace that subscriber hash with the actual subscriber hash of that user, which we would
need to identify the user correctly with our API. Now that we have the information on the website,
we will just need to pick it up and query the API for the right information and then
push it back into the data layer. This is something we will do with Google Tag
Manager. So I have Google Tag Manager installed on
this demo shop here. And the first thing we need to do is to pick
up whatever is in this AC ID field. Luckily, we have the ability to do this with
Google Tag Manager in the variables, we can build a query parameter variable. So let’s go here on the variables, user-defined
variables, click on new and as the type, we’ll choose the URL variable. The component type will not be the full URL,
but the query and we can put in a special query, which in our case, is the key that
we see up here. And our key is AC ID. So let’s type this in and gives this all a name, save this, and it’s right out. Let’s refresh here, go back to our demo shop. And then under variables, we should see our
URL AC ID is now filled with this particular subscriber hash. The next thing we want to do is to actually
build a trigger every time there is a subscriber hash because we don’t want to fire our tag
and do an API query if there is no hash available. So let’s build a trigger in Google Tag Manager. This will be a simple trigger that is evaluated
on the page view event. And we only want to fire this on some page
views where our URL AC ID is actually filled. That means in Google Tag Manager terms, it’s
not equal to undefined. Let’s give this all name. On the page view, AC ID is present. Let’s save this, we can really test this,
we would need to attach this all to a tag. So let’s build our tag that actually does
the API query or really talks to the Google Apps Script here and the Google Apps with
them makes the query and sends it back to our tag. We are simply building a listener for our
Active Campaign contact information. This will all be done via a custom HTML tag. And I have something prepared here that I’m also going to link up down below. So you can copy this. And all you need to do is now replace the
placeholders here. So this needs to be your App Script URL, just
copy this and put this in here. And then replace this with the variable name
of your subscriber hash. Now, we have built a subscriber hash beforehand. So we’ll just type two curly brackets. And this will open up this little menu where
you can choose your URL, AC ID, and this will be automatically replaced once the user comes
in. This looks all good. Now, let’s attach the trigger that we had
built previously and saved this all. Refresh our preview and debug mode, go back
to our page, we still have the AC ID here in the URL, let’s refresh and we see our listener
has been deployed, it sends a information to our App Script, the script information,
sends it on to the API, the API response and pushes back into the data layer with a special
event called AC user. So once you click on that, and look into the
data layer, we have all this information now available about our user. And this would be obviously different per
user that clicks on that specific link in the email, they have a different subscriber
hash and different information would be pulled. So this is how you can set up the contact
information push into the data layer. By the way, if you’re interested in the listener
functionality, it’s really just an AJAX call that we’re doing to our App Script, we are
passing on our Active Campaign ID hash and feeding that back into the data layer. The only thing that we change in this data
layer is that we use a special event key called AC user, if you want, you can change that. But that’s really it. In the end, what can you actually do with
the data now that we have it in the data layer? Well, first of all, you can pull it out of
the data layer via data layer variables. How would you do that, let’s pick a couple
of here we have the first name, we have the email address. Yeah, let’s take these and put them into our
variables. Click on New User-Defined variables. This will be a data layer variable for the
first name. And we’ll just choose our data layer, variable
type. And then we need to have the key of the data
layer itself. So in our case, that would be the first name
key right here. And we’ll just paste it in here. Let’s save this. And we want to have another key, which is
email key. So just the new data layer variable with our
email key, and we have this as well. So once we refresh and refresh our page, we should have that information available
in our variables now, right here email and the first name is filled out. Now we can use that data to actually customize
or segment our data. Let’s take this newsletter widget as an example. Now, since the users identified you already
know the email address, so you could pre-fill this form field in order for them to have
it easier to sign up for the newsletter. How would you do that? I have a little bit something prepared he
already we have these onset action items. And here’s a little bit of JavaScript that
will select the form field and then give it a special value. In our case, we want to fill this with our
email value. We need to attach a trigger to this. And we will choose a new trigger that is actually
a custom event. Because we need to have that data available
at the right time, which is the AC user event. So let’s take our custom event trigger here,
which we will fire on the AC user event, once that information is available, or custom events,
that’s fine, which is choose our custom AC user, let’s save this and attach this to our
tag as a trigger, we refresh and refresh your page. And as you can see, it changed over to the
actual email address that we have in the data layer, which is pulled from our Active Campaign
information. A second thing I want to show you is changing
text here, personalizing the website, you could do this in many different forms will
just do this for now in the text form, which we have done here. Again, I’m just selecting the right elements
in the document object model and then assigning a new text to the node. In our case, we want to have our first name,
but not just the first name we have Hi there so it would be alright, so that should do it. Let’s try this out, refresh. And we have an unsupported reference. That’s because I now have commented out our
deal, the email address, and it still has our variable in here, which is not allowed. Let’s refresh and see if our script works. And now we see Hi, John, it has changed it
depending on the user. Again, that comes from Active Campaign. And you could also obviously use this for
segmentation. So trigger a tag based on the user that is
actually on the page itself. So for example, let’s say I completely don’t
want to show this at all if a user is already identified as a newsletter subscriber, because
why would he actually need to sign up again when he’s already coming from a newsletter? Well, that’s also something we can use for
our tags. In our action items, I have a little JavaScript
to get rid of this that actually hides the element of our widget. Now, all we need to do is actually simply
use our trigger here and refresh our page, refresh our site. And now we see our widget has gone. You might have noticed that there’s a little
bit of a flash effect. So the page changes after the initial page
load. And that is because the API needs to be contacted
first, and send information back in order for us to decide whether we want to show this
or not. This is an obvious downside of this method. We need to wait till the API comes back with
information in order for us to customize the website. There are workarounds with A/B testing tools
that you might know of. But this is just the nature of getting the
information first, before doing an action on the website with JavaScript. The other concern I want to address is you
may be thinking, well, this seems to be all personally identifiable information. How is it with our privacy laws? Well, yes, there is personally identifiable
information in here. Therefore, I would recommend to not pull certain
data points, like the first name and last name into tools like Google Analytics, but
for our purposes, and what the script does anyway, is it just exposes the information
that the user has given us previously. It also exposes only the information of the
user that is actually on the website, we can’t read any other information. And it doesn’t save that information in Google
Tag Manager. Because if I actually navigate on to the next
page, we don’t have the Active Campaign ID up here anymore, and our data layer won’t
be filled with our AC user information. Which brings us to the next question which
is obviously it only works when the user just came from the newsletter or from the link
of the email that he clicked. That’s true, you could take this data layer
information and push it into something like local storage or a cookie in order to have
it available later on for personalization purposes. But that’s something we covered in other videos
on how to persist data with Google Tag Manager in cookies for example. Alright, so there you have it. This is how you can pull your contact information
of the user was visiting your actual website at the moment from your Active Campaign account
into the Google Tag Manager data layer and use the data for segmentation, customization,
and personalization of your tracking and your website. Now, the possibilities are really endless
here. So I’d love to hear from you. How are you planning on using that data? And what is your use case really. Leave a comment down below we can all learn
from each other. And if you liked this video, why not give
us a thumbs up and also subscribe to our channel right over there. Because we’ll bring you new videos just like
this one every week. Now my name is Julian. Till next time.

17 thoughts on “How to Pull ActiveCampaign Data into Google Tag Manager

  1. ThriveMate Post author

    Hey Julian, Great Video Again. If user A forwards the email (containing the link with the hash) to User B, User B will click on the link and see the private information of User A ?

    Reply
  2. Connectdots - The power of connecting Post author

    There is no links to use the script?

    Reply
  3. Sam Clarke Post author

    This is super useful Julian. I imagine that the code could be tailored to fit any CRM/Automation system right?

    Reply
  4. Paul von prandible Post author

    Great Video and very helpful, as always. I love that this approach can be used with ActiveCampaign + any Webshop System.

    To add some value to this topic, I would like to share a nice approach to personalize landingpages or shop content (text, images, css styles) within WordPress/ WooCommerce. You just need to:
    1. create a UTM link with the desired variables
    2. install the plugin: https://prandible.tips/UTM-Code-Magic
    3. Set-Up the variables according to merge-tags coming from your Newsletter-System

    I hope that makes sense to you guys. I've found that really easy to provide more personalization to email lists or even referral visitors, coming from a special campaign.

    Have you tried that out already @Julian?

    Reply
  5. Luke Stacey Post author

    incredible, what an awesome tutorial! Is this possible with Ontraport?

    Reply
  6. Rômulo Gomes Post author

    This is awesome, Julian, thanks a lot for this!

    Reply
  7. Fuad Rahardian Post author

    Really insightful tutorial! I'm just curious, any thought why did you choose GTM over Google Optimize for this particular purpose?

    Reply
  8. Stephen Wayne Post author

    Thanks, Julian! Another amazing vid. FYI It looks like the json script you linked to is the entire container, not the custom HTML tag for just inserting the AC API proxy URL. I might be able to hack it out of there but I think it would be helpful if that standalone script was shared as a link too 🙂

    Reply
  9. Ellert Rúnarsson Post author

    Nice video Julian. Is it possible to fetch data in real time from e.g. Google Drive, preferably in json format where customer id would be the key and values related to it would be sent to the datalayer? In between visits the json file could be updated e.g. with some ML.

    Reply
  10. Social Human Post author

    would something like this be possible with an angular.js app?

    Reply
  11. Johannes Faust Post author

    I followed your instructions until the setup for the Variable "acid" but when i go into debug mode and reload my website it is still undefined…means no subscriber ID is filled in?! Do i have to do some other steps before? Are there steps who are not covered in this video?

    Reply
  12. Daniele Cruciani Post author

    Hu Julian, i have a question. Can you identify the user (in order to push data in gtm data layer) by email address instead "acid="+hash" … so something like that httpGetAsync(url+"?email=") … i need to know this for identify user and extract all data ..on fly ..without identifying the acid . Thank you !

    Reply
  13. Shubham Rawat Post author

    Great Video Julian! I have just activated my active campaign account. Can I skip the active campaign integration to wordpress website part, if I do this?

    Reply
  14. Jose Striedinger Post author

    This has to be the BEST youtube channel for digital analytics. PERIOD.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *