Subscribe to our Data Product newsletter.


Segment with Wordpress - Guide on Initial Setup and Identification of Users

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…

Segment with Wordpress - Setup a Test Website

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.

Segment with Wordpress - Create a GTM Container

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.

Segment with Wordpress - Install GTM on Test Website

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.

Segment with Wordpress - Create Segment Workspace

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.

Segment with Wordpress - Configure Website as Segment Source

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.

Segment with Wordpress - Install Segment Analytics Plugin on the Live Website

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.

Segment with Wordpress - Configure GTM as Segment Destination

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!

Segment with Wordpress - Test Segment by Looking at Debug Events

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.

Segment with Wordpress - Create Trigger in GTM

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.

Segment with Wordpress - Create Tag in GTM - Segment Tag

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…

Segment with Wordpress - Create Tag in GTM - User-Defined Variable

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 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.

Segment with Wordpress - Verify on Test Website - GTM Console

If such is the case, go back to your Segment debugger and make sure that the identify event was captured.

Segment with Wordpress - Verify on Test Website - Segment Debugger

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!

Segment with Wordpress - Deploy to Live Website