So you’ve finally decided to put in place a customer analytics infrastructure for your online business? Good for you! And you want to use Segment as the driver of data gathering and distribution? Yup, that’s a good idea!
But one of your touchpoint is on WordPress? Probably your main website, right? And that’s the first touchpoint you want to connect to Segment, as you might want to push that data to Woopra, KissMetrics or something else, right?
I have to admit that it took me a little bit of work to make that integration between Segment and WordPress. So below is my guide for the initial setup and identification of users.
If you want to go beyond just installing Segment (how to consolidate your investment and reach for product’s analytics holy grails), take a look at our follow-up post on Segment.
1. Setup a Test Website
That’s just good practice. You don’t want to push tags to production without making sure that everything is working correctly.
But it’s also because you won’t be installing the Google Tag Manager plugin directly on your Prod Website (more on that later) and we want to use the GTM Console in Preview Mode to make sure our tags are firing. So, yeah, just make a Test Website and thank me later.
With WPEngine (which I am a client of, but not affiliated to), it’s as simple as a push of a button…
2. Create a Google Tag Manager Container
I’ll assume you already know of Google Tag Manager and its environment. If not, there are so many resources out there, that I won’t go into those details here.
So this step is pretty simple – just create a container and move on to the next step.
3. Install GTM on Test Website
As I’ve mentioned before, the process for the Test Website is a little bit different than for the Prod Website. The GTM plugin needs to be installed on the Test Website ONLY (that’s important). So go ahead, set that up. You’ll need to have that container ID for its settings.
4. Create a Segment Workspace
Cool, so we’re finally beginning work with Segment. Again, I’ll assume you’ve already created your account and that you have a little bit of knowledge of how this works.
For now, create a new workspace for your company if this hasn’t already been done.
5. Configure Website as Segment Source
Now we want to create our first source of data, which would be our WordPress website. Nothing much to do here, except create a Website source in your Segment workspace.
6. Install the Segment Analytics Plugin on the Live Website
Now we need to create that link between WordPress and Segment. Segment has its own plugin for easy setup of that integration.
When configuring this plugin, you’ll need to find the Segment Source API Write Key that was created when you configured the Website source in the previous step. It’s located in the source’s settings.
7. Configure GTM as a Segment Destination
Alright, now that we have our Source setup, we need to configure our Destinations. Personally, I have an Amazon Web Services Redshift and Woopra destination set up for all my workspaces.
But this is also where we want to do that integration between Google Tag Manager and our Prod Website. Now, the technical reason why this is set up this way kinda escapes me, but it’s still how Segment recommends going about this.
To configure that destination, you’ll need the Container ID which is located in the header of your GTM’s container.
8. Test Segment by Looking at Debug Events
Cool, your infrastructure is in place and it’s time to see if all is working. Fire up that good old Netscape browser and go to your Prod Website and load up a few pages.
In your Segment’s source, there is a Debugger tab which will show your the events that were captured from your source.
All is working? Celebrate now!
9. Create Trigger in GTM
Wait! Stop the music!
We also want to identify users. And if you’re a trendy marketer, you’re probably bombarding your readers with too many popups (please stop that) to get them to sign up to your newsletter.
That form probably has a Submit button with an ID associated to it. Good! Just configure a trigger event that fires when that button is clicked.
10. Create a Tag in GTM
Now the final magic, where we create that tag that will actually be sent to Segment when our users are submitting that form.
Now, you’ll need to do a little bit of research yourself to get to that DOM element which contains your submitted form’s fields (such as email and name).
For myself, I created a User-Defined variable that grabs the value from the data layer…
11. Verify on Test Website
Remember that Test Website we had created? Time to use this bad boy.
Click on that GTM Preview button and go to that Test Website of yours. You’ll see the GTM Console is loaded automatically. Right?
Right. Now go to that annoying Newsletter Subscription popup of yours and fill it and click submit (hint: stop your browser right now if this is going to send you to another page).
If all goes well, you’ll see some events such as gtm.click shown on the left side of your GTM Console. Go through those and the one associated to your click of the Submit button should have a tag that was fired associated to it.
If such is the case, go back to your Segment debugger and make sure that the identify event was captured.
12. Deploy to Live Website
You’re a genius!
Now just deploy your new Google Tag Manager environment to your Prod Website and enjoy that Martini of yours.
You deserve it!