Website Personalisation (v2 Snippet)

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-website-personal/ppikcbhmbpfjahnbkkhahngadfaianbn


Step Two: The Hyper-Campaign


You can access the Hyper-Campaign direct from the Hyperise main menu.  A Hyper-Campaign connects the dots of your sales funnel and hyper personalises the full prospect journey.


The Hyper-Campaign has four main settings, as you change these, the options of the three main areas expand.



The more information you complete, the more targeted the campaign code will become.  For example straight-off-the-bat on entering you will be provided the website snippet to add to your website.  If you add a Pixel ID to the Hyper-Campaign, this will be then be added to the snippet code.


Tip: If you're already in an image, selecting the Launch button will take you there, with your image and integration already selected.



On entering the Hyper-Campaign you will see three core sections:

Message:  this represent the start of your sales funnel, this could be an email campaign, chatbot, LinkedIn message, postcard etc... 


Website:  this represents the destination your message will funnel your prospects to and convert them into customers.


Reengage Ads:  this represents the reengagement of prospects in your funnel, not yet converted to customers, via Ads.



Step Three: Copy the Code


Click the Copy Code button in section 2.1 to copy our website personalisation Javascript snippet.


Thats it for step three, unless you're an advanced user and want to get stuck into the snippet options, skip ahead to STEP FOUR.



Lets take a close look at an example of the snippet code we're copying from step 2.1 of the Hyper-Campaign:


<!-- Paste this script before end of body element-->
<script src='https://app.hyperise.io/snippets/r/v2/Dmug6Yad3.js?v=1.0.0'></script>
<script>
hyperise.init({
    autoStart: true,
    ipLookup: true
});
</script>


The parameters by default are autoStart and ipLookup, by completing further Hyperise options, this snippet will further complete with those settings.  


For example, adding in the Pixel ID, will add that to the snippet and enable the building of a personalised remarketing audience.


<!-- Paste this script before end of body element-->
<script src='https://app.hyperise.io/snippets/r/v2/Dmug6Yad3.js?v=1.0.0'></script>
<script>
hyperise.init({
    pixelId: 'TESTPIXELID',
    autoStart: true,
    ipLookup: true
});
</script>



OPTIONALLY: IF you choose not to use the Chrome Extension to select an image to be personalised, you can complete the image selection and add an image ID to the snippet and the image can be replaced without using the Extension.


<!-- Paste this script before end of body element-->
<script src='https://app.hyperise.io/snippets/r/v2/Dmug6Yad3.js?v=1.0.0'></script>
<script>
hyperise.init({
    imageId: 'hyperiseImage1',
    imageTemplate: 'ceRd0FWjt',
    pixelId: 'TESTPIXELID',
    autoStart: true,
    ipLookup: true
});
</script>



Step Four: Add the code to your website


Now add the code to your website, either globally on every page, if you want to personalise the whole site, or select 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.


This can also be achieved using Google Tag Manager, using the Custom HTML option.


The image code as we see in the example above can be added anywhere within the <body> tags of the web page, it's just HTML, so should play nicely with any web site editor.  



Step Five: Website Content Personalisation


The Javascript snippet also enables content personalisation on the web page.


Simply click the extension button in the browser tool bar and 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.




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



Step Six: 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 Seven: 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()



Delete Personalisation options