As marketers and content developers, we’ve heard a lot about data, personalization, and 1-1 buyer experiences over the last few years. But what exactly does website and content personalization mean? And more importantly, how can marketing and content teams implement web personalization programs that drive results?

I like to explain web personalization as the process by which we show one specific content to one specific user on your website using one specific data point or parameter. For example, if “Jake” types your website URL into Google and arrives to your home page, and Jake has visited your site before, we could identify Jake as a repeat home page visitor and show him customized a customized message like “Welcome back!”

We’re all familiar to email personalization to some degree. For example, when you receive an email blast that begins “Dear (Your Name)”, that’s a personalized field that pulls your name from the email list database and populates your email. Web personalization works the same way – only with a lot more potential data sources, data points, and content customization options.

But there’s another important difference. With email, you have a captive audience and and known profile / user that has been added to your email list. With web analytics, we are typically dealing with anonymous or mixed data traffic, so while we know something about the user, we often don’t know exactly who they are. We’ll get more into that in a bit.

Why Personalization Matters

According to some of the most recent research reports, web content personalization can make a significant impact on results. According to a recent study by Evergage, 96% of marketers are in agreement that personalization builds customer relationships. Even more impressive, that same report found that 58% of marketers experienced a lift of over 10% using personalization, and 15% of marketers experienced a lift of over 30% using personalization.

To give some more context about how personalization is used, let’s say you’re a personal trainer and sell an exercise program direct to consumers. If you’re able use a user’s search history, ad engagement history, or referring website to likely identify a website visitor as a man or a woman, you could then personalize your landing page content with more contextually relevant content.

Instead of showing all visitors the same image of a woman running, you could customize the image shown based on the visitor profile and data. In this, case, you might show the right side image to profiles instead of the left side image.

But let’s say you wanted to create a more personalized based on experience based on the a user’s geography. In this case, after identifying your user’s geo as Los Angeles, you could show them localized content, in this case custom text and imagery specifically for the Los Angeles market.

Whether your goal goal is improve buyer engagement or generate more leads, or both, it’s not hard to see how personalized web content can make a big impact on your buyer’s online experience.

One of the most effective ways of using personalization is with Call To Actions – such as a button, form, or popup. According to Hubspot’s review of 330,000 call to actions, personalized CTA’s performed 202% better than those without personalization!

Identifying and Tracking Users

While most of your visitors will remain anonymous – meaning you don’t know exactly who they are – we often have a lot of data about users at our disposal. This includes a demographic (age, gender) and behavioral (search history, interests, device, intention). From the moment a user lands on a page on your website, we use cookies begin tracking user.

In addition to data about the user, we’re interested in knowing what that user did after they arrived. For example, a user that spends a lot of time on your pricing and services page could be ready to make a purchase. In contrast, when a user spends time on your blog or subscribes to your newsletter, they be more interested getting more acquainted with your business and experience, but not ready to buy.

The way a user navigates your website, as well as other websites in their browsing history, enables personalization software to create a user profile. That data can be used to create a more engaging user experience.

Making Web Personalization Work For You

How could web and content personalization help your business boost buyer and customer engagement? With adoption rates of web personalization tech growing quickly, it makes sense for companies to start viewing web personalization as a part of their marketing arsenal, not a nice to have add on.

The good news is that personalization technologies and platforms are becoming more effective and – in some case – more affordable. If you’d like to discuss personalization for your business, shoot us a message.

 

10 Steps to Launching Your Company’s B2B Content Marketing Program

As one of the fastest growing segments of digital marketing, content marketing continues to gain momentum in 2019. Regardless of what you sell or who your buyers are, quality content that educates, engages, and impresses your buyers is good for business.

According to the Content Marketing Institute, an impressive 89% of B2B companies use content marketing to drive engagement and growth. If your company is still part of the 11% who doesn’t – or you’re ready to scale your current content program – you need a solid plan to better integrate content into your marketing mix.

Building and managing a well-executed content marketing program takes time, budget, and careful planning. If you’re ready to get started, read on. Our 10-step guide to launching your content marketing program will help you launch your program and delivering content to your buyers.

 

What’s Included in this Guide

Step 1: Customer and Competitor Research
Step 2: Strategy Plan
Step 3: Buyer Targeting
Step 4: Content Mix and Channels
Step 5: Discover Your Brand Voice
Step 6: Start Writing
Step 7: Add Design and Imagery
Step 8: Create Your Content Calendar and Resources Plan
Step 9: Post, Send, and Share: Get Your Content Out There
Step 10: Measure Your Results

 

Step 1: Customer and Competitor Research

According to the Content Marketing Institute, 90% of top-performing #B2B #content marketers put audience’s informational needs first. When it comes to content, B2B buyers are highly customer centric.

Understanding your customers’ needs and how your buyers consume content is paramount when it comes to building an effective content program. The first – and most commonly skipped – next step is to talk with some of your customers. Only an estimated 42% of B2B content marketers actively research their audience by talking to their customers.

It’s easy to fine what Google search volume is for specific keywords related you’re your product, but understanding your buyer’s specific needs and interests can help you figure out exactly what you should be writing about. Plus, most of your customers will appreciate you reaching out to get their opinion.

When speaking with them, here are a few questions to ask about:
– What their most urgent business needs are (even if they don’t relate specifically to your product)
– What topics they are currently researching and learning about online
– What their top, most trusted sources are for business content.

Next, move on to your own Google searches. Start by compiling a short list of what you believe are the most likely keyword searches run by individuals searching for a product or service like yours and start searching. There’s a lot of great content out there and content exploration will provide a nice sample of what’s being published currently.

Finally, look at what your direct competitors and leaders in your industry are currently publishing and sharing. Read a few of their recent blog posts and see what’s trending on their LinkedIn, Twitter, or other social accounts. If those companies have a strong following and take a research-based approach to content development, chances are that a lot of their content is relevant for your buyers as well. You can also run a competitor keyword search to see where they rank.

By going the extra mile before with your content research, you’ll be a step ahead of the curve when it comes time to content development.

 

Step 2: Strategy Plan

As with all marketing, good results begin with the good strategy. Even if you’re starting small, it’s a good idea to put together a concise strategy document that offers a unified road map and includes your goals, mission, and brand positioning statement. As with any marketing initiative, if your strategy document is well thought out and strong, the road map to success is clearer and easier to follow.

What to include in your content marketing strategy doc – Your strategy plan explains what your company does, how it helps solve your customers’ needs, and how your content will address those needs. Just as your company and service is unique, so too is your content and how it informs your target market. Include the following sections in your strategy doc:

Your purpose and goals – Start by detailing exactly why your launching your content program, and what you expect to achieve from it. Try to include both tactical goals and strategic goals. For example your tactical goals could include 1) educating buyers about a specific product, 2) Generating web leads on your website, 3) improving Google search results for your business, or 4) building your email list.

Alternatively, a strategic goal could be to build credibility with your buyers. Wondering if credibility and trust is important? 96% of succesful B2B content marketers say that their audiences view them as a trusted resource! (link)

Your editorial mission statement – Next, write your editorial mission statement, which is a statement or paragraph about your specific approach to delivering content to your customers. A good editorial mission statement should explain:

– Who your target audience is. For example, you want to target chief marketing officers of in the consumer products industry. Or, you want to target partners and office managers of law firms.
– The type of content that will be used
– How your content will provide value to your specific audience.

Don’t worry if you haven’t included each specific objective – you’ll have more opportunity to add more specific objectives and KPI’s later in the planning process.

 

3. Buyer Targeting

When first starting the content development process, it’s easy to think big and there’s a tendency to try to be all things to all potential customers. But when it comes to content marketing and your target market, a more effective approach is to focus on your specific, real world targets and their exact needs.

Start by identifying your top 1 or 2 target audiences – There are a couple reasons for this. First, your buyers have specific needs that you can solve. Your content helps explain how you do that. Second, if your goal is to become a trusted source, expertise is usually specific, not general. And last, but certainly not least, your buyers will fine you online using keyword searches. If you’re writing about disparate, unrelated topics when you start, you’ll lessen your content’s impact on Google search.

Persona Development – With a clear understanding of your target audience, it’s time to develop personas. Your personas are detailed descriptions of real-world buyers within your target audience. Each persona includes a range of attributes and variables, such as the individual’s roles, responsibilities, buying habits, and business needs or challenges. Feel free to adapt your persona to your specific scenario.

For example, If geography or company size is important, include it. What matters is that your persona represents a real world scenario as it relates to your business.

Buyer Intent – Because the buying process is dynamic and occurs over time, the persona development process needs to into account the buying cycle and how buyers self-educate prior to making a decision. To do that, include your buyer’s intent and the stage of the buyer cycle for each persona.

Is that individual in the early stage of the research process for a multi-part service (information intent) or are they moving toward purchase and comparing specific feature of product (transaction intent). Intent is about the “why” and “when” in your persona’s decision making process.

Keep in mind that your persona may evolve during the buying cycle. By mapping out your buyer’s journey from start to finish, you’ll be able to capture the full value of persona based targeting.

 

4. Content Mix and Channels

As you move through the research and targeting segments of your planning, you’ll learn a lot about the content landscape and how companies go about reaching their audiences. Depending on how you ran your searches, you likely viewed a range of content on the web, social media, and video.

Most companies with established content programs start with content on their website and blog, which serve as their content home. From there, the blog content is distributed across social media and any other content channels you have established. But while blog content may be your core content hub, social channels still serve to distribute a range of channel unique content – often short form or repurposed content – that doesn’t belong on your blog.

If you have an established customer email list, consider how to utilize your content through email marketing. Email remains one of the most common ways to deliver content, with an estimated 87% of b2b companies who have content marketing programs using email (followed next by educational content at 77%).

Ultimately, the types of content you decide to produce will depend on your target market, where your buyers are active online, and your internal capability. If you see a market gap a new YouTube channel or podcast in your area of expertise, look deeper at that opportunity. You may not know at this point the optimal mix of channels and content types. Experimentation and testing of audience response are an ongoing part of the analysis, particularly as your trying to scale your program.

 

5. Discover Your Brand Voice

Before starting to develop content, consider how you want to position your company and how you’d like to be perceived by your buyers. Your brand voice refers to the way you tell your company’s story, including your content style, creative, and way you position your ideas. In a sense, it’s your brand’s character delivered through your content.

What are the benefits of keeping your style formal, structured, and concise? How would casual, lighthearted work with your audience? What type of brand voice feels authentic to you and your brand? What would be the most effective way of maintaining your audience’s attention over time?

By creating a brand voice that’s unique to your company – and using it consistently over time – you’ll be able to more effectively engage your followers. When you have an authentic brand voice, your content will have a higher impact and boost results.

 

6. Start Writing

Finally, the writing begins. With your research complete, personas built, and brand voice established, it’s time to start developing content.

We recommend you get started with the writing process before finalizing your content calendar and complete content development plan. There’s a good reason for this. Assuming your handling writing in-house, there’s a high likelihood the writing process will take longer than projected – especially at launch. For that reason, before finalizing your full publication plan, it’s a good idea to start writing first.

Deliver value to your audience – What you write about will play a big role in how your content is received and your campaign results. If you want to grow an audience, you need to deliver value. Sure, you also want to keep things interesting and engaging. But for most companies, that means writing on highly relevant topics that inform, educate, and somehow help the reader.

Here’s a tip to help you select your first article titles and topics: Use one of the following types of high impact articles types:

5 steps to achieve Objective 1 – To educate your reader on how to do or achieve something (just like this blog post does).

Why you need to be doing XYZ right now – To inform your reader of something they need to be aware of and take action.

The top 3 examples of ABC – Everyone loves good examples that show the best of the best of anything in an easy to ready fashion.

How my company accomplished Goal 1 – If you’re company has an impressive accomplishment worth talking about, this post type is for you.

Find your inspiration – We all need inspiration to help us through the creative process. Try to source 2 or 3 high quality writers that inspire you and provide you with your own ideation.

If you’re not sure where to start, just take a look at some of the most shared articles on Medium, LinkedIn, or even professional publications like Harvard Business Review. Make sure to look at the ideas, structure, and style of writing to understand what make them effective.

 

7. Add design and imagery

One way to stand apart from the crowd – apart from great writing – is to add some eye catchy images to your articles. A lot of times, a good image and articled title is enough to get people to click and see what the article is about.

Fortunately, there are a lot of good sources, such as stock libraries and infographics to help you out. Here at Optimyz, we like to create custom images, illustration, or original artwork because we’ve seen how it can drive more traffic.

 

8. Create Your Content Calendar and Resource Plan

Once your content development process is in full swing, you’ll quickly realize that creating good content on a consistent basis takes planning and resources. The more frequently you publish – and the higher your content quality – the more time your content takes to create.

While a simple, recycled blog post may not take long to put together, high quality and original articles may take 5, 10, or 20 hours to research, write, design, and edit.

Content Calendar – For that reason, you need to plan well and use a content calendar to stay organized and on time. If you’re not publishing a high volume of content, you can probably get away at first with an Excel (or Google spreadsheet) and Google calendar. Just make sure to plan and track all key details, such as author, topic, target audience, keywords, and publish data.

Production Team – Even if you’re starting small, you’ll likely need help with creating your content. Between the research, writing, images, posting, and tracking, content marketing is a multi-faceted process. Most of the time, companies begin by outsourcing at least part of the process to contractors or content teams.

If you’re looking to go full force and build a team, here’s an example set of roles:
– Oversight of strategy and content approval: CEO or Marketing Manger
– Day to Day Operations: Marketing Manager or Content Director
– Writing: Different individuals base on capacity and expertise.
– Design: Graphic Designer
– Posting and Analytics: Marketing or Social Media Manager

Whether or not you’re handing content development in house or through an agency, there is usually a fast learning curve once you start and see what works.

 

9. Publish, Share, and Send: Get Your Content Out There

The impact of your content is directly correlated to your ability to get it in front of your audience. Be aggressive and strategic when it comes to pushing out your content out across social media and other channels. Remember, your buyers are exposed to vast amounts of content and ads, so don’t assume that a few posts on social media will get the job done.

Most businesses will use all channels that are already active. However, with new content coming through the pipeline, it may make sense for your business to add another channel or two. If you’re not currently using Twitter or have a monthly email newsletter, those 2 channels may be worth considering.

According to the same CMI study on B2B content campaigns, email is the #1 channel for content distribution, with 87% of content marketers using email to engage buyers over the past 12 months. As well, use of video content continues to grow for B2B marketers. Even if you’ve never used video and email marketing before, take a closer look at what it would take to add one or both to the mix.

 

10. Monitor Results

Once you’ve begun delivering content, the next step is to track, measure, and asses the results. Of course, to be able to track, you’ll want to make sure you’re tracking your website with Google analytics and any other tools you use (see the bonus section at the end of a list of recommended softwares).

The most important engagement metrics to look at include your blog (or blogging platform) visitor traffic, time on your site, article shares, mention, and any other feedback you receive. If you haven’t done so already, it’s a good idea to set up UTM parameters on your website so that your links (called tags) are sent to Google Analytics and properly tracked. If you’re running a campaign with social, email, or paid channels, UTM parameters will help your attribute traffic to the correct source.

Voila! With step 10 completed, you’ve completed the content program development cycle and are ready to continue publishing and staying on top of your publishing schedule. To get results, you need to stay consistent, see what’s working, and use your results to guide the next step

 

Bonus Section

1) Google Analytics. Always use Google Analytics to track everything. Make sure to properly track traffic movements between your main website, blog, and any other subdomains. Cost = Free.

2) Uber Suggest from Neil Patel. Formerly Ubersuggest.com and now part of Neil Patel’s seo suite of products, Uber suggest provides local keyword combinations to help you spot possible keyword targeting opportunities. Cost = Free.

3) Buzz Sumo. Buzz Sumo is a leading platform for content research, shares data, and influencers. It helps you find the best performing content based on your specific parameters. It’s an all around great tool. Cost = $79 a month.

4) Monday.com. It’s hard to get excited about managing your projects or project manager tools. But Monday.com figure out a way to make project management simple and enjoyable. While not built for content marketing specifically, it’s a great way to keep your team organized and provide total visibility into project status. Cost = $25 a month.

4) Drum up. If you’re looking for a low-cost content recommendation tool, Drum Up is worth looking at. It also can help with your content curation or syndication (with API). Cost = $15 a month.

5) Mention. If you’re looking to move beyond Google Alerts to track media mentions, take a look at Mention. Mention has real-time reporting and monitoring, including social media. Cost = Free for 1 campaign.

6) Curata. If you’re going the curation rout full steam and want to find relevant content as it becomes available, Curata is a well established option. But Curata can also help you analyze the impact of your own content. Cost = Not public.

7) Unsplash. You’re going to need some good pics to make your content impress. If you’re on a budget, take a look at the free curated images from Unsplash.

 

Wrapping Up

Hopefully, this post has provide you with a number of useful insights and ideas. If you’re actively looking for help in your content strategy or development, learn more Optimyz by visiting https://www.optimyzinteractive.com/engage

WordPress is a big topic here at Optimyz. Over the years, of the 500+ websites we’ve built, about 450 were built with WordPress. If you’re wondering why we love WordPress so much, here are just a few reasons: It offers unmatched functionality through thousands of plugins; The content management system is versatile, especially since the Gutenberg update and new blocks; It’s easy for clients to manage their own content updates; and, best of all, it’s open source and free.

But what happens when your website requires custom functionality that can’t be handled by plugins or other tools that integrate with WordPress? For example, say you need a more complex, multi-level account management system to handle 3 or 4 types of users, each with custom functionality?

You probably guessed it – you need to build a custom WordPress plugin! We’ve built about over 100 custom plugins over the years, so we thought it would make sense to explain a little bit out our process. For anyone interested in learning the key steps to building their own WordPress plugin, read on. As long as you have at least a beginner level of development experience, including PHP, HTML, and CSS, you’re ready to get started.

1.0 WordPress

First, a few more notes about WordPress. WordPress is the most used website building platform and content management system, with an estimated 30% market share worldwide (so it must be good!) It uses PHP and MySQL and is open source software, making it 100% free. With a vast community of designers, developers, and bloggers, it’s a great choice for your next website. If you’re just getting started with website development, it’s highly recommended you learn about it.

2.0 The Basic Functionality of WordPress

WordPress plugin consists of a single file or group of files. We use plugins to improve WordPress site performance and functionality to nearly any aspect of your website. While simple plugins may offer a specific feature, such as an interactive image slider, more sophisticated powerhouse plugins, such as Woo-commerce, offer, complete e-commerce functionality wrapped up in a single plugin. There are two important factors in plugins called named actions and filters. The plugin will run specific functionality with the help of hooks.

2.1 Tools and Software

Hooks assist action to complete WordPress events like generating new users or deleting pages. We can also publish posts or load header and footer area with the help of actions. Check heck the following code, which is an action that performs preset functionality in the control panel.

add_action( 'admin_menu', ‘add_admin_menu' );

2.2 Filters

A filter function receives unmodified data and modifies it according our logic. Filters reside between the database and Chrome of your browser. The perform a function, such as the WordPress is creating a new page or post in being published.  Check the code below:

add_filter( 'comment_text',  'filter_words' );
function filter_words( $data ) {
// filter comment words and return the modified comment
}

Here, the filter function is comment_text and the callback filter is filter_words. The back filter will receive the comment as unmodified data and modify it.

Let’s Begin. Once you’ve got this far – and have a clear objective of exactly what your plugin is going to do – you’re ready to get started Visit  http://wordpress.org/ and install the latest version of WordPress. We are using here 5.2 WordPress version. Now I will build the plugin again from scratch and show you the functionality step by step.

A plugin can consist of one simple PHP file or a group of CSS, Jas and PHP files. You can find WordPress plugins in the /wp-content/plugins/directory file. You can place the plugin directly here If it contains one single PHP file. Otherwise, you should create a new folder and keep all necessary files.

First, we will create a folder and name it wp-finder-simple.  Now create a PHP file named wp-finder-simple.php and store it in the wp-finder-simple folder. Launch wp-fonder-simple.php file using an integrated development environment (IDE) application.  Next, you must add some header data, such as:

<?php
/*
Plugin Name: Finder - Free visitor analysis plugin for WordPress
Plugin URI: http://wp-finder.com/
Description: Finder will make your visitor analysis experience easier and faster than before. You can now grab all necessary data from the Google analytics and see their location, device category and demographic data. Not only that, Finder will help you to track the visitors as you have details report. And guess what It is completely free.
Version: 1
Author: Mordy Karsch
Author URL: www.optimyzinteractive.com
License: FlohfText Domain: wp-finder-simple
*/

Next, save the wp-finder.php file. Launch your chrome browser and open the wp-admin/plugins.php file. You will find there all preset plugins what you have already saved in the wp-content/plugins/directory. You will find there a new plugin too named “Finder”. Boom!! You have done it. Congratulations!!

We’ll next code in an Object-Oriented Style (OOP) in PHP. The following code is a basic skeleton. You can use it too to develop your next plugin.

The header has informed WordPress that we are making a plug in. So technically the plugin has been already created. But it still doesn’t work, of course, since still have to code it.

class WP_finder_Simple{

 // Constructor
    function __construct() {

        add_action( 'admin_menu', array( $this, 'wpa_add_menu' ));
        register_activation_hook( __FILE__, array( $this, 'wpa_install' ) );
        register_deactivation_hook( __FILE__, array( $this, 'wpa_uninstall' ) );
    }

    /*
      * Actions perform at loading of admin menu
      */
    function wpa_add_menu() {

        add_menu_page( 'finder simple', 'Finder', 'manage_options', 'finder-dashboard', array(
                          __CLASS__,
                        'wpa_page_file_path'
                        ), plugins_url('images/wp-finder-logo.png', __FILE__),'2.2.9');

        add_submenu_page(‘finder-dashboard', 'Finder simple' . ' Dashboard', ' Dashboard', 'manage_options', 'finder-dashboard', array(
                              __CLASS__,
                            'wpa_page_file_path'
                            ));

        add_submenu_page( 'finder-dashboard', 'Finder simple' . ' Settings', '<b style="color:#f9845b">Settings</b>', 'manage_options', 'finder-settings', array(
                              __CLASS__,
                            'wpa_page_file_path'
                            ));    }    /*
    * Actions perform on loading of menu pages
    */
    function wpa_page_file_path() {    }
    /*
    * Actions perform on activation of plugin
    */
    function wpa_install() {    }
    /*
    * Actions perform on de-activation of plugin
    */
    function wpa_uninstall() {    }
}
new WP_Finder_Simple();

Are you having brain fade? Don’t worry. I’ll review the above code. WP_Finder_Simple is a class. To avoid conflict with the other plug in classes, you should choose a unique name. We use _construct() as a constrictor function to  extract new object.

new WP_Finder_Simple(); We will install and store our new project here. 

In the __construct() function, we are running multiple WordPress hooks which run callback functions and performs the required functionality:

We will use several WordPress hooks in the _construct() function to complete the necessary functionality:

add_action( 'admin_menu', array( $this, 'wpa_add_menu' ));

function wpa_add_menu() {

// statements to add menu

}

With the help of ‘admin_menu’ now we will perform callback function wpa_add_menu.

A new menu will be created on the left side of our dashboard. Now visit WordPress documentation to find ‘admin_menu’ and wpa_add_menu. You can also explore add_submenu_page.

You can have two more construct functions named register_activation_hook and register_deactivation_hook. These two hooks will help to activate and deactivate the plugin. 

Click the save button and refresh your chrome browser to reload the dashboard. Now see the magic. You will find a new file named finder on the left side of the wp admin dashboard. Finder menu consists of two sub-menus- dashboard and setting. 

+ /wp-content/plugins/wp-finder-simple/images/wp-analytics-logo.png (create an image with 16px * 16px dimensions)

+ /wp-content/plugins/wp-finder-simple/wp-finder-simple.php (main plugin file)

+ /wp-content/plugins/wp-finder-simple/css/

+ /wp-content/plugins/wp-finder-simple/includes/

+ /wp-content/plugins/wp-finder-simple/views/+ /wp-content/plugins/wp-finder-simple/lib/

The extra directories like /CSS will hold the CSS files to redesign the algorithm in the plugin and save in the separate pages. The whole procedures will be completed in the plugin dashboard and setting pages. Now scroll to the picture folder and place your logo there. Change the file name and make it /wp-content/plugins/wp-finder-simple/images/wp-finder-logo.png.

Connect API Library

We will grab the visitor’s data from Google analytics, we need need third-party APIs to collect, store and analyze ranking data. In this case, we will use APIs provided by Google. Google API Client library provides a good number of Google APIs such Google+, Google analytics drive, YouTube etc. We will collect YouTube data using Google APIs and store the data in the Google drive. 

Next, get the library (PHP version) from Google or GitHib, unzip it, and store it in the directory. Now, the file sequence will look like /wp-content/plugins/wp-finder-simple/lib/google-api-php-client-master/.

Now, we will work with the APIs. Place all APIs in the plugin file to reach Google Analytics. Next, we’ll create accounts on the Google developers console and connect it with clientID, ClientSecret, etc. Put all parameters in the_construct function and the file sequence will look like:

// Constructor
function __construct() {

    if ( !class_exists( 'Google_Client' ) ) {

        require_once dirname(__FILE__) . '/lib/google-api-php-client-master/src/Google/Client.php';
        require_once dirname(__FILE__) . '/lib/google-api-php-client-master/src/Google/Service/Analytics.php';
    }

    $this->client = new Google_Client();
    $this->client->setApprovalPrompt( 'force' );
    $this->client->setAccessType( 'offline' );
    $this->client->setClientId( '958799092305-pfb9msi30152k3lfakbgauspuqr01g1d.apps.googleusercontent.com' );
    $this->client->setClientSecret( 'SUhMQfFcAwaIHswQtmw4utyh' );
    $this->client->setRedirectUri( 'urn:ietf:wg:oauth:2.0:oob' );
    $this->client->setScopes( 'https://www.googleapis.com/auth/analytics' );
    $this->client->setDeveloperKey( 'AIzaSyAn-70Vah_wB9qifJqjrOhkl77qzWhAR_w' );

    try{

        $this->service = new Google_Service_Finder( $this->client );
        $this->wpa_connect();

    }
    catch ( Google_Service_Exception $e ) {

    }

    add_action( 'admin_menu', array( $this, 'wpa_add_menu' ) );
    add_action( 'admin_enqueue_scripts', array( $this, 'wpa_styles') );

    register_activation_hook( __FILE__, array( $this, 'wpa_install' ) );
    register_deactivation_hook( __FILE__, array( $this, 'wpa_uninstall' ) );


We have added Google_Client and Google_Service_Analytics in the directory. wpa_connect helps us to establish the connection. Save the access_token. We will use it to scratch data.

Now write the code in the file directory:

public function wpa_connect() {

    $access_token = get_option('access_token');

    if (! empty( $access_token )) {

        $this->client->setAccessToken( $access_token );

    }
    else{

        $authCode = get_option( 'access_code' );

        if ( empty( $authCode ) ) return false;

        try {

            $accessToken = $this->client->authenticate( $authCode );
        }
        catch ( Exception $e ) {
            return false;
        }

        if ( $accessToken ) {

            $this->client->setAccessToken( $accessToken );
            update_option( 'access_token', $accessToken );

            return true;
        }
        else {

            return false;
        }
    }

    $this->token = json_decode($this->client->getAccessToken());
    return true

Use pt_get_analytics_accounts to grab the web data using the Google Analytics account. pa_get_analytics_dashboard  will collect the required data within few minutes. You can use this code again if necessary to fetch Google data.

/**
* Get profiles from user Google Analytics account profiles.
*/
public function pt_get_analytics_accounts() {

        try {

            if( get_option( ‘access_token’ ) !=” ) {
                $profiles = $this->service->management_profiles->listManagementProfiles( “~all”, “~all” );
                return $profiles;
            }

            else{
                echo ‘<br /><p class=”description”>’ . __( ‘You must authenticate to access your web profiles.’, ‘wp-finder’ ) . ‘</p>’;
            }

        }

        catch (Exception $e) {
            die(‘An error occured: ‘ . $e->getMessage() . ‘\n’);
        }
}

/*
* This function grabs the data from Google Analytics
* For dashboard.
*/

public function pa_get_analytics_dashboard($metrics, $startDate, $endDate, $dimensions = false, $sort = false, $filter = false, $limit = false){

        try{

            $this->service = new Google_Service_Analytics($this->client);
            $params        = array();

            if ($dimensions){
                $params[‘dimensions’] = $dimensions;
            }
            if ($sort){
                $params[‘sort’] = $sort;
            }
            if ($filter){
                $params[‘filters’] = $filter;
            }
            if ($limit){
                $params[‘max-results’] = $limit;
            }

            $profile_id = get_option(“pt_webprofile_dashboard”);
            if (!$profile_id){
                return false;
            }

            return $this->service->data_ga->get(‘ga:’ . $profile_id, $startDate, $endDate, $metrics, $params);

        }

        catch ( Google_Service_Exception $e ) {

          // Show error message only for logged in users.
            if ( is_user_logged_in() ) echo $e->getMessage();

        }
    }

Develop A WordPress Settings Page

A setting page helps ensure flexibility for customization and promotion, so we need a setting page too to offer a good customer experience. Next, we’ll develop a settings page and connect it with our plugin. The setting page will have two tabs, one for the authentication and the other for product information. Plugin users will fetch data using the Google Analytics accounts  in the authentication tab.    

Check the following code. We will use the code to develop our setting page. You will find the code in the /includes folder named finder-setting-php.

<?php
  $wp_finder = new WP_Finder_Simple();

  if (! function_exists( ‘curl_init’ ) ) {
      esc_html_e(‘This plugin requires the CURL PHP extension’);
    return false;
  }

  if (! function_exists( ‘json_decode’ ) ) {
    esc_html_e(‘This plugin requires the JSON PHP extension’);
    return false;
  }

  if (! function_exists( ‘http_build_query’ )) {
    esc_html_e(‘This plugin requires http_build_query()’);
    return false;
  }

  $url = http_build_query( array(
                                ‘next’          =>  admin_url(‘admin.php?page=finder-settings’),
                                ‘scope’         =>  ‘https://www.googleapis.com/auth/analytics’,
                                ‘response_type’ =>  ‘code’,
                                ‘redirect_uri’  =>  ‘urn:ietf:wg:oauth:2.0:oob’,
                                ‘client_id’     =>  ‘958799092305-pfb9msi30152k3lfakbgauspuqr01g1d.apps.googleusercontent.com’
                                )
                          );

// Save access code
  if ( isset( $_POST[“save_code”]) and isset($_POST[“access_code”]) ) {

    if( $wp_finder->wpa_save_data( $_POST[“access_code”] )){
        $update_message = ‘<div id=”setting-error-settings_updated” class=”updated settings-error below-h2″><p><strong>Access code saved.</strong></p></div>’;
    }
  }

// Clear Authorization and other data
  if (isset($_POST[ “clear” ])) {

delete_option( ‘access_token’ );   
delete_option( ‘access_code’ );
    $update_message = ‘<div id=”setting-error-settings_updated” class=”updated settings-error below-h2″>
                        <p><strong>Authentication Cleared login again.</strong></p></div>’;
  }

  // Saving Profiles
  if (isset($_POST[ ‘save_profile’ ])) {

    update_option( ‘pt_webprofile_dashboard’, $_POST[ ‘webprofile_dashboard’ ] );

    $update_message = ‘<div id=”setting-error-settings_updated” class=”updated settings-error below-h2″>
                        <p><strong>Your Google Analytics Profile Saved.</strong></p></div>’;
  }

?>

<div class=”wrap”>
  <span class=’opt-title’><span id=’icon-options-general’ class=’analytics-options’><img src=”<?php echo plugins_url(‘wp-finder/images/wp-analytics-logo.png’);?>” alt=””></span>
    <?php echo __( ‘finder Plugin Settings’, ‘wp-finder’); ?>

  <?php
  if (isset($update_message)) echo $update_message;

  if ( isset ( $_GET[‘tab’] ) ) $wp_finder-> pb_settings_tabs($_GET[‘tab’]);
  else $wp_finder->pa_settings_tabs( ‘authentication’ );

  if ( isset ( $_GET[‘tab’] ) )
    $tab = $_GET[‘tab’];
  else
    $tab = ‘authentication’;

// Authentication Tab section
  if( $tab == ‘authentication’ ) {
  ?>

  <form action=”<?php echo str_replace( ‘%7E’, ‘~’, $_SERVER[‘REQUEST_URI’]); ?>” method=”post” name=”settings_form” id=”settings_form”>
    <table width=”1004″ class=”form-table”>
      <tbody>
      <?php if( get_option( ‘access_token’ ) ) { ?>
        <tr>
          <p>Do you want to re-authenticate ? Click reset button and get your new Access code.<p>

        </tr>
        <tr>
          <th><?php esc_html_e( ‘Clear Authentication’, ‘wp-finder’ ); ?></th>
          <td><input type=”submit” class=”button-primary” value=”Reset” name=”clear” /></td>
        </tr>
      <?php
      }
      else { ?>
        <tr>
          <th width=”115″><?php esc_html_e( ‘Authentication:’ )?></th>
              <td width=”877″>
                    <a target=”_blank” href=”javascript:void(0);” onclick=”window.open(‘https://accounts.google.com/o/oauth2/auth?<?php echo $url ?>’,’activate’,’width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0′);”>Click here to Authenticate</a>
              </td>
        </tr>
        <tr>
              <th><?php esc_html_e(‘Your Access Code:’)?> </th>
              <td>
                <input type=”text” name=”access_code” value=”” style=”width:450px;”/>
              </td>
        </tr>
        <tr>
          <th></th>
          <td>
            <p class=”submit”>
              <input type=”submit” class=”button-primary” value = “Save Changes” name = “save_code” />
            </p>
          </td>
        </tr>
      <?php } ?>
      </tbody>
    </table>
  </form>
  <?php
  } // endif
// Choose profiles for dashboard and posts at front/back.
if( $tab == ‘profile’ ){
  $profiles = $wp_finder->pt_get_analytics_accounts();
  if( isset( $profiles ) ) { ?>
    <p><?php esc_html_e( ‘Select profile for dashboard data.’, ‘wp-finder’ ); ?></p>

    <form action=”<?php echo str_replace( ‘%7E’, ‘~’, $_SERVER[‘REQUEST_URI’]); ?>” method=”post”>
      <table width=”1004″ class=”form-table”>
        <tbody>
          <tr>
            <th width=”115″><?php esc_html_e( ‘Dashboard :’, ‘wp-finder’ );?></th>
            <td width=”877″>
                <select name=’webprofile_dashboard’ id=’webprofile-dashboard’>
                  <?php foreach ($profiles->items as $profile) { ?>
                  <option value=”<?php echo $profile[ ‘id’ ];?>”
                              <?php selected( $profile[ ‘id’ ], get_option( ‘pt_webprofile_dashboard’ )); ?>
                              >
                              <?php echo $profile[ ‘websiteUrl’ ];?> – <?php echo $profile[ ‘name’ ];?>
                  </option>
                  <?php } ?>
                </select>
            </td>
          </tr>
          <tr>
            <th></th>
            <td>
              <p class=”submit”>
                <input type=”submit” name=”save_profile” value=”Save Changes” class=”button-primary”>
              </p>
            </td>
          </tr>
          <?php } ?>
      </tbody>
    </table>
  </form>
<?php } ?>

</div>
</div>
</div>

Develop a Dashboard Page for the Plugin

The plugin settings page is ready. Now let’s work on the dashboard page. We’ll load the set of statistics in this page collected by the Google Analytics APIs. Can you remember the number of administration menu? We have two administration menus:

1 – Finder- Dashboard and 2: Finder-Settings

We already developed a setting page for the setting menu and a dashboard page named finder-dashboard.php for the dashboard menu. Copy the code and paste into the directory page named finder-dashboard.php. 

<?php
$wp_findar = new WP_Finder_Simple();

$start_date_val =   strtotime(“- 30 days”);
$end_date_val   =   strtotime(“now”);
$start_date     =   date( “Y-m-d”, $start_date_val);
$end_date       =   date( “Y-m-d”, $end_date_val);

?>
<div class=”wrap”>
  <span class=’opt-title’><span id=’icon-options-general’ class=’analytics-options’><img src=”<?php echo plugins_url(‘wp-finder-simple/images/wp-analytics-logo.png’);?>” alt=””></span>
    <?php echo __( ‘finder Simple Dashboard’, ‘wp-finder’ ); ?>

  <?php

  $acces_token  = get_option( “access_code” );
  if( $acces_token ) {

  ?>
  <div id=”col-container”>
    <div class=”metabox-holder”>
      <div class=”postbox” style=”width:100%;”>
          <div id=”main-sortables” class=”meta-box-sortables ui-sortable”>
            <div class=”postbox “>
              <div class=”handlediv” title=”Click to toggle”><br />
              </div>
              <span class=”hndle”>
                <span>
                    <?php
                    echo _e(‘Complete Statistics Starting From ‘, ‘wp-finder’);
                    echo _e(date(“jS F, Y”, strtotime($start_date)));
                    echo _e(‘ to ‘, ‘wp-finder’);
                    echo _e(date(“jS F, Y”, strtotime($end_date)));
                    ?>
                </span>

              <div class=”inside”>
                <?php

              // Country stats //

                $country_stats = $wp_finder->pa_get_analytics_dashboard( ‘ga:sessions’, $start_date, $end_date, ‘ga:country’, ‘-ga:sessions’, false, 5);
                if ( isset( $country_stats->totalsForAllResults )) {
                  include ROOT_PATH . ‘/views/country-stats.php’;
                  pa_include_country($wp_finder,$country_stats);
                }

              // End Country stats //

                $city_stats = $wp_finder->pa_get_analytics_dashboard( ‘ga:sessions’, $start_date, $end_date, ‘ga:city’, ‘-ga:sessions’, false, 5);
                if ( isset( $city_stats->totalsForAllResults )) {
                  include ROOT_PATH . ‘/views/city-stats.php’;
                  pa_include_city($wp_findar,$city_stats);
                }

              // Browser stats //

                $browser_stats = $wp_finder->pa_get_analytics_dashboard( ‘ga:sessions’, $start_date, $end_date, ‘ga:browser,ga:operatingSystem’, ‘-ga:sessions’,false,5);
                if ( isset( $browser_stats->totalsForAllResults ) ) {
                  include ROOT_PATH . ‘/views/browser-stats.php’;
                  pa_include_browser( $wp_finder,$browser_stats );
                }

              // End Browser stats //

                ?>
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <?php
  }
  else{
    print(_e( ‘You must be authenticate to see the Analytics Dashboard.’, ‘wp-finder’ ));
  }
  ?>
</div>

Next, I’ll working with the location stats in detail for better understanding. Hopefully all is clear.

$country_stats = $wp_finder->pa_get_analytics_dashboard( 'ga:sessions', $start_date, $end_date, 'ga:country', '-ga:sessions', false, 5);
if ( isset( $country_stats->totalsForAllResults )) {
  include ROOT_PATH . '/views/country-stats.php';
  pa_include_country($wp_finder,$country_stats);
}

Write pa_get_analytics_dashboard code in the main plugin class to fetch data from different locations and devices. For example, we will command ga:country and ga:sessions to fetch necessary data on the locations, devices and demographic behavior.

We’ll pass $country_stats data to a new page named pa_include_country. The page is located in a separate file named country-stats.php in the /views folder.

Next, visit the view folder. You will find there separate files for each location and device. You can manage large number of files using this folder.  

Now launch your chrome browser and create a file in the view folder. Write the following code there:

<?php
// View of Browser Statistics
function pa_include_browser( $current, $browser_stats ) {
?>
<div class=”data_boxes”>
  <div class=”data_boxes_title”><?php echo _e(‘BROWSERS STATS’, ‘wp-finder’);?><div class=”arrow_btn”></div></div>
  <div class=”data_container”>
    <?php
    if (!empty($browser_stats[“rows”])){ ?>
      <div class=”names_grids”>
                <?php foreach ($browser_stats[“rows”] as $c_stats){ ?>
                        <div class=”stats”>
                            <div class=”row-visits”>
                                <span class=”large-count”><?php echo $c_stats[2];?></span>
                            Visits
                            </div>
                            <div class=”visits-count”>
                                <i><?php  echo $c_stats[0];?> (<?php  echo $c_stats[1];?>)</i>
                            </div>
                        </div>
                <?php } ?>
            </div>
    <?php } ?>
  </div>
  <div class=”data_boxes_footer”>
      <span class=”blk”>
        <span class=”dot”></span>
        <span class=”line”></span>
      </span>
      <span class=”information-txt”><?php echo _e(‘listing statistics of top five browsers.’, ‘wp-finder’);?></span>
  </div>
</div>
<?php } ?>

Next, create a new file in the views folder and name it city-stats.php. Write the following code there: 

<?php
// View of City wise Statistics
function pa_include_city( $current, $country_stats ) {
?>
<div class=”data_boxes”>
    <div class=”data_boxes_title”>TOP CITIES <div class=”arrow_btn”></div></div>
        <div class=”data_container”>
            <?php
            if (! empty( $country_stats[“rows”] ) ) { ?>
            <div class=”names_grids”>
                <?php foreach ($country_stats[“rows”] as $c_stats){ ?>
                        <div class=”stats”>
                            <div class=”row-visits”>
                                <span class=”large-count”><?php echo $c_stats[1];?></span>
                            Visits
                            </div>
                            <div class=”visits-count”>
                                <i><?php  echo $c_stats[0];?> </i>
                            </div>
                        </div>
                <?php } ?>

            </div>
            <?php } ?>
        </div>
    <div class=”data_boxes_footer”>
        <span class=”blk”>
            <span class=”dot”></span>
            <span class=”line”></span>
        </span>
        <span class=”information-txt”>Listing statistics of top five cities.</span>
    </div>
</div>
<?php } ?>

Create another file in the views folder and name it country-stats.php. Now write the following code:

<?php
// View of Country wise Statistics
function pa_include_country( $current, $country_stats ) {
?>
<div class=”data_boxes”>
    <div class=”data_boxes_title”>TOP COUNTRIES <div class=”arrow_btn”></div></div>
        <div class=”data_container”>
            <?php
            if (! empty( $country_stats[“rows”] ) ) { ?>

            <div class=”names_grids”>
                <?php foreach ($country_stats[“rows”] as $c_stats){ ?>
                        <div class=”stats”>
                            <div class=”row-visits”>
                                <span class=”large-count”><?php echo $c_stats[1];?></span>
                            Visits
                            </div>
                            <div class=”visits-count”>
                                <i><?php  echo $c_stats[0];?></i>
                            </div>
                        </div>
                <?php } ?>

            </div>
            <?php } ?>
        </div>
    <div class=”data_boxes_footer”>
        <span class=”blk”>
            <span class=”dot”></span>
            <span class=”line”></span>
        </span>
        <span class=”information-txt”>Listing statistics of top five countries.</span>
    </div>
</div>
<?php } ?>

Make the Plugin Better with CSS

The plugin is done. Now we need to make it better. Adding callback function in the WordPress hook we load the CSS files. The system looks like this:

add_action( ‘admin_enqueue_scripts’, array( $this, ‘wpa_styles’) );

Connect the callback function with the  __construct function:

/**
* Styling: loading stylesheets for the plugin.
*/
public function wpa_styles( $page ) {

    wp_enqueue_style( ‘wp-finder-style’, plugins_url(‘css/wp-finder-style.css’, __FILE__));
}

In our plugin, we have to style our dashboard stats using CSS. Write the following CSS code in /css/wp-finder-style.css:

You’ll want to redesign the dashboard stats using CSS. Find the page named /css/wp-finder-style.css in the WP directory. We’ll leave this out since it’s pretty lengthy.

Final Words

If you completed everything correctly, your plugin is built and ready to use! Let’s
summarize the steps we took to get here:

1) Create a plugin folder in the WP directory and store necessary header information.

2) Use OOP to create a plugin class and add plugin menus.

3) Develop an interactive structure for the plugin to deal with CSS, images, and third-party libraries.

