In this video, I'm going to take you step by step through the setup process of our Active
Campaign add a tag to trigger a transaction in Google Analytics that we have discussed
in the last video.
So if you haven't checked that out yet, then definitely hit that button up there or up
there, that will take you to that video.
We've got a lots to cover.
So let's dive in.
Now that I cleared out all the different tracking that I had installed before, let's go ahead
and build this from scratch step by step.
First of all, we will need to integrate our form that transfers the information to Active
Campaign.
So an Active Campaign will go over to forms here.
And then under view form, you can edit your existing form or create a new one.
I will just create a new one and give this a name, choose the online form as we want
to post it on to our website.
And once the user is subscribed, we will put them on to the contact list.
So let's create this form.
And we will enter the form builder.
Now, inside the formula we already have two fields here; full name, email.
Let's add the phone number and a special field that we're going to hide later on.
And this is going to be our client ID field.
So we go here to add a custom field.
And this will be our text input field.
And just call this client ID.
Let's add this.
And here now under my fields, we have our client ID.
So I'm going to add this here as well.
Now, you can change around the message here as you might want to customize this.
But I'm just going to leave this for now and click on the integrate button which will give
me our HTML code right here.
So I'm going to copy this, go back to my website.
And I'm going to edit this page in order for us to integrate this form.
In the text fields, going to add my code here and update this.
And as I mentioned, you could also do this with a third party form software that integrates
with Active Campaign.
And here we have now all our fields.
Now, you might see that client ID it not yet hidden.
This is something we're going to do later on.
For now I want to set up the tracking that would fill in the client ID into this field.
Now, where do we get the client ID from.
The client ID is actually something that is automatically created by our pageview tag.
So if we have Google Tag mentioned installed which I have on this website as well, we have
already a GA page view tracking installed.
And if I reload the page, we get our preview mode.
And in that preview mode, we have our GA pageview tag already deployed.
This gives us a client ID.
This is normally stored inside of our cookies.
So here we see the client ID that we would like to transfer over.
We can actually get the client ID directly through JavaScript with a custom JavaScript
variable.
So let's set that up.
Go over to Google Tag Manager and click on variables and create a new user defined variable.
This will be our custom JavaScript variable for client ID.
And as a configuration which was custom JavaScript, and enter here a little bit of JavaScript
that I have already prepared.
Now this JavaScript will actually go through and look at all the trackers.
Look for our tracking ID which we need to define.
So let's head over to Google Analytics account and go to tracking information tracking code
here.
Here we go and enter this into Google Tag Manager as well.
By the way, this code is by Simo Ahava.
So if you want to find out more about how this actually works, you can head over to
his blog.
I'm gonna link it up down below
as well.
Now that we have that setup, let's try this out.
Let's save this and look into our form, we refresh and reload here.
Our preview and debug mode shows us that the client ID is now stored in this variable.
So pull it out correctly, we just need to fill it in into this field.
Now in order to do this, we would need to deploy a custom HTML tag.
So we go over and click on new here in the tag section and choose a custom HTML tag.
Give this all a name, I'll call this contact us client ID form field.
And again here, I have some pre existing code that takes in your CSS selector class.
And whatever you want to fill in the field.
This is actually a code that I've written for another video.
If you want to check that out, I'm also going to link it up down below.
It's about filling a form field with Google Tag Manager.
But in our special case, we want to actually get this hidden form field or this client
ID field which is not yet hidden.
So we would need to know the CSS selector, how can we find that out?
Let's go inspect here.
And he has the field.
And there are different ways of selecting this specific field.
You could try to copy the CSS selector directly.
But what I like to do is to actually try this out instead of the developer tools.
So I'm gonna make this a little bit bigger, press the Escape key, this will open up our
console.
And here I can type the word document dot query selector.
And in parentheses, try out my CSS selector and see if it returns anything.
But the most unique thing about this selector for me is this name field which is field for.
No other input field would have this name field.
So we can try this out by putting first of all our input field in here.
And then in these square brackets, I'll put a name equals single quotes this time field
and four.
So here we go, we should have and I press enter our exact field selected.
So this is the CSS selector, I would like to use, just going to copy it and put it back
into my Google Tag Manager right here.
Now, the next part would be to actually fill this input filled with a special value.
Where do we get value from where we want to fill in with the client ID?
And that's what we're going to pull from a variable if you're already prepared.
We just need to write these two curly brackets and then this menu will pop up.
Now, we just need to define when do we actually want to fill this form filled?
Well, I want to fill it on the, on this page here Active Campaign form.
And I want to fill it when our form has loaded.
This is very important because we don't want to fill the form when it's not yet loaded,
as this within fail the script.
So the most secure way of doing this is to fire it pretty late.
In our case of would be to DOM ready which will tell us that the page has loaded correctly.
So let's go over to tag manager and build a new tag based on this event of DOM ready.
This will be our AC form on DOM ready.
And as conditions, I want to check, first of all, if the page path contains our Active
Campaign form.
And I also would like to know if the client ID is not does not equal undefined.
So if the client ID was not able to be defined, then I don't want to fill the field either.
Let's save this, save our tag, and refresh.
And try this out again.
Reload.
And we see here, our client ID was now filled by our client ID form field tag.
So this is the exact client ID that we would need to identify the user.
And this is actually identified as Google Analytics uses as well.
Now, you might see that this is still visible.
So let's take care of that.
We will go into our HTML of our form and actually look for exactly that form field.
So let's scroll down here.
And as we have seen, that was this field right here, the client ID field.
Now we don't actually need the label anymore because this will just on the front end.
But the input field needs to stay.
And instead of the type text will now choose simply hidden.
This will turn this into a hidden form field.
And let's update this, go back to our page.
Here we go.
And our field is now not visible anymore.
But we can still see it in the HTML.
So if you go on to inspect element, and just hover over here to see, that could be one
of the last ones of these elements
right here.
Here we go.
We have our field number four, it was already filled with the client ID, and it's not visible.
But if you want to see it in action again, you can just change this value over to text.
And you see here is the form field.
But in our case, it should be hidden by default.
Now that we have this in place, let's go ahead and do a test if it is received by Active
Campaign.
So we have that information filled out.
Let's submit this, be signed up, we should see our contact now in the contact records.
Here we go.
This is the user with its client ID.
So now we have all the information we would need to do this Google Analytics and transaction
hit in our Active Campaign.
We just need to have a way to actually transfer it onto Google Analytics.
And this is where automations come in.
We want to trigger an automation when somebody adds a new tag.
So let's go ahead and add a new automation will create a new automation from scratch.
And we want to trigger this when a user adds a tag.
This tag is freely definable, in our case, it was offline conversion.
So let's stick with that.
And you can choose if the user can only run once or create one conversion, or multiple
times.
I'll go with multiple times here.
Let's put this into the start.
And now we need to define the action that we want to take within automation.
Now, we don't want to send an email.
We actually want to simply post this to a web hook.
So post contact data to a URL of your choice.
We choose this and we need to enter the URL.
For now I would say we'll just go with the testing site which is web hook dot site that
you can go to.
And we'll give you a web hook URL that you can test.
So we'll just copy this to clipboard and put this into this field.
Let's save this.
And at the end, once the user has gone through this step, I want to end this automation.
So he's not stuck inside of the automation itself, we need to give our automation a name.
Let's go with offline conversion here as well and save this.
Now, we need to turn this all active and try it out by going into our contact record.
Let's add our offline conversion tag.
It is added.
Now this contact should be added to our automation, let's reload this contact.
And you can see he entered your automation and he completed it already.
When we click on the automation itself and view how the user went through it.
We can see this was posted to the web hook itself.
And then he ended.
So we should have new data on our web hook site here.
Yes, it seems like all this contact data was sent over to the web hook.
So on the automation side, on Active Campaign side, everything is working already correctly.
Now, we need to send this data into Google Analytics.
This is where our App Script comes in.
Now, an app script it's actually something that is connected to a Google Sheet.
I will give you the link in the description below.
You can just make a copy into your Google Drive account.
And once you have that open and copy to your Drive account, you need to do some configuration.
So the first thing you need to do is go over to tools and to the script editor and click
on the publish button right here and deploy as web app.
Now this will give us a our web URL which we will then put into Active Campaign.
Okay, once the window opens, we can click here on execute the app as me and who has
access to the app.
Well, anyone even anonymous users will update.
And we need to review some permissions.
Now here, you need to utilize your Google account.
And it will tell you that it will see an edit your spreadsheets which is exactly that spreadsheet
just here.
And we also need to confirm that we will connect to an external service in our case, that is
Google Analytics.
Let's allowed us.
And back in our app, we should now get our web app URL which we will utilize in Active
Campaign.
So copy that can close this now and put this into our automation, right here.
So instead of the website, we will now post this to our Google app script.
Let's save this.
And before we do a test, let's look at our sheet that we have created.
In our sheet will see a log file.
So every hit that was sent over is here with all the configurations.
But since Active Campaign just provides the client ID, we actually need to define a few
things that we want to have our hit that we sent over to Google Analytics filled by.
So first of all, you will need to fill out the tracking ID right here, I've already done
this.
But if it's not filled out, your hit will definitely fail.
You can leave the version untouch.
The client ID will be filled by web hooks.
So don't change this around.
We'll send over an event a transaction and as a category offline as an action.
And then and as event label our client ID.
Now you can change this around, you can customize this.
But just be aware that this is already pre configured to work.
And if you change anything, you might need to readjust it.
This is set as a non interaction hit as true.
And then as a transaction ID, I have actually just taken a formula here to come up with
a random ID that we would later be able to recognize with O and then the number.
So offline and then a number that is simply random.
Then we come to our ecommerce hit.
So ecommerce hit has affiliation which is not filled out.
Every field that is not filled out for just simply be dropped.
We can put in our revenue.
So if our conversion is worth $100, we put that in.
The tax, the shipping information, I just put this to zero, the transaction coupon if
there was any.
And you can also put in product information.
So purchase a product, product ID, the quantity, the price and the category if you choose so.
You could even put in multiple products.
And for that, I will just encourage you to copy here, the second product, you could put
a third product, fourth product and so on in.
Now, this information will be used to then construct the hit an ecommerce transaction
that is sent to Google Analytics.
So if you done anything wrong here, it might not work.
So be aware of the fields or in the end, you might need to debug or circle back to the
old version here which is already filled out correctly.
All right, now that we have that setup we already done, we can now go ahead and test
this whole implementation by going back to our contact record.
And just getting rid of this tag again and adding it back and then head over to Google
Analytics where the data should be received.
Let's go into the events.
And here we go.
We have a new event, we don't see anything here because it's a non interaction hit.
So under events last 30 minutes, we now see our transaction offline with the right client
ID that we also hopefully have inside of our contact record.
Yes.
And this has now produced a conversion.
And later on, we will be able to then look this up in our user explorer report if you're
interested in where the user came from.
Or inside of our conversion reports here under ecommerce, we would also see this in the sales
performance as an offline transaction that happened.
Now to spend us all to the end, we haven't yet actually submitted a version.
So we'll put this live on to our website that fills it out our hidden form field.
So I'm going to add this in, publish this, and it goes live to our website.
So this is how you can automatically create an offline conversion by editing attack inside
of Active Campaign.
All right, so we have gone through the tutorial on how to set this up.
And I hope you like this tracking technique.
It definitely helped me out to track more my conversions more closely.
I'd love to hear from you if you utilize this functionality.
And if you have any problems to set this up.
Let me know in the comments down below.
And obviously we could also with some customizations make this more dynamic or support this over
to other CRM systems.
So if you are interested in that, let me also know in the comments down below and maybe
I could rewrite the script for other platforms.
Now, if you haven't yet, then hit that subscribe button over there to stay up to date with
everything that we do here on this channel.
And my name is Julian.
See in the next one.