osclass

Dejare este mini tutorial para agregar el codigo javascript de Google Track Event al popular sistema de anuncios Osclass

Primero que nada, debemos revisar el Tema que usemos en Osclass para saber que archivos modificaremos. En este caso usaremos el tema por defecto llamado Bender Theme. Los temas pueden variar en cuanto a diseño pero mantienen una estructura general que permite mantener un orden en cuanto a la programación.

En resumen, los archivos en cuestión que debemos modificar son:

  • loop-single.php
  • loop-single-premium.php

Estos son los encargados de desplegar los anuncios de cada categoría (los simples y los premium).

osclass-google-track-event

El codigo del archivo loop-single.php luce asi:

<?php $size = explode('x', osc_thumbnail_dimensions()); ?>
<li class="listing-card <?php echo $class; if(osc_item_is_premium()){ echo ' premium'; } ?>">
    <?php if( osc_images_enabled_at_items() ) { ?>
        <?php if(osc_count_item_resources()) { ?>
            <a  class="listing-thumb" href="<?php echo osc_item_url() ; ?>" title="<?php echo osc_item_title() ; ?>"><img src="<?php echo osc_resource_thumbnail_url(); ?>" title="" alt="<?php echo osc_item_title() ; ?>" width="<?php echo $size[0]; ?>" height="<?php echo $size[1]; ?>"></a>
        <?php } else { ?>
            <a  class="listing-thumb" href="<?php echo osc_item_url() ; ?>" title="<?php echo osc_item_title() ; ?>"><img src="<?php echo osc_current_web_theme_url('images/no_photo.gif'); ?>" title="" alt="<?php echo osc_item_title() ; ?>" width="<?php echo $size[0]; ?>" height="<?php echo $size[1]; ?>"></a>
        <?php } ?>
    <?php } ?>
    <div class="listing-detail">
        <div class="listing-cell">
            <div class="listing-data">
                <div class="listing-basicinfo">
                    <a  href="<?php echo osc_item_url() ; ?>" class="title" title="<?php echo osc_item_title() ; ?>"><?php echo osc_item_title() ; ?></a>
                    <div class="listing-attributes">
                        <span class="category"><?php echo osc_item_category() ; ?></span> -
                        <span class="location"><?php echo osc_item_city(); ?> (<?php echo osc_item_region(); ?>)</span> <span class="g-hide">-</span> <?php echo osc_format_date(osc_item_pub_date()); ?>
                        <?php if( osc_price_enabled_at_items() ) { ?><span class="currency-value"><?php echo osc_format_price(osc_item_price()); ?></span><?php } ?>
                    </div>
                    <p><?php echo osc_highlight( strip_tags( osc_item_description()) ,250) ; ?></p>
                </div>
                <?php if($admin){ ?>
                    <span class="admin-options">
                        <a href="<?php echo osc_item_edit_url(); ?>" rel="nofollow"><?php _e('Edit item', 'bender'); ?></a>
                        <span>|</span>
                        <a class="delete" onclick="javascript:return confirm('<?php echo osc_esc_js(__('This action can not be undone. Are you sure you want to continue?', 'bender')); ?>')" href="<?php echo osc_item_delete_url();?>" ><?php _e('Delete', 'bender'); ?></a>
                        <?php if(osc_item_is_inactive()) {?>
                        <span>|</span>
                        <a href="<?php echo osc_item_activate_url();?>" ><?php _e('Activate', 'bender'); ?></a>
                        <?php } ?>
                    </span>
                <?php } ?>
            </div>
        </div>
    </div>
</li>

Donde vemos el tag a (lineas 5, 7 y 14) debemos agregar el código Javascript. Pero para esto debemos crear una rutina que nos entregue el dato del Track Event.

En mi caso, use la clase hDefines.php que se usaba en este contexto de los archivo “loop”. Esta clase esta ubicada aqui: \oc-includes\osclass\helpers.

Yo agregue este código al inicio de la clase hDefines.php para no “perderme” tanto. El método seria este:

/**
     * Gets the js google trackEvent
     *
     * @param string $url link completo para separar
     * @return string
     */
    function osc_google_trackEvent($url) 
	{
        $google_trackEvent = '';
        
		$url = str_replace("https://tydw.wordpress.com/", "", $url);
		
		$arreglo = explode("/", $url);
		$categoria = $arreglo[0];
		$subcategoria = $arreglo[1];
		
		$array1 = explode("_i",$arreglo[2]);
		$numero = $array1[1];
		
		
		$google_trackEvent = "_gaq.push(['_trackEvent', 'in/site/$categoria/$subcategoria/$numero', '$subcategoria', '$categoria']);";
		
        return($google_trackEvent);
    }

Esta demás decir que este método Uds. lo pueden hacer de otra manera y de como mejor les parezca. O agregarlo en otro lado también.

Con el metodo creado ya podemos utilizarlo en nuestros archivos principales. La llamada seria asi:

<a onclick="<?php echo osc_google_trackEvent( osc_item_url() ); ?>" class="listing-thumb" href="<?php echo osc_item_url() ; ?>" title="<?php echo osc_item_title() ; ?>"><img src="<?php echo osc_resource_thumbnail_url(); ?>" title="" alt="<?php echo osc_item_title() ; ?>" width="<?php echo $size[0]; ?>" height="<?php echo $size[1]; ?>"></a>

Teniendo claro esto, debemos replicar el llamado del metodo en las lineas 5, 7 y 14 del archivo loop-single.php (lo mismo exactamente para loop-single-premium.php)

Código nuevo para el archivo loop-single.php

<?php $size = explode('x', osc_thumbnail_dimensions()); ?>
<li class="listing-card <?php echo $class; if(osc_item_is_premium()){ echo ' premium'; } ?>">
    <?php if( osc_images_enabled_at_items() ) { ?>
        <?php if(osc_count_item_resources()) { ?>
            <a onclick="<?php echo osc_google_trackEvent( osc_item_url() ); ?>" class="listing-thumb" href="<?php echo osc_item_url() ; ?>" title="<?php echo osc_item_title() ; ?>"><img src="<?php echo osc_resource_thumbnail_url(); ?>" title="" alt="<?php echo osc_item_title() ; ?>" width="<?php echo $size[0]; ?>" height="<?php echo $size[1]; ?>"></a>
        <?php } else { ?>
            <a onclick="<?php echo osc_google_trackEvent( osc_item_url() ); ?>" class="listing-thumb" href="<?php echo osc_item_url() ; ?>" title="<?php echo osc_item_title() ; ?>"><img src="<?php echo osc_current_web_theme_url('images/no_photo.gif'); ?>" title="" alt="<?php echo osc_item_title() ; ?>" width="<?php echo $size[0]; ?>" height="<?php echo $size[1]; ?>"></a>
        <?php } ?>
    <?php } ?>
    <div class="listing-detail">
        <div class="listing-cell">
            <div class="listing-data">
                <div class="listing-basicinfo">
                    <a onclick="<?php echo osc_google_trackEvent( osc_item_url() ); ?>" href="<?php echo osc_item_url() ; ?>" class="title" title="<?php echo osc_item_title() ; ?>"><?php echo osc_item_title() ; ?></a>
                    <div class="listing-attributes">
                        <span class="category"><?php echo osc_item_category() ; ?></span> -
                        <span class="location"><?php echo osc_item_city(); ?> (<?php echo osc_item_region(); ?>)</span> <span class="g-hide">-</span> <?php echo osc_format_date(osc_item_pub_date()); ?>
                        <?php if( osc_price_enabled_at_items() ) { ?><span class="currency-value"><?php echo osc_format_price(osc_item_price()); ?></span><?php } ?>
                    </div>
                    <p><?php echo osc_highlight( strip_tags( osc_item_description()) ,250) ; ?></p>
                </div>
                <?php if($admin){ ?>
                    <span class="admin-options">
                        <a href="<?php echo osc_item_edit_url(); ?>" rel="nofollow"><?php _e('Edit item', 'bender'); ?></a>
                        <span>|</span>
                        <a class="delete" onclick="javascript:return confirm('<?php echo osc_esc_js(__('This action can not be undone. Are you sure you want to continue?', 'bender')); ?>')" href="<?php echo osc_item_delete_url();?>" ><?php _e('Delete', 'bender'); ?></a>
                        <?php if(osc_item_is_inactive()) {?>
                        <span>|</span>
                        <a href="<?php echo osc_item_activate_url();?>" ><?php _e('Activate', 'bender'); ?></a>
                        <?php } ?>
                    </span>
                <?php } ?>
            </div>
        </div>
    </div>
</li>

Código nuevo para el archivo loop-single-premium.php

<?php $size = explode('x', osc_thumbnail_dimensions()); ?>
<li class="listing-card <?php echo $class; ?> premium">
    <?php if( osc_images_enabled_at_items() ) { ?>
        <?php if(osc_count_premium_resources()) { ?>
            <a onclick="<?php echo osc_google_trackEvent( osc_premium_url() ); ?>" class="listing-thumb" href="<?php echo osc_premium_url() ; ?>" title="<?php echo osc_premium_title() ; ?>"><img src="<?php echo osc_resource_thumbnail_url(); ?>" title="" alt="<?php echo osc_premium_title() ; ?>" width="<?php echo $size[0]; ?>" height="<?php echo $size[1]; ?>"></a>
        <?php } else { ?>
            <a onclick="<?php echo osc_google_trackEvent( osc_premium_url() ); ?>" class="listing-thumb" href="<?php echo osc_premium_url() ; ?>" title="<?php echo osc_premium_title() ; ?>"><img src="<?php echo osc_current_web_theme_url('images/no_photo.gif'); ?>" title="" alt="<?php echo osc_premium_title() ; ?>" width="<?php echo $size[0]; ?>" height="<?php echo $size[1]; ?>"></a>
        <?php } ?>
    <?php } ?>
    <div class="listing-detail">
        <div class="listing-cell">
            <div class="listing-data">
                <div class="listing-basicinfo">
                    <a onclick="<?php echo osc_google_trackEvent( osc_premium_url() ); ?>" href="<?php echo osc_premium_url() ; ?>" class="title" title="<?php echo osc_premium_title() ; ?>"><?php echo osc_premium_title() ; ?></a>
                    <div class="listing-attributes">
                        <span class="category"><?php echo osc_premium_category() ; ?></span> -
                        <span class="location"><?php echo osc_premium_city(); ?> (<?php echo osc_premium_region(); ?>)</span> <span class="g-hide">-</span> <?php echo osc_format_date(osc_premium_pub_date()); ?>
                        <?php if( osc_price_enabled_at_items() ) { ?><span class="currency-value"><?php echo osc_format_price(osc_premium_price()); ?></span><?php } ?>
                    </div>
                    <p><?php echo osc_highlight( strip_tags( osc_premium_description()) ,250) ; ?></p>
                </div>
                <?php if($admin){ ?>
                    <span class="admin-options">
                        <a href="<?php echo osc_premium_edit_url(); ?>" rel="nofollow"><?php _e('Edit item', 'bender'); ?></a>
                        <span>|</span>
                        <a class="delete" onclick="javascript:return confirm('<?php echo osc_esc_js(__('This action can not be undone. Are you sure you want to continue?', 'bender')); ?>')" href="<?php echo osc_premium_delete_url();?>" ><?php _e('Delete', 'bender'); ?></a>
                        <?php if(osc_premium_is_inactive()) {?>
                        <span>|</span>
                        <a href="<?php echo osc_premium_activate_url();?>" ><?php _e('Activate', 'bender'); ?></a>
                        <?php } ?>
                    </span>
                <?php } ?>
            </div>
        </div>
    </div>
</li>

Con estas modificaciones, ya pidran ver en el codigo fuente de su sitio como aparece el codigo del Track Event y podran llevar la cuenta de los clicks en su panel de Google Analytics.

TYDW.-

Anuncios