Website Personalisation

Websites are generally at the centre of your sales funnel and central to generating sales, so it makes sense to apply personalisation and boost conversions.

The following guide details how to use the Hyper-Campaign to personalise your website, without coding, or dealing with complex HTML!

Step One: Install the Chrome Extension

We've created a Chrome browser extension, that enables you to select any element on your web page and either insert personalisation tags, or if an image, replace with a Hyperise personalised image.

To get started first install the Chrome extension: 

https://chrome.google.com/webstore/detail/hyperise-image-website-pe/ppikcbhmbpfjahnbkkhahngadfaianbn

Step Two: Copy the Code

Go to the Hyper-Campaign in your account and click the Add Snippet to your website button.

You can then copy your snippet, as well as verify the installation.

Step Three: Add the code to your website

Now add the Hyperise snippet to your website, either globally on every page, if you want to personalise the whole site, or selected pages, if you want to limit the number of pages you wish to personalise.

You can place the snippet anywhere on the page before the end </body> tag.

If you use Google Tag Manager this is the simplest option, using the Custom HTML option. 

If you use WordPress you can use an existing Javascript manage to add, or use the Hyperise Plugin to add the snippet to your page.

For all other websites, look for the custom code, or tracking scripts option, that provides the option to add custom Javascript snippets, such as Google Analytics, HotJar etc.

Step Four: Website Content Personalisation

The Javascript snippet enables content personalisation on the web page.

To load the website personalisation toolbar, click the icon in the Chrome toolbar (once you've installed our extension).

Once loaded you will be able to select any element on the page and add any of the Merge Tags used within your image, to the web page content. 

These tags will be replaced with the enriched data the image uses, or fallback data set, if not able to personalise.

Check out the video below for an overview of the website toolbars capabilities:

Important: You must add add least one personalised image to your web page, or set a default image, to enable personalisation.  

If you don't put a personalised imaged on the website page, ie if you want to personalise with just text, then you must set a default image within your Hyperise account.

Select any Active image, edit and select Canvas Settings.

Tick the Is Default control and Save the image.

The image wont show on the web page, but will be used for any fallback data settings needed on the page and enrichments/views will be recorded against that image.

NB: If you're using Chrome plugin's like Grammerly, please disable them on your website, as they break the personalisation mapping.

Step Five: Reverse IP Lookup

As well as using utm_hyperef URL parameters to identify users, via outreach campaigns, we can also identify prospects using their IP address.  When a visitor to your site works for a medium or enterprise business, they are more than likely to have a dedicated IP address and so can be tracked back to a company.  

Using this match, we're able to enrich with firmographic data, and personalise to company level.

Once you have enabled reverse IP lookups, you will see new prospect discoveries on the dashboard, as well as in the IP Lookups Log, which can drilled into and exported, as well as linking through to LinkedIn to discover prospects..

To enable this, you need to purchase a IP lookup bundle, which costs $99 and provides 500 unique IP lookups.  You can purchase a IP Lookup bundle here.

Step Six: Advanced Options and Information

Website Cookies

The Hyper-Campaign snippet will also set a cookie, this enables that second time visitors, who visit directly, rather than from a personalised link, will still be identified and served personalised images and web page content.

I hope the above example is helpful, but please jump on to chat, or our facebook community, if you have any further questions.

Forms

If you haven't been able to identify the web visitor via utm_hyperef parameters from your campaigns, or reverse IP lookups, or with a cookie from a prior session, your next best option is to ask the visitor for some information and then personalising based on that input.

Of course there are many ways ask a user for information, such as chatbots (see our Landbot guide if that's your bag), but for this example lets keep it simple with a form.

To pass collected data to Hyperise, to enable enrichment and personalisation, simply use the following Javascript call in your form or web calls, passing the collected data:

hyperise.personalize({email: document.getElementById('email').value});

You can pass any collected data; the example above is passing an email to Hyperise, the example below is passing the first name:

hyperise.personalize({first_name: document.getElementById('fname').value});

You can also pass multiple values, by using commas to separate each name: value pair:

hyperise.personalize({first_name: '', website: '', email: ''});

You can reset any personation in the users session by triggering the following Javascript command:

hyperise.revert()

You can set a call to fire once personalisation has completed on the page, using onComplete within the Hyperise Snippet:

    hyperise.init({
      autoStart: true,
      ipLookup: true,
      onComplete: function(personalized){
        console.log('PERSONALIZED',personalized);
      }
    });   

Once personalisation has completed, you can access any of the enriched personalisation data via Javascript, to use further in your page, or send to chatbots, CRMs etc...

For exampe, to access the enriched business name, use the following value in Javascript:

hyperise.personalized.business_name

Here are all the available values: