There are two methods to display the Geo Content in your website.
Overview of the two methods
Method 1: Entering content for each in our HTML editor and displaying it using our Geo Content HTML tag.
This is recommended if content only needs to be displayed in one part of your website. Our Geo Content service will automatically inject the location based content where the Geo Content HTML tag is placed.
Method 2: Entering content variations directly in your website and 'wrapping' it with our Smart HTML tag wrappers provided for each rule.
This is recommend if you have multiple pieces of content in the same page that needs to be changed based on location. Our Geo Content service will automatically hide all the content by default and then show only the content based on the visitor's location.
How does the integration work?
Method 1: Integrating using the Geo Content HTML
Integrating using HTML tags involves two parts:
(1) placing the code script into your website just before the closing </body> tag or footer and
(2) placing the HTML tag in the body where the content needs to appear
<head>
<!-- Your website head -->
</head>
<body>
<!-- Your website body -->
<div class='geotargetlygeocontent1532057370878'>
<!-- Geo content will render here-->
</div>
<!-- Geo content code script -->
<script>
var geotargetlycontent1532057370878 = document.createElement('script');
geotargetlycontent1532057370878.setAttribute('type','text/javascript');
geotargetlycontent1532057370878.async = 1;
geotargetlycontent1532057370878.setAttribute('src', '//geotargetly-1a441.appspot.com/geocontent?id=-LHpj3-QFpHBsnPn4ip1');
document.getElementsByTagName('head')[0].appendChild(geotargetlycontent1532057370878);
</script>
</body>
The HTML tag is basically a HTML class name. You can add this class to any HTML element in your page and our Geo Content service will find and inject the required content into that element.
Method 2: Integrating using Smart HTML Tag wrappers
Integrating using HTML wrappers involves two parts:
(1) placing the code script into your website just before the closing </body> tag or footer and
(2) wrapping each content variation in your site with the provided Smart HTML tag wrappers for each rule.
Notice how you can use the Smart HTML Tag wrappers multiple times in your page allowing you to show/hide different pieces of content in the same page.
<head>
<!-- Your website head -->
</head>
<body>
<!-- Your website body -->
<div class='geotargetlygeocontent1532057370878_content_1' style='display:none;'>
<!-- Enter content to display for location segment 1 -->
</div>
<div class='geotargetlygeocontent1532057370878_content_2' style='display:none;'>
<!-- Enter content to display for location segment 2 -->
</div>
<div class='geotargetlygeocontent1532057370878_default' style='display:none;'>
<!-- Enter default content here -->
</div>
<!-- Other content in your page -->
<!-- Other content in your page -->
<!-- Other content in your page -->
<!-- Other content in your page -->
<div class='geotargetlygeocontent1532057370878_content_1' style='display:none;'>
<!-- Enter content to display for location segment 1 -->
</div>
<div class='geotargetlygeocontent1532057370878_content_2' style='display:none;'>
<!-- Enter content to display for location segment 2 -->
</div>
<div class='geotargetlygeocontent1532057370878_default' style='display:none;'>
<!-- Enter default content here -->
</div>
<!-- Geo content code script -->
<script>
var geotargetlycontent1532057370878 = document.createElement('script');
geotargetlycontent1532057370878.setAttribute('type','text/javascript');
geotargetlycontent1532057370878.async = 1;
geotargetlycontent1532057370878.setAttribute('src', '//geotargetly-1a441.appspot.com/geocontent?id=-LHpj3-QFpHBsnPn4ip1');
document.getElementsByTagName('head')[0].appendChild(geotargetlycontent1532057370878);
</script>
</body>
The Smart HTML Tag Wrappers are basically HTML classes and a 'display none' style. By default the element is hidden with the 'display:none;' style property. Our Geo Content service will then find the element with the class that needs to be shown based on the visitor location and will remove the 'display:none;' property so it becomes visible.
You can add these class names and display none property to any existing HTML elements in your page.