4) Initialize Google Analytics PHP Client library from Github and connect it to your plugin.

5) Develop a WordPress setting page for your plugin.

6) Develop a customized dashboard page for the plugin.

7) Make the plugin look better using CSS.

Hopefully everything made sense and you learned the key steps to build your own WordPress
plugin. Now it is your turn – good luck!

Let’s say you wanted to build a 3D webGL animation unlike any you’d ever seen before and modeled after an innovative blockchain platform called Dopamine.AI

What would it look like and how would you build it? That’s what we needed to figure out when Dopamine.AI approached us to build their new website and 3D animation.

Dopamine.AI was launching s a global Decentralized Collaborative Processing Networks (DCPN) whose platform enables data and AI provides to safely monetize their IP. The Dopamine.AI platform is changing the way companies connect, share, and monetize data using blockchain technology. It was only logical that the animation would use the brain and include a way, similar to the neurotransmitter Dopamine and a blockchain platform to enables new data channels, we know that the animation would need to visually show signals being through the brain.

But that was just the start. The Dopamine.AI team had more complex plan about how the animation’s light movement and element interactions. Like their platform, they were looking for something that didn’t exist. They wanted to impress potential customers and partners.

When they first showed us their idea about how it would work, while we were confident we could build it, we were not 100% sure how. After a search in Google using the specific parameters as keywords, we couldn’t find a single 3D WebGL animation that incorporated the array of movements and interactions the way theirs did.

