Show a Facebook Like popup with the Google Tag Manager

If you are in need of Facebook likes, it is maybe an idea to boost your Facebook page. One way to do this is showing a popup after your visitor have visited a number of pages.

Example!

facebook likebox example

We would not show up our box too soon. First we have to count how many pages there are in this session. We are going to store this info in a cookie.

Count how many pages a visitor has made

Create a new Custom Html tag.

counter pages in session

The script:

Fire it on All pages. Then, create a new Cookie variable with the name cookiePagesInSessionCounter and a cookie name pagesinSession. We are using this values in our previous mentioned script.

cookiepagesinsession variable

Script explanation

If our cookie is not set yet, we have to create one and set this cookie pagesInSession to 1.

The cookie expiration is set to 30 minutes (represented by the 1800000 milliseconds).

If the cookie value of our cookie cookiePagesInSessionCounter is allready set we should update it. First we retrieve the current cookie value and we will increase it by 1.

Now the new visited pages count is updated.

Creating the pop-up box

For our pop-up we have to create a new Custom Html tag. This one contains the styling of our pop-up box, loading the jQuery javascript libary we need and the jQuery script.

facebookpopup

And our code.

Change the styling to your identity and replace <YOUR_FACEBOOK_ID_HERE> in the code to your own Facebook ID. An example: For Google’s Facebook page with the Url https://www.facebook.com/Google the ID is Google. It could also be a number if you haven’t created a custom username for your page.

Next steps

Next step is setting up some rules.

When we would like to show up the box:

When the user have visited 4 pages

When we would not like to show up the box:

When the user is on a mobile device
When the user has closed the Facebook pop-up
When the user allready has liked the page

When the user have visited 4 pages

Create a new trigger and choose Page View as event. Set the Trigger Type to Window Loaded. This is important because, the trigger should trigger before cookiePagesInSessionCounter is increased by 1. Fire it when cookiePagesInSessionCounter is equals 4.

visitedfourpagesinsession

Check if the user is on a mobile device

Create a new Custom JavaScript variabele. This variable returns true or false.

isMobile

And our code:

I have written before about this here, but our Trigger Type should be Window Loaded now.

Create a new trigger:

ismobiletrigger

Choose Page View as event and Window Loaded as Trigger Type. Fire it when the isMobile variable is true.

Check if the user has closed the Facebook pop-up

We are going to use the Built-in variable Click Classes. So we have to enable this variable. Check all the variables, you are going to use them in the future 😉

built-in variables clicks

Next step is creating a new Trigger based on a Click. Select All Elements so we can measure a click on our close link. The link in the pop-up box has a link with a classname closeFB.

If the Click Class is equals closeFB, we would like to fire this trigger.

event closed fb popup

We’ll use this trigger to set a cookie. This cookie stores that our visitor has closed our pop-up box. Create a new Custom Html tag.

setCookie Facebook closed

And use our previously created trigger Event – Closed FB popup.

setCookie Facebook closed 2

The code:

And create a new 1st Party Cookie variable. Use facebookPopupClosed as cookie name value.

facebook popup closed cookie

Now we are going to create another trigger. We are going to use this trigger to prevent showing up our pop up box multiple times if a visitor has clicked it away.

Create a new Page View trigger. Choose Window Loaded as trigger type.

trigger cookie Facebook closed 3

If the user have liked your Facebook page

When your visitor liked the page, the Facebook pop-up shouldn’t show up anymore. After the visitor liked your page we will store this in a cookie.

We could track this interaction with this script:

Create a new Custom Html tag.

track facebook like

Fire this tag on All page views after the Window load.

status window loaded

Create a new 1st Party Cookie variable.

cookie liked facebook

Last step is creating a trigger based on our cookie state. Create a new Page View event trigger. Choose Page View as trigger type. Fire it when our Cookie – Liked Facebook is equals 1.

trigger status facebook geliked

Setup our triggers for the Facebook popup

The final step is setting up our triggers for the Facebook popup. The trigger that will fire our tag is Visited 4 pages in session.

There are 3 triggers that will prevent this tag from firing.

When the user is on a mobile device
isMobile = true

When the user has closed the Facebook pop-up
Cookie – Facebook popup closed = 1

When the user allready has liked the page

Cookie – Liked Facebook = 1

So, when a user has visited 4 pages our Facebook popup will show up, unless the visitor is on a mobile device, the Facebook popup is shut down (in the last 30 days) or the user allready liked our Facebook page (last year).

In each session (30 minutes) the popup will be shown after visiting 4 pages, that’s why we have to set this exceptions. This looks like this:

facebook likebox triggers

 

Conclusion

The Google Tag managers offers a nice way to show the info you want en gives you the opportunity to do not overdo this. Good luck!

 

Was it interesting? Share it, so someone else can read this too!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

5 thoughts on “Show a Facebook Like popup with the Google Tag Manager”

  1. This is great however the pop up appears empty for me. Are there any updates Facebook may have made since this article that would affect it?
    thanks

  2. Hi Marthijn, its very nice but some small confusion while creating tags, please could you make this videos for better understand

Leave a Reply

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