Adding Beacon Tracking Code to Wordpress

Learn how to add Act-On's Beacon Tracking code to a WordPress website.

WordPress is an extremely popular CMS (Content Management System) that is open source, available freely (if hosted by the user), and very extensible. The flexibility of WordPress means that integrating a WordPress-powered webpage with Act-On can occur in multiple ways.

This article illustrates a few methods for installing the Act-On Beacon Tracker JavaScript into a WordPress-powered website if you prefer to do so manually.

FOOTER.PHP

Please note that this method will not work on WordPress.com-hosted websites due to direct file access being restricted.

Step 1

Open your WordPress directory within your FTP client and navigate to the following location:

public_html/wp-content/themes/[current_theme_name]/footer.php (or equivalent file if there is no footer.php). Alternatively, you can edit WordPress files within the WordPress Administrator interface itself by installing a plug-in such as WPIDE (Please note that Act-On has no affiliation with this plug-in developer and cannot support it or guarantee success while using it).

“footer.php” is typically the file that is loaded at the footer of every page. Please note that this file may have a different name or location in some highly customized WordPress themes. In this case, contact your theme developer.

Step 2

Create a backup copy of the original footer.php file and store it elsewhere to be safe.

Step 3

Open footer.php and you will see something like the following:

<?php
/**
* The template for displaying the footer.
* Contains footer content and the closing of the
* #main and #page div elements.
*/
?>
    </div><!-- #main .wrapper -->
    <footer id="colophon" role="contentinfo">
        <div class="site-info">
            <?php do_action( 'credits' ); ?>
            <a href="<?php echo esc_url( __( 'http://wordpress.org/', 'name' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'name' ); ?>"><?php printf( __( 'Proudly powered by %s', 'name' ), 'WordPress' ); ?></a>
        </div><!-- .site-info -->
    </footer><!-- #colophon -->
</div><!-- #page -->
<?php wp_footer(); ?>
</body>
</html>

Paste your entire Beacon Tracking code above the bottom-most </div>  (be sure to include <script> and </script> in your pasted visitor code). Please note that your footer.php file will likely be somewhat different, and the best placement of this code may also vary depending on its structure. However, placing the code above the bottommost </div> or above </footer> is typically a good place. 

To access the Beacon Tracking code in your Act-On account, navigate to Settings > Other Settings > Beacon Settings.

Step 4

Save your changes and load your web page. If you right-click on your web page and click View Source, you should be able to find your Beacon Tracking code toward the bottom of the website source. Check the Website Prospector report and you should start to see entries populating for your test visits.

Note that this method will not work on WordPress-hosted websites due to direct file access restrictions.

This involves modifying a file that can break all of your WordPress-powered web pages if errors are made. Please do not continue if you are uncomfortable opening this file if you do not have direct FTP access, and/or you do not have backups in place.

FUNCTIONS.PHP (Experienced WordPress Admins Only)

Step 1

Open your WordPress directory within your FTP client and navigate to the following location:

public_html/wp-content/themes/[current_theme_name]/functions.php

Alternatively, you can edit WordPress files within the WordPress Administrator interface itself by using a built-in code editor.

Step 2

Navigate to themes/[current_theme_name]/functions.php and create a backup copy of the original functions.php file and store it elsewhere to be safe. 

Open up functions.php and add the following on a new line below “<?php” (and any other introductory comments).

function ao_wvt(){
// below: your Act-On Beacon Tracking code, as copied from your account (located under
// Home > Settings > Other Settings > Beacon Settings)
?>
<script type="text/javascript">
 /* <![CDATA[ */
 document.write (
    '<img src="http://subdomain.company.com/acton/bn/1234/visitor.gif?ts='+
    new Date().getTime()+
    '&ref='+escape(document.referrer) + '">'
 );
 var aoAccountId = '1234';
 var aoCookieMode = 'STANDARD';
 var aoCookieDomain = 'servername.com';
 var aoServerContext = 'http://subdomain.company.com/acton';
 /* ]]> */
 </script>
<?php }
add_action('wp_footer', 'ao_wvt'); ?>
<?php
// this is to re-open the closed php tag from the above -- this may or may not be needed in your case 

The example above shows Beacon Tracking script wrapped in the appropriate code. Please do not copy the above example visitor tracking script. Your customized script can be pulled from Settings > Other Settings > Beacon Settings. 

The example above shows Beacon Tracking script wrapped in the appropriate code. Please do not copy the above example visitor tracking script. Your customized script can be pulled from Settings > Other Settings > Beacon Settings.

This adds your script to your functions.php file, which is designed to store your website’s various scripts. The last line (“add_action...”) then places this script onto your WordPress footer.

Template to paste into functions.php without example code and comments:

<?php
function ao_wvt(){
?>
// YOUR TRACKING SCRIPT GOES HERE
<?php }
add_action('wp_footer', 'ao_wvt'); ?>

Alternate Method Without Direct File Access 

It is highly recommended to add the Act-On Beacon Tracking code directly to your website source because the WordPress administration panel does not permit JavaScript to be added by default in pages and posts. Additionally, the above methods allow you to add the code such that it will automatically be applied to every web page on your website.

However, if there is no direct access to the underlying file structure of your WordPress installation, the Beacon Tracking code can be added within the WordPress interface using a plug-in of your choice to embed the tracking code. Depending on the plug-in used, your code may need to be manually added to every page or post you have.

Step 1

Navigate to Plugins > Add New in your WordPress Administrator panel. Here you may search and select one of many plug-ins that will enable the inclusion of JavaScript on your page, such as the CSS/JavaScript toolbox.

Please be aware that Act-On does not officially endorse any third-party WordPress plug-in, and cannot accept responsibility for supporting them, ensuring future compatibility, or unintentional changes resulting from plug-in use.

Step 2

Paste your Beacon Tracking code into your WordPress page. You may need to do this on every page, or just one, depending on the plug-in chosen (the above-referenced plug-in requires action for every page/post). It is very important to read the instructions your plug-in provides.

Step 3

Save your changes and load your web page. If you right-click on your web page and select View Source, you should be able to find your Beacon Tracking code near the bottom of the website source.