We figured it out – take a look at the live animation (make sure to click on the nodes). Read on to see how it worked and how we did it! 

The Model

As with any 3D animation, the first step was for our artist to create a 3D rending of the model based on a 2D image. The most artistic part of the process, we created the 3D drawing of the brain that would be used to create the 3D model. Then, we used CSS3DRenderer.js to help transform the design into a 3D model viewable on the Web.The brain, now viewable on the web, worked to some degree like the human brain in that it was always “on,” with the nodes slowing moving even without any direct activity. But once activated, it leaps into motion. As an added touch to the initial view, we built the brain as a dynamic image that can be rotated by click on it with your mouse (give it a go.)

 

The Nodes

To represent the Dopamine.AI platform model, we built 3 different types of nodes, categorized as N1, N2, and N3, each type with different interactivity, movement, and design. Although the nodes appear to causally move around the brain, in fact, each node is moving in a fully independent, random direction. Each of the 3 nodes also has a different velocity, with their velocity a function of their distance from the center. N1 nodes (closes to the center) while N3 nodes (on the periphery) moving fastest.At first blush, that sounds complicated, but it’s straight forward because can just build the model using a random movement equation. However, as you’ll see next, connecting the randomly moving nodes is more complicated.

 

Activation and Movement

To activate the nodes, simply mouse over the node and watch. Depending on whether it’s an N1, N2, or N3 node, when you mouse over the node, it will activate and transform into 1 of 3 different icons.Once activated, the light burst will shoot from an N1 to N2 to N3 node, then return to the original N1 node. Once it arrives back, that specific node is extinguished and can no longer be activated.

