wordpress – Simon Griffiths Blog

Analytics Content Grouping Using WordPress Categories and Not using Googles Tag Manager

Analytics Content Grouping can be very useful to see how a range of products is doing in the market in a quick and intuitive way and also allows for some interesting insights that are hard to get to in any other ways.

In the past I have relied on manual tagging of pages, but over time as new pages are added, this manual tagging drifts and the ‘not set’ category increases. As a way to automatically group pages a great way would be to use WordPress categories and group based on category names.

Before I go any further I should add that most of the pages I want to group are product pages and all of them are in multiple categories. For example a product might be in a categories for products, industrial, steel and more. This method is based on picking out a few of those categories only as groups. In this case Industrial is the group I want to add this to. If you have pages with 1 category only, there are other methods that are even more automated (see below).

I should add that this method is loosely based on the article of https://www.highposition.com/blog/how-to-send-author-content-groups-wordpress-google-analytics/ and I will follow the same steps that they take you through: –

Step 1 – Configuring Content Groups

Log into your analytics account and click on the Admin link in the top menu bar. Select the account and property you want and in the View section on the left, you should see Content Grouping: –

We then need to create a new Content Group

Click the “Create New Content Grouping” button at the top.

Add in the title of your Group, in our case “Categories”.. but you can call it anything you wish.

Just below the title is where you select the tracking method you wish to use, we will be tracking via the GA javascript code, so click the first option, “Group By Tracking Code”, you don’t need to change anything on this screen, just press “Done” at the bottom.

Now do the same process again for any others you want to add to a maximum of 5, but when clicking the tracking code implementation option, make sure you change the “Index Number” option, so they are unique.

Step 2 – Modifying the Analytics Tracking Code

This article assumes that you are using the universal analytics code that Google has been pushing for some time. The code you have running on your site should therefore look something like this: –

<script>
(function(i,s,o,g,r,a,m){i[‘GoogleAnalyticsObject’]=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,’script’,’//www.google-analytics.com/analytics.js’,’ga’);

ga(‘create’, ‘UA-XXXXXX-X’, ‘auto’);
ga(‘send’, ‘pageview’);

</script>

We want to change it to add an extra line as shown below (in this case to add the category name, which is industrial to contentGroup4, which is the one I set up in the step above: –

ga(‘create’, ‘UA-XXXXXX-X’, ‘auto’);
ga(‘set’, ‘contentGroup4’, ‘Industrial’);
ga(‘send’, ‘pageview’);

</script>

Find this code in your site. In theory it should be in the head section, but I load mine in the footer just in case Google is slow (which is quite often). You will often find this code in either the theme settings, a wordpress plugin or in the footer.php or header.php of the theme you are using. The code should look exactly as the top example above, so, after backing up, make a space between the ga(‘create’, ‘UA-XXXXXX-X’, ‘auto’); and ga(‘send’, ‘pageview’); lines to type in your new code to add the content groups.

The code I am using assumes that you know the groups you want to track, you have a page in multiple categories (see below if you have 1 category) and you don’t have many groups (as each one needs a line of code).

<?php
if(in_category(’19’)){echo “ga(‘set’, ‘contentGroup4’, ‘Industrial’);\n”;}
elseif(in_category(’16’)){echo “ga(‘set’, ‘contentGroup4’, ‘Industrial2’);\n”;}
elseif(in_category(’18’)){echo “ga(‘set’, ‘contentGroup4’, ‘Industrial3’);\n”;}
elseif(in_category(’11’)){echo “ga(‘set’, ‘contentGroup4’, ‘Industrial4’);\n”;}
?>

So this is very simple, each line checks to see if the page is in a particular category and if it is adds the analytics code to tag to page. In more detail:

if(in_category(‘19‘)) – Checks to see if the page is in category 19. You can get the category number easily by going to the category page in WordPress (under Posts), finding the particular category you want, then hovering your mouse over the top. In most browsers you will see the url of the link you would go to if you clicked. In that url you will see “tag_ID=19” in this case, but the number is the number you need to enter here.

{echo “ga(‘set’, ‘contentGroup4’, ‘Industrial’);\n”;} – This bit is just the code from analytics, but I have manually written in the category name. In this case Industrial. You could do this in code, but if I am setting the category ID for an individual line, you might as well just add it in manually. \n gives you the line break.

If you add that in to your analytics code it should look like the below: –

ga(‘create’, ‘UA-XXXXXX-X’, ‘auto’);
<?php
if(in_category(’19’)){echo “ga(‘set’, ‘contentGroup4’, ‘Industrial’);\n”;}
elseif(in_category(’16’)){echo “ga(‘set’, ‘contentGroup4’, ‘Industrial2’);\n”;}
elseif(in_category(’18’)){echo “ga(‘set’, ‘contentGroup4’, ‘Industrial3’);\n”;}
elseif(in_category(’11’)){echo “ga(‘set’, ‘contentGroup4’, ‘Industrial4’);\n”;}
?>
ga(‘send’, ‘pageview’);

</script>

Once you load up a page this should then be tagged appropriately with the categories you have set.

Step 3 – Viewing Your Data

Once this new data has begun flowing in to your GA account, head over to your All Pages Report…. Behaviour -> Site Content -> All Pages

analytics-content-groups-setup2 You will see a new option appear at the top of the report asking which content group you would like to see your pages grouped by. You should now see your groups in there. Select the group you want and it will show you pages together with useful on-site behavioural metrics. This can be very useful to see how certain sections or product ranges are performing against site stats over time.

Another interesting way to display this information is in a Dashboard. I particularly like to use the map view on the dashboard so I can see how particular groups are performing in different parts of the country or the world: –

If you have Single Category for Each Page

If each of your pages only has a single category, and you have a much larger range of categories. You may want to use this code instead as it automatically fetches the 1st category the post is in. Note that this is for Universal Analytics and also creates a group for the first tag. If you don’t want the tag group, just delete that section: –

<?php if (is_single()){
while(have_posts() ) : the_post();

$category = get_the_category();
if ($category && !empty($category[0]->cat_name)){
echo “ga(‘set’, ‘contentGroup4’, ‘”.$category[0]->cat_name.”‘);\n”;
}

$tag = get_the_tag();
if ($tag && !empty($tag[0]->tag_name)){
echo “ga(‘set’, ‘contentGroup5’, ‘”.$tag[0]->tag_name.”‘);\n”;
}

endwhile; // end of the loop.
}
?>

Explanation

<?php if (is_single()){
while(have_posts() ) : the_post();

………..

endwhile; // end of the loop.
}
?>

This section just makes sure that the page includes a single post only.

$category = get_the_category();

This section creates a group (array) of categories.

if ($category && !empty($category[0]->cat_name)){

This makes sure there is a category assigned and if there is applies the category name rather than the ID number or slug.

echo “ga(‘set’, ‘contentGroup4’, ‘”.$category[0]->cat_name.”‘);\n”;

This is the section that actually writes the line into the page html (echo). In this case the start of that is all just text from Google analytics. Change contentGroup5 to whatever content group you have set in the Analytics admin panel. The options are basically contentGroup1 to contentGroup5. The next bit ‘”.$category[0]->cat_name.”‘ is really the crucial bit that pulls in the category name. This will be the first category on the list you see in the pages, All pages list in WordPress.

Slidedeck: How to Add Individual Slidedecks to page headers

If you are like me, you love Slidedeck (http://www.slidedeck.com) for the ease of use for me and my clients when I have handed over the site.

Typically I use Slidedeck for what is known as a hero slides how on the home page and very occasionally on the page itself and Slidedecks combination of methods of site integration makes this really easy.

However, what if you have a site that needs to have product slideshows in the header area? Again, it’s easy if you can have a layout for each page, but the problem comes in where you need a single say ‘products’ layout to cover a large range of products/pages. There is just no way to change the slideshows on a per page basis, if the slideshows is to be in the header.

The solution is actually much easier than you would probably think. Using a combination of Slidedeck with another plugin (Advanced Custom Fields), and a small piece of php code inserted into your theme. Using this method you should be able to:-

Provide a visual way to enter a Slidedeck code into an individual page
Allow product (or similar) pages to show slideshows in the header rather than on the page. Even if they use the same theme template

This will take the form of step by step instructions. It’s worth noting that I am no php coder, so any additional help with the code beyond what I did to ‘make it work’ would be appreciated.

In your copy of WordPress, install Slidedeck and create a slideshow as an example we can use.
Install the plugin “Advanced Custom Fields”. This is what will allow you to create both the visual interface and the field of information the post needs to know which slideshow it needs to display
Once you have advanced custom field installed, you will see Custom Fields at the bottom of the left side menu bar in WordPress.
I created a custom field called Page Sliders, and gave it the settings as follows: –

You can see from the above that I have a home page template where I don’t want to show this as an option, as it will use a standard template and slideshow with a slightly different layout. Selecting “Standard Metabox” ensures that there will be a box for the WordPress page editor.
My description is probably a bit over wordy btw, but I have done this assuming it won’t be changed for a while and the user will more than likely have forgotten what to do when they need to make changes.
All the above should give you is something like the below. This gives you an area in your page to add the Slidedeck shortcode, so that it will be stored with the page. At the moment, that is all that this does as we have not yet integrated the code we need into the theme.
Now here comes the hard bit unfortunately! We need to edit our theme. It’s actually easier than it sounds, but I would advise you to back up the theme code before you start to edit it. You can either FTP the theme to your local machine, or even copy all the code and paste it in a text file. You do all this in <Appearance><Editor> from the WordPress sidebar.
Typically when you open the editor you will see your themes CSS file. If you have set up various page templates, you will also see those listed, otherwise you will just see the one template, the header template, footer template etc.
Which one of these you want to edit depend on your theme. I would start by looking at the header, where you will probably see, the head section of the document, then the header of the site, then the navigation, then the top of the main content area. In my case I want the slideshow under the navigation and in the main content area, so instead of the header.php I can put the code in the page template.
Opening up the page template, you will see some code to get the get the header <?php get_header(); ?>, so the code is to go under that in my case (just above the main content). The code you need is: –
<link rel=’stylesheet’ id=’slidedeck-css’ href=’http://www.webxopt.com/wp-content/plugins/slidedeck-lenses/half-moon-1a/lens.css?v=1.0′ type=’text/css’ media=’screen’ />
<div id=”slider-custom” style=”position:relative;left:-20px;top:-24px;”>
<?php
$sliderdeck = get_field(‘slidedeck_shortcode’);
?>
<?php echo do_shortcode($sliderdeck); ?>
</div> <!– slider-custom –>This links to the slidedeck css files (in my case I used the half moon slidedeck style, so linked to that), creates a new div (the styles included were required for my theme, but you may need to change the numbers), then get the slidedeck shortcode from the custom field in the page, then add it into template.
Hopefully that should now all be done. The only thing left to do is set up the page.
You can go and get a shortcode directly from slidedecks interface, but for me the easiest way is to copy the code in the explanation, then change the number according to the slidedeck you want.

The above shows the interface on the post page and the below in slidedeck. Note that you have to mouse over the deck you want to get the ID number.
Your end result should look something like “[SlideDeck2 id=2641]”. When you preview the page, you should now see your custom slidedeck up in the head of your page.

Hopefully, this will help anyone who has been battling with this problem as I have. If you have any comments, please leave them below. PHP code suggestions would be particularly helpful!

Sociable Widget in WordPress

I use the Sociable plugin on a couple of the blogs I look after and was surprised to see that there is no sidebar widget. That means that if you want to add social icons to your home page and that features a few different posts, essentially you can’t.

After looking at this a few different ways I managed to pick out the code from the plugin and adapt it to be used in a text Widget. The code is as follows with the things to change shown in blue: –

[code]

<div class=’sociable’ style=’float:none’>
<ul class=’clearfix’>
<li id=”Facebook_Counter”>
<iframe src=”http://www.facebook.com/plugins/like.php?href=http://www.yoursite.com/yourpageifany/&send=false&layout=button_count&show_faces=false
&action=like&colorscheme=light&font” scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden;height:32px;width:100px” allowTransparency=”true”></iframe>
</li>
<li id=”Twitter_Counter”>
<a href=”https://twitter.com/share” data-text=”Your Site/Page – http://www.yoursite.com/yourpageifany/” data-url=”http://www.yoursite.com/yourpageifany/” class=”twitter-share-button” data-count=”horizontal”>Tweet</a><script type=”text/javascript” src=”//platform.twitter.com/widgets.js”></script></li>
</ul>
<ul>
<li id=”LinkedIn_Counter”><script src=”http://platform.linkedin.com/in.js” type=”text/javascript”></script><script type=”IN/Share” data-url=”http://www.yoursite.com/yourpageifany/” data-counter=”right”></script></li>
<li id=”Google_p”><g:plusone annotation=”bubble” href=”http://www.yoursite.com/yourpageifany/” size=”medium”></g:plusone></li>
</ul>
&nbsp
</div><!– End Sociable –>

[/code]

The green highlight was because the row of icons can’t display across the sidebar so tends to go all over. You can modify this by closing one unordered list (ul) and opening another.If you include a lot of icons just repeat this.

I should add at this point that this is for the big 4! Facebook, Google, LinkedIn and Google+. If you include more you will need to view the code of a page with the Social plugin on it, search for sociable then copy the code and change the page details.

Once you have your code sorted out, just go to your WordPress Widgets area, add a text widget and paste your code in. With any luck it should all flow in and include the correct number of likes etc for the page.

WordPress on Crazydomains

Installing WordPress on Crazydomains hosting drives me nuts!!!

I always forget how to install it, as to say that it’s not the most obvious installation method is probably the understatement of the century! For anyone struggling (and for me the next time I do this) this may help: –

Fantastico installation from Crazydomains hosting DOES NOT WORK. I have tried this on different accounts using different methods and it never works. Don’t even bother wasting your time trying.
Download WordPress and follow the instructions on http://codex.wordpress.org/Installing_WordPress.
When you come to configuring the wp-config.php file you will need to add in the database, user, password and hostname. This bit always completely throws me as these are not what you expect at all ie they are not what you set up in phpMyAdmin! The following is what you need: –
1. DB_NAME – Here you need to include your account (not database username). If you are using phpMyAdmin you will see this on the left hand of the interface, but you need to include the first and second level bullet which shows ‘account-name’ and ‘database name’. Eg if your account name in Crazydomains is ‘account-name’ and the database you set up is ‘wordpress’, you will need to use ‘account-name_wordpress’.
2. DB_USER – Follows the same format. You will need to include your account name despite the fact this is not shown anywhere. You will also see in phpMyAdmin a username like username@localhost. You need the first part of this before the @ sign. You need to then include the Crazy domain account name too. Add in ‘account-name_username’.
3. DB_PASSWORD – Just the password. Finally something simple.
4. DB_HOST – Just ‘localhost’.

Hopefully this will get you set up. After that just run the install script and you should connect ok!

Good luck!