Downloadseiten einrichten / Ein- und Ausblenden von Elementen

Die folgende anleitung bezieht sich auf diese Sites:

• angebote.pr-gateway.de
• pr-gateway.de/blog
• blog2social.com/de/ bzw. /en/blog

Auf diesen Seiten läuft ein Javascript-Snipptet

// get URL parameter
function getURLparameter(param){
    var url = window.location.search.substring(1);
    url = url.replace(/^&$/, '&');
    var variables = url.split('&');
    for (var i = 0; i < variables.length; i++){
        var currentParam = variables[i].split('=');
        if (currentParam[0] === param){
            return currentParam[1];
        }
    }
}

function isset(object){
    return (typeof object !=='undefined');
}

function hide_obj(el){
    el = el.split(",");
    for(i=0;i<el.length;i++){
	$("."+getURLparameter("x")).css('display', 'none');
    }
}
function show_obj(el){
	el = el.split(",");
	for(i=0;i<el.length;i++){
	$("."+getURLparameter("r")).css('display', 'block');
    }
}

$(document).ready(function(){
    // display divs with class as give by parameter 'r'
    if (isset(getURLparameter("r")) && getURLparameter("r") != "" && 
        getURLparameter("r") !== undefined) {		
	show_obj(getURLparameter("r"));
	//jQuery("."+getURLparameter("r")).css('display', 'block');
	}
    if (isset(getURLparameter("x")) && getURLparameter("x") != "" && 
        getURLparameter("x") !== undefined) {
	hide_obj(getURLparameter("x"));
	//jQuery("."+getURLparameter("x")).css('display', 'none');
	}
});

Ziel des Snippets ist es, Elemente anhand einer Klasse ein- bzw. auszublenden.

Beispiel:

Man gibt einem Div, in das das Registrierungsformular eingebunden wird, die Klasse "register". 

Einem zweiten Div gibt man die Klasse "download" und bettet darin den Downloadlink ein.

Damit der Downloadlink beim ersten Aufruf der Seite nicht angezeigt wird, setzt man die Klasse "conditional" hinzu.

• <!-- Das Registrierungsformular -->
  <div id="register" class="register"> [Hier das Formular] </div>
  
  <!-- Der Downloadlink -->
  <div id="download" class="download conditional"> [Hier der Downloadlink] </div>

Die Klasse "conditional" ist im Stylesheet der Sites definiert mit display: "none";

Das Javascript bewirkt, dass über die URL-Parameter "r" und "x" nun bestimmte Elemente ein- bzw. ausgeblendet werden.

https://www.example.com/landingpage/?r=download&x=register

r: Die Klasse, die als Wert übergeben wird, wird eingeblendet.

x: Die Klasse, die als Wert übergeben wird, wird ausgeblendet.

Da man mehrere Klassen definieren kann, ist es möglich, für unterschiedliche Kanäle unterschiedliche Werte zu übergeben.

Das führt dazu, dass man in Analytics sehen kann, welcher Kanal z.B. wie viele Leads generiert hat.

Hinweis:

Das Plugin Icegram hat einen eigenen Mechanismus. Dort kann man eine unique URL angeben, um ein Element einzublenden.