Because the nodes are in constant flux and moving in “random’ directions, calculating the location of the node to build the proper trajectory took on an additional layer of complexity. Without a robust animation software that could automatically calculate the exact location of nodes and work as a mouse over activated JS animation – something we certainly don’t have and are unsure if exists – we had to build an algorithm that calculate the trajectories based on our original movement model.

 

Mobile

When it came time to build the mobile version, we ran into a hitch because, as a web mouse over animation, it didn’t work on mobile phones. In addition, because of the way the animation was built, the mobile version was taking over the entire page, preventing you from scrolling down the page or viewing the rest of the website.To solve the problem, we created an updated version and using jQuery UI Touch Punch to enable licking instead of mouse over, we were finally able to get the animation to play on mobile devices.

 

Javascript Libraries and Code

One of the advantages of WebGL is that it operates a lot like API or platform that operates right in the browser. That enables you to build using a wide range of JavaScript libraries so that you don’t need to build from scratch each functional element or module. Plus, everything is available right on Github.

 

Tools and Software

As a robust 3D animation, we needed to use HTML5, CSS, and a host of different JavaScript libraries to build the animation. Here’s a quick summary of the JavaScript libraries we used:

– Three.js, Jqueryui.js, enderer.js, CSS3DRenderer.js, and 3D.js for web and mobile 3D structure.

– Detector.js, particle.js, and orbit controls.js for node movgiement and functionality

Final Thoughts

If you haven’t already, take a look at the animation to see how it works. One of the issues with 3D animations like this is that they use a lot of code, which in turn can slow down your page load speed. That’s why you often see a loading icon as the animation first loads.

But nobody wants to see a loading icon. So we created a nifty solution! Using CSS, we created a static image that looks exactly like the animation to show when you first arrive to the website. Then, once the animation is done loading, the image disappears, and the live animation becomes viewable. While there’s no work around for the load time, at least the view is nice while you wait.

All in all, building the Dopamine.AI was both challenging and fun. If you’re interested in learning more about the animation or are interested in creating your own interactive model, get in touch with us.

** Update: We’re sad to report that Dopamine.AI has shut down operations. It seems that the quickly diminishing demand for novel blockchain solutions was the cause.